+16

enable cross-origin resource sharing (CORS)

Forrest Oliphant 6 years ago • updated by Kangenwater Spray 2 years ago 10
I made this web app (Meemoo webcam to stop-motion gif) that has imgur uploading with CORS/jQuery (yay!).

Now it would be cool to enable CORS on the server so that my app could load imgur images into the html5 canvas, modify them, and make new images. The future! http://enable-cors.org/

Paste this into Meemoo's source and you'll see the security error from context.getImageData() in the console:

{"info":{"title":"no imgur cors","author":"forresto","description":"c'mon imgur"},"nodes":[{"src":"http://forresto.github.com/meemoo-modules/img2canvas.html","x":140,"y":73,"z":0,"w":330,"h":281,"state":{"dataurl":"http://i.imgur.com/Nlc35.gif"},"id":0}],"edges":[]}
i would totally love to see this as well.  i just learned about this restriction as i was trying to create a canvas tool that grabbed images from imgur.  bummer!  please .. its just one little header line, right??  Access-Control-Allow-Origin: * 

-jon
JSONP with b64-encoded data:image url could be a workaround

I would love to see this. In the mean time, I guess I have to use corsproxy then, it's not a good idea to rely on a third party service...

img.crossOrigin="Anonymous"
What if there isn't a specific image URL that you are trying to view. For instance Google Maps Streetview?