如何使用 javascript 打印画布内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21595413/
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 canvas content using javascript
提问by Vijay
I am using canvasfor writing purpose using jsp page. I am able to write any message on canvas,
(canvas message i have created..)
but after this when i want to print this canvas message using javascript print codei am not able to print canvas content. below you can see print preview for that..
我canvas使用jsp页面用于写作目的。我可以在画布上写任何消息（我创建的画布消息..）
但是在此之后，当我想使用javascript print code我无法打印画布内容打印此画布消息时。下面你可以看到打印预览..
I want to print canvas message that i have created on canvas. Please help me out from this problem, any help will be appreciate..
我想打印我在画布上创建的画布消息。请帮我解决这个问题，任何帮助将不胜感激..
采纳答案by Vijay
As per comment of pc-shootermy problem got sloved..
根据pc-shooter我的问题的评论得到了解决..
Jsp Page Code :
Jsp页面代码：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//alert('ready');
var w = window.innerWidth;
var h = window.innerHeight;
//alert('w '+w+' h '+h);
//alert('ready end');
} );
</script>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
//alert('init start');
w = window.innerWidth - 50;
h = window.innerHeight - 100;
//alert('canvas 1 w '+w+' h '+h);
document.getElementById('can').width=w;
document.getElementById('can').height=h;
//document.getElementById('can').setAttribute("style","width:900px");
canvas = document.getElementById('can');
w = canvas.width;
h = canvas.height;
//alert('canvas 2 w '+w+' h '+h);
ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
// alert('init end');
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear..?");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
document.getElementById("imageDownload").href = dataURL;
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
</head><body onload="init()">
<div style="" >
<canvas id="can" style="border:2px solid;cursor: pointer;"></canvas>
</div>
<div style="height: auto;width: 810px;">
<table style="width: 200px;border: 1px solid black; float: left;" >
<tr><td></td><td colspan="7">Choose Color</td></tr>
<tr>
<td style="width: 12.5%"> </td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div></td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div></td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div></td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div></td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div></td>
<td style="width: 12.5%"><div style="width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div></td>
<td style="width: 12.5%"> </td>
</tr>
</table>
<table style="margin-left:10px; width: 50px;border: 1px solid black;float: left;" >
<tr><td>Eraser</td></tr>
<tr>
<td><div style="width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div></td>
</tr>
</table>
<table style="width: 300px;border:0; float: left;margin-left: 25px;" >
<tr><td></td><td colspan="7"></td></tr>
<tr>
<td style="width: 25px"> </td>
<td style="width: 100px"><input type="button" value="save" id="btn" size="30" onclick="save()" style=""></td>
<td style="width: 10px"> </td>
<td style="width: 100px"><input type="button" value="clear" id="clr" size="23" onclick="erase()" style=""></td>
<td style="width: 10px"> </td>
<td style="width: 100px"><input type="button" value="print" id="prnt" size="23" onclick="window.print()" style=""></td>
<td style="width: 55px"> </td>
</tr>
</table>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
<script type="text/javascript">
// Send the canvas image to the server.
$(function() {
$("#btnSave").click(function() {
var image = document.getElementById("can").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'CanvasSave.jsp',
data:{'imageData':image},
dataType : 'json',
accepts: {json: 'application/json'},
success: function(msg) { alert('4');
alert('Image saved successfully !');
}
});
});
});
</script>
</div>
<br /><br />
<div style="height: auto;width: 810px;">
<a href="#" download="ImageName" title="ImageName" id="imageDownload">
<img id="canvasimg" style="top:20px;">
</a>
</div>
</body></html>
回答by Vijay
It can happen that your canvas is cleared when dialogs show - this happens typically in the Chrome browser.
当对话框显示时，您的画布可能会被清除 - 这通常发生在 Chrome 浏览器中。
Without having source code to try with as you didn't post any I'll make a theoretic answer that you can try out - I would suggest two possible solutions:
没有源代码可以尝试，因为你没有发布任何我会做出一个理论上的答案，你可以尝试 - 我会建议两种可能的解决方案：
Add an event handler for
resize. When triggered redraw the content (which means you need to store the points etc. that you draw or make an off-screen canvas to store a copy). I have experienced that this event triggers (in Chrome) when a dialog has cleared the canvas - if it works for print preview I am not sure - if not try next point:When you click your print button, extract the canvas as an image and replace (temporary) the canvas element with an image element setting the source to the data-uri from canvas. On the image's onload handler trigger the print code:
添加一个事件处理程序
resize。当触发重绘内容时（这意味着您需要存储您绘制的点等或制作屏幕外画布来存储副本）。我经历过当对话框清除画布时会触发此事件（在 Chrome 中） - 如果它适用于打印预览我不确定 - 如果不尝试下一点：当您单击打印按钮时，将画布提取为图像并用图像元素替换（临时）画布元素，将源设置为画布中的数据 uri。在图像的 onload 处理程序上触发打印代码：
Example for second point:
第二点的例子：
/// create a reference to canvas element
var canvas = document.getElementById('myCanvas');
printBtn.addEventListener('click' function() {
/// remove it from DOM (use parent element if any, for demo I use body)
document.body.removeChild(canvas);
var img = new Image;
img.id = 'tempPrintImage'; /// give an id so we can remove it in next step
img.onload = print; /// onload handler triggers your print method
img.src = canvas.toDataURL(); /// set canvas image as source
document.body.appendChild(img);
}, false);
function print() {
...your print code here. On return reverse the elements: ...
var img = document.getElementById('tempPrintImage');
document.body.removeChild(img);
document.body.appendChild(canvas);
}
The code may seem a bit over-loaded but the key point here is to preserve the content of the canvas. You can place the image on top instead and so forth.
代码可能看起来有点过载，但这里的关键点是保留画布的内容。您可以将图像放在顶部等等。
