画布已被跨源数据本地图像污染

Question

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

基本上，我有一个画布和一个图像，当我尝试这样做时：

---

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'：画布已被跨源数据污染。位于HTMLImageElement.someimage.onload ”

---

我应该提到的是，我对制图还不是很陌生，对javascript来说更是如此。从文件file：\\运行时是否应该发生这种情况？

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

Answer 1

出于安全原因，如果您使用file://URL ，则许多浏览器都会抱怨您尝试执行某些操作（其中包括画布图像绘制）。

为了避免这些限制，您实际上应该同时从本地HTTP服务器提供页面和图像。