Using Canvas to tint an image. Working in IE but not Chrome

Question

function tintshift(ImgElement)
{
    var canvas = document.createElement("canvas");
    canvas.width = ImgElement.width;
    canvas.height = ImgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(ImgElement,0,0);

    var im = ctx.getImageData(0,0,2600,1600);
    var data = im.data;

    for(var i = 0, len = data.length; i < len; i+=4)
    {
        data[i] = 255;
        data[i+1] = 0;
        data[i+2] = 0;
    }

    ctx.putImageData(im,0,0);

    ImgElement.src = canvas.toDataURL();
}

This code is meant to take the image data and shift the hue to a different color, then replace the image with the newly colorized version. It works fine in Internet Explorer, however in chrome it hangs up on the "getImageData" method. I tested around with some alert calls, and nothing after that method will run.

Following somewhat this example http://jsfiddle.net/pHwmL/1/

Thanks. I do have the function tied to onload via some code in the button that calls tintshift. I also made sure to correct those width and height properties. — Kyle R, Jun 08 '16 at 15:51
The console is spitting out this: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. — Kyle R, Jun 08 '16 at 15:53

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

context.getImageData() on localhost?

Realized this is a security problem with Chrome and having the images on my local machine. Served the page using Apache.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 08 '16 at 16:07

Kyle R

99
2
12

Using Canvas to tint an image. Working in IE but not Chrome

1 Answers1