javascript - Canvas 已被跨源数据本地镜像污染

Question

这个问题已经被问了很多，但我就是不明白为什么会发生在我身上。

基本上，我有一个 Canvas 和一个图像，当我尝试这样做时:

---

var canvas = document.getElementById('somecanvas');
var ctx = canvas.getContext('2d');
var someimage = document.createElement('img');
someimage.setAttribute('src', 'img/someimage.png');
someimage.onload = function(){
    ctx.drawImage(someimage, 0, 0, canvas.width, canvas.height);
    data = ctx.getImageData(0,0,canvas.width,canvas.height);
}

---

我觉得难看:

“未捕获的 DOMException:无法在“CanvasRenderingContext2D”上执行“getImageData”: Canvas 已被跨源数据污染。 在 HTMLImageElement.someimage.onload"

---

我应该提一下，我对程序设计还很陌生，对 javascript 更是如此。当我从文件运行它时是否会发生这种情况:\\？

我还没有发现任何人遇到与我完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但在这种情况下，它没有托管在服务器上，所以我对它的工作原理感到困惑。或者更确切地说，不起作用。

Answer 1

出于安全原因，如果您使用 file:// URL 尝试执行某些操作(其中绘制 Canvas 图像)，许多浏览器会报错。

您确实应该从本地 HTTP 服务器提供页面和图像以避免这些限制。