0

I have the same exact problem as the user in this question. I am using this code:

function imgData(img) {
    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(img, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;
}

And it always generates this error on Chrome:

Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. Resources.js:27
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Resources.js:27

I am extremely new to JavaScript and have no idea what the issue is here. The internet seems to be at a loss today as well so I am now here. The answers to the question I referenced refer to the issue being he was trying to use images from outside sources (outside of his file system). The problem is, I'm not. I am just running the files in Chrome on my file system. The image is also in my file system and not anywhere I would think would merit a security error. Any thoughts? Am I being a moron?

Community
  • 1
  • 1
CoderTheTyler
  • 801
  • 2
  • 10
  • 26

1 Answers1

5

Are you accessing your HTML / JavaScript as files directly from your filesystem, instead of behind a webserver? If so, try the latter, most browsers will have cross-domain security issues if you ask them to grab data outside of a webserver (even if they're in your own filesystem).

colbydauph
  • 363
  • 1
  • 6
  • 1
    Seems so - "**I am just running the files in Chrome on my file system**". – Qantas 94 Heavy Oct 26 '13 at 01:58
  • 1
    If that is indeed the case, and you don't want to / can't run it behind a webserver, you can disable cross-domain security in chrome by starting it on the command line like this: chromium-browser --disable-web-security. via [This Post](http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy) – colbydauph Oct 26 '13 at 02:01
  • That solution works. Thanks! Also, could you point me in the direction of figuring out how to host/access a local webserver so I can do this kind of testing without issues? If that made sense... – CoderTheTyler Oct 26 '13 at 02:08
  • 1
    There are an infinite number of ways to setup a local webserver depending on your platform / needs. But, check out XAMPP for a quick cross-OS solution: http://www.apachefriends.org/en/xampp.html – colbydauph Oct 26 '13 at 02:11
  • Thanks! I will look into it – CoderTheTyler Oct 26 '13 at 02:21
  • @MrDoctorProfessorTyler: Until you get your server running in a compliant way, Dropbox.com hosts images in a CORS compliant way. (1) Sign up for a free dropbox.com account. (2) Temporarily put your images in the "public" folder. (3) Right-click any public image and "copy public link" for that file. (4) On the client: load your images using the crossOrigin="anonymous" property. Results: you have access to cross-domain/CORS compliant images. – markE Oct 26 '13 at 02:26