Google Chrome tainted canvas from local images

Question

I am trying to make a vanilla JavaScript game with the html 5 canvas element, and in order to make color-based hit boxes, I need to grab image data from certain spots on the canvas. Whenever I use getImageData(), I get this error:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

All of the images that are being displayed on the canvas are being pulled from a local file. Is there any way that I could get this working on Chrome?

I draw the images by placing html image tags on the page and using context.drawImage(*img id, x, y*);

Answer 1

将图像转换为 Base64 ，然后使用它的图像标签，这将在不更改任何安全设置的情况下解决它

Answer 2

Starting your local server might be the better approach. And Chrome stays safe.

cd path/to/files
python -m SimpleHTTPServer

Point your browser to

http://localhost:8000

original answer via @gman

Answer 3

It is CORS . You can start chrome with --allow-file-access-from-files for development purposes and later load the files from the same server the site is being hosted on, so that there is no problem. Note that this flag changes the security settings of chrome.