如何绘制真实尺寸的图像并确保打印正确
How to draw an image in real size and ensure printing will be correct
我真的不知道如何将我的问题转化为一个问题，但这里有一个很好的描述：
假设我想在 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。
谁能告诉我哪里做错了，或者指出正确的方向？
我在评论中注意到您的测量单位是厘米而不是英寸（不错的选择，公制 FTW），所以这里有一个正确处理这些尺寸的评论示例
var dpi = 300; // the print resolution
var ppmm = dpi / 25.4; // get the pixel-per-millimeter ratio
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 5 * ppmm; // 5mm
var y = 5 * ppmm; // 5mm
var w = 76 * ppmm; // 76mm
var h = 76 * ppmm // 76mm
ctx.rect(x, y, w, h); // drawing a rectangle the simple way
ctx.stroke();
var data = canvas.toDataURL(); // extract the image data
// inject the image data into a link, creating a downloadable file
var link = document.getElementById("link");
link.setAttribute('href', 'data:application/octet-stream;charset=utf-16le;' + data);
link.setAttribute('download', "image.png");
<!-- the canvas is scaled down from 300dpi to 96dpi it shouldn't affect the final image but it makes it nicer for the screen and more manageable -->
<canvas id="canvas" width="1125px" height="1125px" style="width:360px;height:360px"></canvas>
<a href="#" id="link">download</a>
要打印 7.5 厘米的 300dpi 图像，您必须获得 pixel-per-mm 比例并将尺寸乘以该比例。
当您下载图像时，它将是一张 1125x1125 像素的 72dpi 图像，将其重新采样为 300dpi，您将得到 270x270 像素，打印时等于 95.25 毫米（对于整个图像，填充和所有）。
绘制的矩形的边长为 897.6377952755906px，在 300dpi 下打印输出为 76mm
顺便说一句，小数像素大小是我缩小屏幕上 canvas 的原因。由于我们优先考虑打印，因此屏幕图像会受到影响并且看起来模糊，将其缩小会使它看起来更清晰。此外，在浏览器中查看它的大小更易于管理。
最后说明：显然，视网膜屏幕使用不同的 dpi 值来呈现 canvas，因此矩形看起来会更小。在 "normal" 分辨率的显示器上，它在屏幕上的尺寸也是 7.6 厘米。
打印quality/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分辨率
创建 iDPI 300 为 2 英寸 x 2 英寸的 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 打印 size/page 打印宽度
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（或更高）。
- Select 页面大小（本例中 A4 为 210 × 297 毫米或 8.27 × 11.69 英寸）
- Select布局为纵向。
- Select 打印选项无边框。
- 打印
打印有边框。
如果您想要打印页面上的边框，您需要使用自定义边框，以便您知道边框大小。 （注意示例仅使用英寸）
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";
我真的不知道如何将我的问题转化为一个问题，但这里有一个很好的描述：
假设我想在 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。
谁能告诉我哪里做错了，或者指出正确的方向？
我在评论中注意到您的测量单位是厘米而不是英寸（不错的选择，公制 FTW），所以这里有一个正确处理这些尺寸的评论示例
var dpi = 300; // the print resolution
var ppmm = dpi / 25.4; // get the pixel-per-millimeter ratio
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 5 * ppmm; // 5mm
var y = 5 * ppmm; // 5mm
var w = 76 * ppmm; // 76mm
var h = 76 * ppmm // 76mm
ctx.rect(x, y, w, h); // drawing a rectangle the simple way
ctx.stroke();
var data = canvas.toDataURL(); // extract the image data
// inject the image data into a link, creating a downloadable file
var link = document.getElementById("link");
link.setAttribute('href', 'data:application/octet-stream;charset=utf-16le;' + data);
link.setAttribute('download', "image.png");
<!-- the canvas is scaled down from 300dpi to 96dpi it shouldn't affect the final image but it makes it nicer for the screen and more manageable -->
<canvas id="canvas" width="1125px" height="1125px" style="width:360px;height:360px"></canvas>
<a href="#" id="link">download</a>
要打印 7.5 厘米的 300dpi 图像，您必须获得 pixel-per-mm 比例并将尺寸乘以该比例。
当您下载图像时，它将是一张 1125x1125 像素的 72dpi 图像，将其重新采样为 300dpi，您将得到 270x270 像素，打印时等于 95.25 毫米（对于整个图像，填充和所有）。
绘制的矩形的边长为 897.6377952755906px，在 300dpi 下打印输出为 76mm
顺便说一句，小数像素大小是我缩小屏幕上 canvas 的原因。由于我们优先考虑打印，因此屏幕图像会受到影响并且看起来模糊，将其缩小会使它看起来更清晰。此外，在浏览器中查看它的大小更易于管理。
最后说明：显然，视网膜屏幕使用不同的 dpi 值来呈现 canvas，因此矩形看起来会更小。在 "normal" 分辨率的显示器上，它在屏幕上的尺寸也是 7.6 厘米。
打印quality/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分辨率
创建 iDPI 300 为 2 英寸 x 2 英寸的 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 打印 size/page 打印宽度
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（或更高）。
- Select 页面大小（本例中 A4 为 210 × 297 毫米或 8.27 × 11.69 英寸）
- Select布局为纵向。
- Select 打印选项无边框。
- 打印
打印有边框。
如果您想要打印页面上的边框，您需要使用自定义边框，以便您知道边框大小。 （注意示例仅使用英寸）
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";