無法在其中保存圖像<canvas>

Question

我對整個畫布還是陌生的，我有一個問題，那就是將畫布內的內容保存為圖像。 這是我的小提琴

 var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; var link = document.createElement('a'); link.innerHTML = 'Save'; link.href = document.getElementById('canvas').toDataURL(); link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

 <canvas id="canvas" width="300" height="300"></canvas> 

盡管保存對話框看起來很好，但是保存的圖像是空白的，就像它根本無法捕獲內容一樣。

感謝您提供任何幫助，此外，如果附有有關如何/為什么我的代碼不起作用，而您的代碼將如何起作用的幫助，則更好。 謝謝。

編輯：忘記鏈接小提琴，我從這里開始建立我的代碼。不同之處在於，小提琴將圖形保存在畫布中，而我寫的只是保存來自其他來源的靜態圖像。

Answer 1

您需要在onload內設置image href並使用img.crossOrigin = "anonymous"只是為了避免跨源錯誤。

 var img = new Image(); img.crossOrigin = "anonymous"; img.src = 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0, 300, 300); link.href = document.getElementById('canvas').toDataURL(); }; var link = document.createElement('a'); link.innerHTML = 'Save'; //link.href = document.getElementById('canvas').toDataURL(); link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

 <canvas id="canvas" width="300" height="300"></canvas> 

Answer 2

有兩個問題。

首先是圖像的原點。 在JSFiddle上，您將獲得Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

• 如另一個答案所述，對圖像進行Base64編碼，然后設置img.src = 'data:image/jpeg;base64,/...'; 解決了這個問題。
• 另一種解決方案：在本地運行Web服務器，並根據其在服務器上的位置來獲取圖像，例如img.src = './rhino.jpg'; 。

即使經過處理，下載的圖像也將像以前一樣為“空”。 這是因為代碼執行的順序。 link.href = canvas.toDataURL(); 在圖像的“加載”事件觸發之前執行，因此在設置數據時畫布為空。

• 將該行放在img.onload函數中可確保僅在加載圖像后才設置鏈接的下載數據。 這種方法很方便，因為一旦設置了href屬性（例如，將鼠標懸停在指針上，默認情況下帶下划線的文本），它允許<a>標記以默認行為運行。
• 而是在鏈接的“ click”事件處理程序內放置該行，但是您失去了上述的默認鏈接行為。

---

這是工作JS的示例，假設圖像文件在服務器上：

 var img = new Image(); img.src = './rhino.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var link = document.createElement('a'); link.innerHTML = 'Save'; img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; link.href = canvas.toDataURL(); }; link.addEventListener('click', function(e) { link.download = "imagename.png"; }, false); document.body.appendChild(link); 

還有一個JSFiddle ，使用Base-64編碼的圖像。