Html 如何打印画布元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17009946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print a canvas element?
提问by Igal
I have a canvas element on my page. I draw an image over it and some data that the user entered. On a press of a button I want to send the canvas to printer, to print it on paper. I tried to use this plug-in: jQuery.printElement, like that:
我的页面上有一个画布元素。我在它上面绘制了一个图像和用户输入的一些数据。按下按钮后，我想将画布发送到打印机，将其打印在纸上。我尝试使用这个插件：jQuery.printElement，就像这样：
the button code:
按钮代码：
<a href="javascript:print_voucher()">PRINT</a>
'print_voucher()' function:
'print_voucher()' 函数：
function print_voucher()
{
$("#canvas_voucher").printElement();
}
canvas_voucher is the ID of my canvas element. It printed the page, but didn't print the canvas. I tried to use it like that as well:
canvas_voucher 是我的画布元素的 ID。它打印了页面，但没有打印画布。我也尝试这样使用它：
$("#canvas_voucher img").printElement();
But that didn't even start the printer.
但这甚至没有启动打印机。
So how can I do that? How can I print the content of the canvas?
那我该怎么做呢？如何打印画布的内容？
**EDIT**Here's the code that creates my canvas and tries to create an image with it:
**编辑**这是创建我的画布并尝试用它创建图像的代码：
function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
// Draw image
var img = new Image();
img.src = 'https://someurl.com/image.jpg';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
}
var voucher = canvas.toDataURL("image/png");
$("#voucher_img").attr("src", voucher);
} else {
alert('You need Safari or Firefox 1.5+ to see this.');
}
}
}
回答by markE
This will convert the canvas to a .png image URL and open it in a new browser window
这会将画布转换为 .png 图像 URL 并在新的浏览器窗口中打开它
The Print Dialog is triggered to let the user print the page.
触发打印对话框让用户打印页面。
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
Here is example code:
这是示例代码：
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="gold";
ctx.strokeStyle="blue";
ctx.lineWidth=5;
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<button id="printVoucher">Print</button>
</body>
</html>
回答by Igal
Found the problem and fixed it. Apparently it was a security issue at this line:
发现问题并修复它。显然这是这一行的安全问题：
img.src = 'https://someurl.com/image.jpg';
Once it was pointing out to a server, it was considered as a potential security threat. So I changed it to:
一旦指向服务器，就会被视为潜在的安全威胁。所以我把它改成：
img.src = 'images/image.jpg';
After that I created a function to make an image from the canvas and called it within the 'img.onload' part:
之后，我创建了一个函数来从画布制作图像并在“img.onload”部分中调用它：
...
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
draw_voucher_img();
...
function draw_voucher_img()
{
var canvas = $("#canvas_voucher")[0];
var voucher = canvas.toDataURL();
$("#voucher_img").attr("src", voucher);
}
Now it worked!
现在它起作用了！
