Я использую canvas для написания с использованием jsp-страницы. Я могу написать любое сообщение на холсте (сообщение на холсте, которое я создал..) 
, но после этого, когда я хочу напечатать это сообщение на холсте, используя javascript print code, я не могу распечатать содержимое холста. ниже вы можете увидеть предварительный просмотр для этого. 
Я хочу напечатать сообщение на холсте, которое я создал на холсте. Пожалуйста, помогите мне решить эту проблему, любая помощь будет оценена.
Может случиться так, что ваш холст очищается при отображении диалогов — обычно это происходит в браузере Chrome.
Не имея исходного кода, чтобы попробовать, поскольку вы ничего не публиковали, я дам теоретический ответ, который вы можете попробовать, - я бы предложил два возможных решения:
Добавьте обработчик событий для resize. При срабатывании перерисовывает содержимое (это означает, что вам нужно сохранить точки и т. д., которые вы рисуете, или создать закадровый холст для хранения копии). Я столкнулся с тем, что это событие срабатывает (в Chrome), когда диалоговое окно очищает холст - если оно работает для предварительного просмотра печати, я не уверен - если нет, попробуйте следующий пункт:
Когда вы нажимаете кнопку печати, извлекайте холст как изображение и заменяйте (временно) элемент холста элементом изображения, устанавливая источник на data-uri из холста. В обработчике загрузки изображения запустите код печати:
Пример для второго пункта:
/// 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);
}
Код может показаться немного перегруженным, но ключевым моментом здесь является сохранение содержимого холста. Вместо этого вы можете поместить изображение сверху и так далее.
Судя по комментарию pc-shooter, моя проблема разрешилась..
Код 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>
herom, Preyash Desai и MazarD найдите код, описанный выше, и, пожалуйста, поддержите этот ответ, чтобы он помог и другим людям.
- person Vijay; 27.04.2015
Это сделало это для меня:
// Get URL beforehand to reduce delay between write and print
// (probably unnecessary but just being on the safe side)
let url = my_canvas.toDataURL();
// New tab to isolate canvas for printing
let win = window.open();
// 'img' element will show url as image
win.document.write("<img src='" + url + "'/>");
// Print preview shows empty page... almost as if to be called before write
//win.print();
// Magically seems to cause print to be called after write
win.setTimeout(() => win.print(), 0);
