Javascript grayscale script for images hosted in the cloud

问题

I am wondering if there is a way to make an image grayscale/b&w client side using javascript when the files are hosted on, say, AWS s3 or something. I have found this nice little script: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

But when you try to apply this to images that are not hosted on the same domain, you get a Security Error because you're performing cross-site operations. The exact error (from Chrome) is:

Uncaught Error: SECURITY_ERR: DOM Exception 18

In particular I was hoping there was a way I could download the image into a byte array and then modify it pixel-by-pixel, similar to how the aforementioned script works.

Note: I am not interested in creating separate images on the server side, as I'm dealing with tens of thousands of images and would like this feature to work on the fly.

回答1:

This seems to be a chrome thing: http://code.google.com/p/chromium/issues/detail?id=49150

Try uploading your test HTML to a host and see if the problem stop

回答2:

To load canvas images across domains, you might want to look at that: http://www.maxnov.com/getimagedata/

来源：https://stackoverflow.com/questions/6066365/javascript-grayscale-script-for-images-hosted-in-the-cloud