如何將畫布轉換爲圖像？

我整個頁面轉換成畫布，現在我想將其轉換成我可以下載圖片：如何將畫布轉換爲圖像？

html2canvas(document.body, { 
    allowTaint: true, 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas).setAttribute("id", "canvas"); 
     var canvas = document.getElementById("canvas"); 
     var img = canvas.toDataURL("image/png"); 
     img.setAttribute('crossOrigin', 'anonymous'); 
     document.write('<img src="'+img+'"/>'); 
    } 
    });

這工作，但我在控制檯收到此錯誤，圖像不創建

未捕獲（承諾中）DOMException：無法執行'toDataURL' 'HTMLCanvasElement'：受感染的畫布可能無法導出。

來源

2017-04-13 downFast

base64對圖像數據進行編碼 - >'img' –

@EricSo您能否詳細說明一下基於上述代碼的答案？ – downFast

我想你試圖通過'html2canvas'庫來捕獲當前屏幕，然後把它放在一個圖片標籤中嗎？因爲瀏覽器將捕獲的圖像定義爲本地域。出於安全原因，瀏覽器不允許使用'toDataURL' API來導出圖像。 –

試試這個：

<a id="download" 
    onclick="var download = document.getElementById('download'); 
    download.href = document.getElementById('canvasElementId').toDataURL(); 
    download.download='imageName.png'"> 
Save Canvas Image</a>

你有所有多餘的東西，你並不需要，它會產生你所要做的通過右擊並節省額外的工序的圖像。這樣更容易，效果更好。

如果它有一個錯誤說明「受污染的畫布無法導出」，那麼如果它不起作用，並且您可以使用應用程序，則可以清除污點。

來源

2017-04-13 01:47:13

未捕獲的DOMException：未能在'HTMLCanvasElement'上執行'toDataURL'：受污染的畫布可能無法導出。 – downFast

如何將畫布轉換爲圖像？

回答

相關問題