如何使用javascript打印canvas内容

我使用jsp页面使用canvas进行写作。 我可以在canvas上写任何消息，（我创建的canvas消息……） 但在此之后，当我想使用javascript print code打印此canvas消息时，我无法打印canvas内容。 下面你可以看到那个打印预览..

我想打印我在canvas上创建的canvas消息。 请帮助我解决这个问题，任何帮助都将不胜感激..

Answer 1

当对话框显示时，您的canvas可能会被清除 – 这通常发生在Chrome浏览器中。

没有源代码可以尝试，因为你没有发布任何我会做出你可以尝试的理论答案 – 我会建议两个可能的解决方案：

1. 为resize添加事件处理程序。 触发时重绘内容（这意味着您需要存储您绘制的点等，或者制作一个离屏canvas来存储副本）。 我已经体验到，当对话框清除了canvas时，此事件会触发（在Chrome中） – 如果它适用于打印预览我不确定 – 如果没有尝试下一点：

2. 单击打印按钮时，将canvas作为图像提取，并使用图像元素替换（临时）canvas元素，将源设置为canvas中的data-uri。 在图像的onload处理程序上触发打印代码：

第二点的例子：

 /// 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); } 

代码可能看起来有点过载但这里的关键点是保留canvas的内容。 您可以将图像放在顶部而不是等等。

Answer 2

根据pc-shooter评论我的问题解决了..

Jsp页码：

      
  
 
 
 
Choose Color
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Eraser