如何截圖畫布？

或如何創建圖像，它將由圖像+空白區域組成，位於畫布上？

2013-05-28 Герай Суинов

這取決於你的框架，但基本上你可以使用canvas.toDataURL()

下面是一個完整的例子

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     // draw cloud 
     context.beginPath(); 
     context.moveTo(170, 80); 
     context.bezierCurveTo(130, 100, 130, 150, 230, 150); 
     context.bezierCurveTo(250, 180, 320, 180, 340, 150); 
     context.bezierCurveTo(420, 150, 420, 120, 390, 100); 
     context.bezierCurveTo(430, 40, 370, 30, 340, 50); 
     context.bezierCurveTo(320, 5, 250, 20, 250, 50); 
     context.bezierCurveTo(200, 5, 150, 20, 170, 80); 
     context.closePath(); 
     context.lineWidth = 5; 
     context.fillStyle = '#8ED6FF'; 
     context.fill(); 
     context.strokeStyle = '#0000ff'; 
     context.stroke(); 

     // save canvas image as data url (png format by default) 
     var dataURL = canvas.toDataURL(); 
    </script> 
    </body> 
</html>

dataUrl將包含圖片，你可以保存它，無論你想。

來源

2013-05-28 13:04:17 Cybermaxs

這取決於你想要做什麼，最簡單的方法是在你的畫布上使用toDataUrl。

canvas.toDataURL('png')

這將畫布編碼爲Base64，那麼你可以使用它下載鏈接像這樣

<a href="%dataURI%" download>download</a>

或者只是堅持它放回DOM中的圖像標籤。

然後，您可以編寫一個更後端的控制器，使用任何語言將該base64轉換爲圖像文件，如果您想將圖像的實際副本存儲下來。

來源

2013-05-28 13:06:08

如何截圖畫布？

回答

相關問題