以正确的大小打印HTML5画布 [英] Printing HTML5 Canvas in the correct size
问题描述
是否有正确的方式来指定一个画布元素的大小，例如毫米，这样如果我将它打印出来，它将具有正确的大小？
I已经试过这个简单的例子：
<！DOCTYPE html>
< html>
< body>
< canvas id =myCanvas
style =border：1px solid＃c3c3c3; width：50mm; height：50mm;>
您的浏览器不支持HTML5画布标签。
< / 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印刷图需要多少个画布像素？
$ b
打印机通常以每英寸300像素的速度打印。
以毫米为单位：300ppi / 25.4 mm-in = 11.81像素/毫米。 p>
所以如果你想打印一张50mm的图纸，你可以像这样计算出所需的像素大小：
<50> 50mm x 11.81 ppm = 590.5像素（591像素）
您将画布大小设为591像素（假设为方形），如下所示：
// //调整画布的大小以便具有足够的像素来打印50毫米图纸
c.width = 591;
c.height = 591;
第2部分：将画布导出为图片
要打印画布，您需要将画布转换为可使用 context.toDataURL 执行的图像。
//从画布创建图片
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转换图像分辨率并将转换后的图像回显给调用者的示例：
//假设您已经将导出的图像上传到服务器上的
//uploadedImage.png
<？php
$ magic =新的Imagick（）;
$ magic-> setImageUnits（imagick :: RESOLUTION_PIXELSPERINCH）;
$ im-> setImageResolution（300,300）;
$ im-> readImage（uploadedImage.png）;
$ im-> setImageFormat（png）;
header（Content-Type：image / png）;
echo $ im;
？>
最终零件：打印它！
$ b
您从服务器收到的转换后的文件将在您的300ppi打印机上打印50mm的正方形图像。
Is there a correct way to specify the size of a canvas element in for example millimeters so that if I print it out it will have the correct size?
I've tried this simple example:
<!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>
But on screen the canvas is 45mm instead of 50mm and when printed its 55mm ^^
Part 1: How many canvas pixels are required to generate a 50mm printed drawing?
Printers typically print at 300 pixels per inch.
In millimeters: 300ppi / 25.4 mm-in = 11.81 pixels per millimeter.
So if you want to print a 50mm drawing you would calculate the required pixel size like this:
50mm x 11.81ppm = 590.5 pixels (591 pixels)
And you resize the canvas to have 591 pixels (assuming square) like this:
// resize the canvas to have enough pixels to print 50mm drawing
c.width=591;
c.height=591;
Part 2: Exporting the canvas as an image
To print the canvas, you will need to convert the canvas into an image which you can do with context.toDataURL.
// create an image from the canvas
var img50mm=new Image();
img50mm.src=canvas.toDataURL();
Part 3: Convert the exported image to proper print resolution
context.toDataURL always creates an image that is 72 pixels per inch.
Printers typically print at higher resolution, maybe 300 pixels per inch.
So for the exported image to print properly on the page, the exported image must be converted from 72ppi to 300ppi.
The ImageMagick library can do the conversion: http://www.imagemagick.org/
It's a server side tool so you will have to bounce the exported image off your server (probably using AJAX to round-trip your image).
ImageMagick works in PHP, IIS and other server environments.
Here's an example which use PHP to convert the image resolution and echo the converted image back to the caller:
// 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;
?>
Final Part: Print it!
The converted file you receive back from the server will print a 50mm square image on your 300ppi printer.
这篇关于以正确的大小打印HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
