Question

是否有正确的方法来指定画布元素的大小，例如毫米，这样如果我将其打印出来，它将具有正确的大小？

我尝试过这个简单的例子：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
style="border:1px solid #c3c3c3; width:50mm; height:50mm;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

但是在屏幕上画布是45毫米而不是50毫米，当打印时它是55毫米^^

Answer 1

第1部分：生成50毫米打印图纸需要多少画布像素？

打印机通常以每英寸300像素的速度打印。

以毫米为单位：300ppi / 25.4 mm-in = 11.81像素/毫米。

因此，如果您想要打印50毫米的图纸，您可以像这样计算所需的像素大小：

50mm x 11.81ppm = 590.5像素（591像素）

你将画布调整为591像素（假设为方形），如下所示：

// resize the canvas to have enough pixels to print 50mm drawing
c.width=591;
c.height=591;

第2部分：将画布导出为图像

要打印画布，您需要将画布转换为可以使用context.toDataURL进行的图像。

// create an image from the canvas
var img50mm=new Image();
img50mm.src=canvas.toDataURL();

第3部分：将导出的图像转换为正确的打印分辨率

context.toDataURL始终会创建一个每英寸72像素的图像。

打印机通常以更高的分辨率打印，每英寸可能有300像素。

因此，要使导出的图像在页面上正确打印，导出的图像必须从72ppi转换为300ppi。

ImageMagick 库可以进行转换：http://www.imagemagick.org/

这是一个服务器端工具，因此您必须将导出的图像从服务器上弹回（可能使用AJAX来往返图像）。

ImageMagick适用于PHP，IIS和其他服务器环境。

这是一个使用PHP转换图像分辨率并将转换后的图像回送给调用者的示例：

// Assume you've uploaded the exported image to
// "uploadedImage.png" on the server
<?php
  $magic = new Imagick();
  $magic->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
  $im->setImageResolution(300,300);
  $im->readImage("uploadedImage.png");
  $im->setImageFormat("png");
  header("Content-Type: image/png");
  echo $im;
?>

最终部分：打印出来！

从服务器收到的转换后的文件将在300ppi打印机上打印50mm方形图像。

Answer 2

不要使用样式来声明宽度和高度。在元素中以像素为单位声明它，如下所示：<canvas width = "500" height = "500"></canvas>

应该工作。

Answer 3

如果您决定在服务器端处理生成的PNG，则可以set PNG pHYs chunk in pure PHP。

以正确的大小打印HTML5 Canvas

3 个答案: