如何使用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打印畫布內容

回答

相關問題