2

I am building a web app which reads an image through the FileReader API, and then displays it on a Canvas. After that, I re-color the image by going pixel-by-pixel after making the .getImageData call on the canvas, as shown below:

// Color Image on Canvas
ctx = document.getElementById('my_canvas').getContext('2d');
var img_px = ctx.getImageData(0,0,canv_w,canv_h);
img_px = colorImage(img_px,red,green,blue);
ctx.putImageData(img_px,0,0);

colorImage() is a function I've written that changes the pixel values given a corresponding RGB color code, and it definitely does work. The above snippet of code does work when I am loading an image locally, but it does not when I try to access an image from an online server, like a public Dropbox account. Firefox is telling me it's a security issue; is there a way to get around it?

nsax91
  • 437
  • 2
  • 10
  • 18
  • Does this answer your question? [context.getImageData() operation is insecure](https://stackoverflow.com/questions/17035106/context-getimagedata-operation-is-insecure) – ggorlen Mar 19 '20 at 20:33

1 Answers1

2

I believe that this is a Cross Origin Resource Sharing CORS (security) issue.

See HTML5 Canvas getImageData and Same Origin Policy

The gist is, requests to images from external domains could inherently supply the user's authentication cookies, etc, allowing your javascript to access their potentially protected images and assets. While you can reference them, via <img>, CORS was established as a security protocol to prevent you from programmatically reading (and perhaps storing) the pixel data.

The Dropbox API supports CORS as of mid August, 2012. You may be able to accomplish what you want using their API once users properly authenticate.

https://github.com/dropbox/dropbox-js/blob/master/doc/getting_started.md

Community
  • 1
  • 1
methai
  • 8,835
  • 1
  • 22
  • 21
  • What would be the best way to get the image data then? My immediate thought is to have the user upload the image to the same server on which the web app is running and then access it that way. I feel like there would be an easier way, though that may just be wishful thinking... – nsax91 Apr 02 '13 at 04:16
  • Dropbox API could be a great way of integrating, but if this is content that you are asking the user for, asking them to upload it may be the simplest (and quickest) way forward at the current time. – methai Apr 02 '13 at 04:19
  • Can you give me a quick tutorial on how to allow images hosted on Dropbox to pass CORS -- I've read it's possible, but so far I can't get images to pass CORS. Many thanks in advance !!! – markE Apr 02 '13 at 17:58