javascript - 使用 JavaScript 将 Canvas 转换为图像

Question

<分区>

Answer 1

你的想法是正确的，它会在非常简单的情况下起作用，例如:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);

JSFiddle

但如果您“弄脏”了 Canvas ，就会出现问题。这是通过将来自不同来源的图像绘制到 Canvas 来完成的。例如，如果您的 Canvas 托管在 www.example.com ，并且您使用来自 www.wikipedia.org 的图像，然后你的 Canvas 的 origin-clean 标志在内部设置为 false。

一旦 origin-clean 标志设置为 false，您就不能再调用 toDataURL 或 getImageData

---

从技术上讲，如果域、协议(protocol)和端口匹配，则图像具有相同的来源。

---

如果您在本地工作 (file://)，那么绘制的任何图像都会触发该标志。这使调试变得烦人，但在 Chrome 中，您可以使用标志 --allow-file-access-from-files 启动它以允许它。