如何使用 javascript 打印画布内容
时间：2023-06-21
本文介绍了如何使用 javascript 打印画布内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在使用 canvas 来使用 jsp 页面进行写作.我可以在画布上写任何信息，(我创建的画布消息..)但在此之后，当我想使用 javascript print code 打印此画布消息时，我无法打印画布内容.下面你可以看到打印预览..
I am using canvas for 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 code i am not able to print canvas content. below you can see print preview for that..
我想打印我在画布上创建的画布消息.请帮我解决这个问题，任何帮助将不胜感激..
I want to print canvas message that i have created on canvas. Please help me out from this problem, any help will be appreciate..
推荐答案
根据 pc-shooter 的评论，我的问题得到了解决..
As per comment of pc-shooter my problem got sloved..
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>
这篇关于如何使用 javascript 打印画布内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }