画布已被跨源数据本地图像污染 [英] The canvas has been tainted by cross-origin data local image

问题描述

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

This question has been asked a lot, but I just don't understand why this is happening to me.

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

Basically, I have a canvas, and an image, and when I try to do this:

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

---

我变得难看:

---

I get the unsightly:

"未捕获的DOMException:无法在'CanvasRenderingContext2D'上执行'getImageData':画布已被跨域数据污染.在HTMLImageElement.someimage.onload "

我应该提一下，我对制图，甚至对于javascript还是相当陌生.当我从文件:\\中运行它时，是否应该发生这种情况?

I should mention that I'm fairly new to pogramming, and even moreso to javascript. Should this be happening when I'm running it from file:\\?

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

I haven't found anyone having the exact same problem as me, and the explanations people got for the other questions had to do with the server the images were hosted on. But in this case it isn't hosted on a server, so I'm confused as to how it all works. Or rather, doesn't work.

推荐答案

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

For security reasons, many browsers will complain if you try to do certain things (canvas image drawing among them), if you use a file:// URL.

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

You really should serve both the page and the images from a local HTTP server in order to avoid those restrictions.

这篇关于画布已被跨源数据本地图像污染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！