如何使用javascript打印画布内容

我正在使用canvas来使用jsp页面进行书写目的。我可以在画布上写任何信息，（我创建的画布信息） enter image description here 但是在此之后，当我想使用javascript print code打印此画布消息时，我无法打印画布内容。下面你可以看到打印预览.. 如何使用javascript打印画布内容

我想打印画布上的信息，请帮我解决这个问题，任何帮助都将不胜感激。

来源

2014-02-06 Vijay

如果我测试这个上http://pc-shooter.ch/test.html，它的工作原理！请提供更多信息 –

我对类似问题的回答是[over here]（http://stackoverflow.com/questions/24691593/how-to-print-canvas-element-by-using-javascript-print-method/ 42042130＃42042130）。 – strayblues

按照得到sloved 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%">&nbsp;</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%">&nbsp;</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">&nbsp;</td> 
      <td style="width: 100px"><input type="button" value="save" id="btn" size="30" onclick="save()" style=""></td> 
      <td style="width: 10px">&nbsp;</td> 
      <td style="width: 100px"><input type="button" value="clear" id="clr" size="23" onclick="erase()" style=""></td> 
      <td style="width: 10px">&nbsp;</td> 
      <td style="width: 100px"><input type="button" value="print" id="prnt" size="23" onclick="window.print()" style=""></td> 
      <td style="width: 55px">&nbsp;</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>

来源

2014-02-08 04:55:07 Vijay

什么解决了你的问题？链接的死亡... :( – herom

链接不工作。如果你可以共享解决方案将是伟大的... – daehaai

死链接。这就是为什么你总是应该在这里发布完整的解决方案 – MazarD

当对话框显示时，您的画布会被清除 - 这种情况通常发生在Chrome浏览器中。

而不必源代码与你没有张贴任何尝试，我会做一个理论上的答案，你可以尝试一下 - 我建议两个可能的解决方案：

添加事件处理程序resize。当触发重绘内容时（这意味着您需要存储您绘制的点等或制作一个屏幕画布以存储副本）。我曾经遇到过，当一个对话框清除了画布时，此事件触发（在Chrome中） - 如果它适用于打印预览，我不确定 - 如果不尝试下一点：
当您单击打印按钮时，画布作为图像，并用图像元素替换（临时）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); 
}

的代码可能看起来有点超负荷，但这里的关键点是要维护的内容帆布。您可以将图像放在顶部，等等。

来源

2014-02-06 08:52:09 K3N

如何使用javascript打印画布内容

回答

相关问题