What im trying to do:
- Draw an image on my canvas
- Get the pixel data on that canvas
- for each pixel in the pixel data, if the pixel is completely white (RGB value of 255,255,255) then store it in an array so that i will end up with an array of positions on the canvas where each white pixel is
What my problem is:
On step 2 when i try to get the pixel data from the canvas, it throws me the following error:
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Details:
So i have 2 scripts: main.js and ParticleTitle.js all im doing in main.js is initialize the canvas (setting its size and what not) and then creating a ParticleTitle object and parsing the canvas context as well as how wide and high i want the image to be.
The ParticleTitle.js script looks like this:
var ParticleTitle =
{
ctx: null,
title_img: null,
width: null,
height: null,
possiblePxs: Array(),
Create: function(ctx_,w,h)
{
var obj = Object.create(this);
obj.ctx = ctx_;
obj.width = w * (obj.ctx.canvas.width);
obj.height= h * (obj.ctx.canvas.height);
obj.title_img = new Image();
obj.title_img.src = "imgres/up_arrow.png";
obj.init();
return obj;
},
init: function()
{
this.ctx.save();
this.ctx.translate(this.ctx.canvas.width/2,this.ctx.canvas.height/2);
this.ctx.drawImage(this.title_img,-this.width/2,-this.height/2,this.width,this.height);
this.ctx.restore();
var pixelData =
this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
//error thrown here
},
Update: function()
{
},
};
All the "Create" function does is: initialize the context, calculate the width and height of the image, initializes the image, and then run the init function
The init function then just draws the image on to the canvas and then after that, when i try to use the "getImageData" function i get thrown the error.
anyone know whats wrong and how i might fix it? thanks.