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

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

假设我想在HTML画布上画一个正方形，尺寸为1“x1”。 我知道使用像素作为可打印长度是没有意义的，我们需要考虑DPI。在以下示例中，我采用了300的dpi：

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

，所以在纸上打印时，它应该打印一英寸的正方形。但问题是它没有。我检查了打印机设置并使用了300dpi

---

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

我在评论中注意到，你的度量单位是厘米而不是英寸（很好的选择，公制FTW），因此这里有一个评论示例，可以正确处理这些度量

var dpi=300；//打印分辨率
var ppmm=dpi/25.4；//获取每毫米像素的比率
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量x=5*ppmm；//5毫米
变量y=5*ppmm；//5毫米
var w=76*ppmm；//76毫米
var h=76*ppmm//76mm
ctx.rect（x，y，w，h）；//用简单的方法画一个矩形
ctx.stroke（）；
var data=canvas.toDataURL（）；//提取图像数据
//将图像数据注入链接，创建一个可下载的文件
var link=document.getElementById（“链接”）；
link.setAttribute（'href'，'data:application/octet stream；charset=utf-16le；'+data）；
link.setAttribute（'download'，'image.png'）

打印质量/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,
          }
      },
}

画布分辨率
创建一个iDPI 300为2英寸乘2英寸的画布

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 * sizeHeigth;

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

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

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

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

将画布添加到页面

document.body.appendChild(canvas);


注意：画布必须添加到页面正文或100%页面宽度的元素中。即以像素为单位的宽度===内部宽度

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


印刷

确保打印机质量设置为300DPI（或更高）
选择页面大小（在本例中，A4为210×297毫米或8.27×11.69英寸）
选择要绘制的布局
在打印选项上选择无边框
印刷品

用边框打印。
如果要在打印页面上添加边框，则需要使用自定义边框，以便了解边框大小。（注意示例仅使用英寸）

如上图所示创建画布

调整画布的大小

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

那么，打印出来的尺寸是多少呢？一条线应该是7.6cm，用100dpi渲染，然后用100dpi打印出来，结果是7.4cm。同样的故事，线条15.2厘米，打印14.7厘米。根据我们的研究，canvas的输出总是96dpi，这似乎与您的差异相关。（即使当我测试它时，我有72dpi的文件…）缩放画布使其精确到A4对我来说很有用，因为更大的画布必须收缩以适应A4。我最后还从画布的宽度和高度中减去了大约15毫米，以说明打印机根本无法打印空白。
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";