无法在其中保存图像<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编码的图像。