1

I am trying to load an image, get the pixel values out of it and store them in an array for later use. The reason for this is that I'm coding a raycaster("fake 3d" engine), where I want to draw walls as columns on the screen with pixel values taken from a texture-image loaded before-hand.

This is the code im using now:

var imgwidth;
var imgheight;

var wallSprite1 = new Image();
wallSprite1.src = "textures/bricks_tile.gif"
if(wallSprite1.complete) findHHandWW();
else wallSprite1.onload = findHHandWW;

function findHHandWW() {
imgwidth = this.width;
imgheight = this.height;
getImageData(this);
return true;
}

function getImageData(img) {
var tempcanvas = document.createElement('canvas');
tempcanvas.height = imgwidth;
tempcanvas.width = imgheight;
var tempcontext = tempcanvas.getContext("2d");
tempcontext.drawImage(img,0,0);
wallData = tempcontext.getImageData(0, 0, imgwidth, imgheight);
}

However, this gives me the following error: Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught Error: SECURITY_ERR: DOM Exception 18

I read about it, and didn't find any real answer to my problem. I want run this locally, for now. Is it even possible? I tried using; 

image.crossOrigin = '';

but it didnt work.

Have I gone about this in the wrong way? I wonder if there's an easier way to accomplish what I want.

user1737776
  • 11
  • 4
  • Is this exactly the same url you have tried ? – Diode Oct 11 '12 at 11:51
  • How ur running ur code.. Just dbclick on open in browser..? You hav to run in any local webserver.. – Sarath Oct 11 '12 at 11:51
  • 1
    You have to install some local webserver, try using xampp or wampp – Marian Bazalik Oct 11 '12 at 11:57
  • 1
    Please try the answer to [this](http://stackoverflow.com/questions/8688600/context-getimagedata-on-localhost) SO question. Evidently the header needs to be on the response when the image is requested. My answer below is incorrect, so I am deleting it. – Asad Saeeduddin Oct 11 '12 at 13:08
  • This looks like an exact duplicate of [context.getImageData() on localhost?](http://stackoverflow.com/questions/8688600/context-getimagedata-on-localhost). OP, do you agree, or does that question not solve your problem? – apsillers Oct 11 '12 at 15:13

0 Answers0