Question

我对这整个画布仍然是新手，并且我遇到了一些问题，即将画布内的内容保存为图像。这是我的fiddle

＆＃13;

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);

＆＃13;

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

＆＃13;

当保存对话框显示正常时，保存的图像为空，就像它根本不捕获内容一样。

任何帮助都表示赞赏，如果它伴随着我的代码如何/为什么不起作用以及您的代码将会如何。感谢。

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

Answer 1

您需要在href内设置图片onload并使用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';。

即使在处理完之后，下载的图像也会被清空，＆＃34;像之前一样。这是因为代码的执行顺序。 link.href = canvas.toDataURL();在图片“加载”之前执行。事件触发，因此在您设置数据时，画布为空。

将该行放在img.onload函数中可确保仅在加载图像后设置链接的下载数据。这种方法很方便，因为它允许<a>标记在设置href属性后使用默认行为（例如，悬停时指针，默认情况下带下划线的文本）。
相反，在该链接中放置该行，然后点击＆＃39;事件处理程序偶然起作用，但是你丢失了上面提到的默认链接行为。

这是一个工作JS的例子，假设图像文件在服务器上：

＆＃13;

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);

＆＃13;

使用Base-64编码图像JSFiddle。

无法在<canvas>

2 个答案: