javascript - 无法在 中保存图像

Question

我对整个 Canvas 的东西还是陌生的，我遇到了一些问题，即将 Canvas 内的内容保存为图像。这是我的 fiddle

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>
    

虽然保存对话框显示正常，但保存的图像是空的，就像它根本没有捕获内容一样。

我们将不胜感激任何帮助，如果它伴随着我的代码如何/为什么不起作用而您的代码会起作用，我们将不胜感激。谢谢。

编辑:忘记链接我的代码来自 here 的 fiddle 不同之处在于，fiddle 将绘图保存在 Canvas 中，而我写的只是从另一个来源保存静态图像。

Answer 1

您需要在 onload 中设置图像 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>