如何绘制真实尺寸的图像并确保打印正确

Question

我真的不知道如何将我的问题转化为一个问题，但这里有一个很好的描述：

想象一下，我想在 HTML 画布上绘制一个尺寸为 1" x 1" 的正方形。我知道使用像素作为可打印长度是没有意义的，我们需要考虑DPI。在以下示例中，我将 dpi 设置为 300：

<canvas id="myCanvas" width="400" height="400"></canvas>

这是我的 JavaScript：

var dpi = 300;
var cContext = document.getElementById("myCanvas").getContext("2d");

cContext.moveTo(50,  50);

// Draw a square
cContext.lineTo(350, 50);
cContext.lineTo(350, 350);
cContext.lineTo(50,  350);
cContext.lineTo(50,  50)

cContext.stroke();

结果是在 300dpi 设置中宽度为 300px 的漂亮正方形，因此在纸张上打印时应该打印一英寸的正方形。但问题是事实并非如此。我检查了打印机设置并使用了 300dpi。

有人可以告诉我我做错了什么，或者指出我正确的方向吗？

Answer 1

打印质量/DPI

\n

打印机的 DPI 设置与源图像 DPI 无关，通常称为打印质量。

\n

您需要打印尺寸

\n

图像 DPI 取决于其分辨率（以像素为单位的宽度和高度）以及以毫米或英寸为单位打印的尺寸，以给出打印分辨率（iDPU“每单位图像点数”，以供本答案中的进一步参考）。

\n

除非您还将固定的打印尺寸与图像相关联，否则图像 DPI 毫无意义。

\n

如果打印机的 DPI 设置与图像的 iDPI 不同，则打印机（或驱动程序）将对图像 DPI 进行下采样或上采样以匹配所需的 DPI。您希望避免下采样，因为这会降低图像质量。

\n

页面大小

\n

使打印机 DPI 与图像 iDPU 相匹配。此示例适用于纵向模式的 A4 页面。您可以使用任何尺寸的打印页面，但您需要知道实际的物理尺寸。

\n

const pageSizes = {\n   a4 : {\n      portrait : {\n          inch : {\n             width : 8.27,\n             height : 11.69,\n          },\n          mm : {\n             width : 210,\n             height : 297,\n          }\n      },\n      landscape : {\n          inch : {\n             height : 8.27,\n             width : 11.69,\n          },\n          mm : {\n             width : 297,\n             height : 210,\n          }\n      },\n}\n

\n

画布分辨率

\n

创建一个 iDPI 300 为 2 英寸 x 2 英寸的画布。

\n

const DPI = 300;  // need to have a selected dots per unit in this case inches\nconst units = "inch";\nconst pageLayout = "portrait";\nconst printOn = "a4";\n// incase you are using mm you need to convert\nconst sizeWidth = 2;  // canvas intended print size in units = "inch"\nconst sizeHeight = 2;\nvar canvas = document.createElement("canvas");\ncanvas.width = DPI * sizeWidth;\ncanvas.height = DPI * sizeHeight;\n

\n

画布的尺寸

\n

缩放画布以使页面适合正确的尺寸，以匹配打印尺寸。这将是画布打印尺寸/页面打印宽度

\n

canvas.style.width = ((sizeWidth / pageSizes[printOn][pageLayout][units].width) * 100) + "%";\n

\n

对于高度，您需要假设像素方面是正方形，并且页面的高度可能比打印页面长或短，因此您必须使用像素。

\n

canvas.style.height = Math.round((sizeHeight / pageSizes[printOn][pageLayout][units].width) * innerWidth) + "px";\n

\n

将画布添加到页面

\n

document.body.appendChild(canvas);\n

\n

\n

• 注意：画布必须添加到页面主体或占页面宽度 100% 的元素。即以像素为单位的宽度===innerWidth。

  \n
\n

• 注意：画布不应有边框、内边距、边距或继承任何影响其大小的 CSS 样式。

  \n
\n

\n

印刷

\n

\n
• 确保打印机质量设置为 300DPI（或更高）。
\n
• 选择页面尺寸（在本例中，A4 为 210 \xc3\x97 297 毫米或 8.27 \xc3\x97 11.69 英寸）
\n
• 选择纵向布局。
\n
• 在打印选项中选择无边框。
\n
• 打印
\n

\n

带边框打印。

\n

如果您希望打印页面上有边框，则需要使用自定义边框，以便了解边框尺寸。（注意示例仅使用英寸）

\n

 const border = { // in inches\n     top : 0.4,\n     bottom : 0.4,\n     left : 0.4,\n     right : 0.4,\n }\n    \n

\n

创建画布，如上所示。

\n

调整画布大小

\n

canvas.style.width = ((sizeWidth / (pageSizes.a4.portrait.width - border.left - border.right) * 100) + "%";\n

\n

高度变得有点复杂，因为它需要根据边框调整页面的像素宽度。

\n

canvas.style.height = Math.round((sizeHeight / (pageSizes.a4.portrait.width  - border.left - border.right)) * innerWidth * (1 - (border.left - border.right) / pageSizes.a4.portrait.width)  ) + "px";\n

\n