是否有正确的方法来指定画布元素的大小,例如毫米,以便如果我将其打印出来,它将具有正确的大小？
我试过这个简单的例子:
<!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毫米^^
第1部分:生成50mm打印图纸需要多少画布像素？
打印机通常以每英寸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方形图像.