以正确的大小打印HTML5 Canvas

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

我试过这个简单的例子：

<!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,150,75);
</script>
</body>
</html>

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

解决方法

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

打印机通常以每英寸300像素打印.

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

因此,如果您想要打印50毫米的绘图,您将计算所需的像素大小,如下所示：

50毫米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方形图像.

以正确的大小打印HTML5 Canvas

解决方法

猜你在找的HTML5相关文章