context.getImageData() on localhost?

Question

I have the following snippet of code and I'm trying to run it from localhost (OSX, running XAMPP):

var canvas = document.getElementById('mycanvas');
    var cx = canvas.getContext('2d');

    var myImg = new Image();
    myImg.src = 'images/lion.jpg';

    $(myImg).load(function() {
        cx.drawImage(myImg, 0, 0);
        var imgData = cx.getImageData(0,0,150,150);
    });

But when I run it I get this error from the console:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18

I found some similar questions here and I know that this has something to do with the fact that I'm working locally and this wouldn't happen if I was trying to access the image from the same domain. I don't know if this makes sense, but it's what I understood.

My question is, how can I make this work in a local dev environment?

clowwindy · Accepted Answer · 2013-05-02T08:23:45.573

23

Serve your html with an HTTP server, for example, Apache or Nginx.

Mac OSX comes with Python installed, so you can simply start an HTTP server by opening a terminal, then input:

cd /path/to/my/work/
python -m SimpleHTTPServer

Then open http://localhost:8000/ in your browser. This should work.

edited May 02 '13 at 08:23

answered Dec 31 '11 at 14:27

clowwindy

1,020
8
12

2

Not always possible. How can this be worked around in the situations we are in where we're putting a site on a CD to be run locally on a target machine via Autorun.inf and therefore cannot set up a server or rely on one (or any network access) being available? Works a charm in all other browsers but in Chrome console says: "Kinetic warning: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. " Sad times – Rob McCardle Jan 16 '14 at 01:39

score 1 · Answer 2 · answered Aug 27 '12 at 18:39

1

Trying a different browser might help. This happened to me on Chromium and just by switching to Firefox I was able to continue debugging locally.

answered Aug 27 '12 at 18:39

cangrejo

2,189
3
24
31

score 0 · Answer 3 · edited May 23 '17 at 12:02

I ended up using a combo of solutions (see this other problem)

Steps:

Transform the image to base64 string.
Assign that as the src of the Image js object.
Draw on canvas

Code:

// helper to transform to base64
// see other question for more help
function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
}

var canvas        = document.querySelector("canvas");
var ctx           = canvas.getContext("2d");
var png           = new Image();
var backgroundSrc = ".....";

png.onload = function () {
  ctx.drawImage(png, 0, 0);
};

toDataUrl(backgroundSrc, function(base64Img) {
  png.src = base64Img;
});

I know this solution is NOT optimal, but it worked for me AND it helps when the image does not come from the same origin.

I'm posting this for anyone that encounters the same problem.

context.getImageData() on localhost?

3 Answers3

Linked

Related