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

Question

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

假设我想在 HTML Canvas 上绘制一个尺寸为 1"x 1"的正方形。 我知道使用像素作为可打印长度是没有意义的，我们需要考虑 DPI。在下面的示例中，我采用了 300 的 dpi:

<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();

The result is a nice square with width 300px in a 300dpi setting ，所以在纸上打印时应该打印一个一英寸见方。但问题是它没有。我检查了打印机设置并使用了 300dpi。

谁能告诉我哪里做错了，或者指出正确的方向？

Answer 1

打印质量/DPI

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

您需要打印尺寸

图像 DPI 取决于其分辨率(以像素为单位的宽度和高度)以及以毫米或英寸为单位打印的尺寸以提供打印分辨率(iDPU“每单位图像点数”以供在此答案中进一步引用)。

图像 DPI 没有意义，除非您还将固定的打印尺寸关联到图像。

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

页面大小

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

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

Canvas 分辨率

创建一个 2 英寸 x 2 英寸的 iDPI 300 Canvas 。

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

Canvas 大小

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

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

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

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

将 Canvas 添加到页面

document.body.appendChild(canvas);

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

• 注意: Canvas 不应有边框、填充、边距或继承任何影响其大小的 CSS 样式。

打印

• 确保打印机质量设置为 300DPI(或更高)。
• 选择页面尺寸(在本例中 A4 为 210 × 297 毫米或 8.27 × 11.69 英寸)
• 选择纵向布局。
• 在打印选项上选择无边框。
• 打印

带边框打印。

如果您想要打印页面上的边框，您需要使用自定义边框，以便您知道边框大小。 (注意示例仅使用英寸)

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

如上所示创建 Canvas 。

调整 Canvas 大小

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

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

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";