CODEWITHSUNDEEP
google-chromehtml5-canvasgetimagedata
Sami
Sami

Reputation: 8419

The canvas has been tainted by cross-origin data in chrome only

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D':
The canvas has been tainted by cross-origin data

I am getting above error only in chrome. My code(following) works fine in mozilla. I have not corss domain issue. So why could i get above error in chrome?

var wheel_canvas, wheel_context, can_w, can_h, wheel_grd;
var LARGE_RADIUS = 160;
var SMALL_RADIUS = 120;
var wheel_canvas = document.getElementById('wheel_canvas');
var wheel_context = wheel_canvas.getContext('2d');
var can_w = $(wheel_canvas).width();
var can_h = $(wheel_canvas).height();
var centerX = can_w / 2, centerY = can_h / 2;
var wheel_grd = null;
test('#FF0000');

function test(hex)
{
    $('#clrpicker').css({'left': 210, 'top': 210 });

    inverted = hexBW(hex);
    $('#color_val_show').val(hex);
    current_color_hex_val_selected = hex;
    $('#color_val_show').css({'color':inverted,'background':hex});

    fillGradientCirle(hex);
}

function fillGradientCirle(hex)
{
    wheel_context.rect(0, 0, can_w, can_h);
    wheel_grd = wheel_context.createLinearGradient(1, 1, 0, can_w, can_h);
    wheel_grd.addColorStop(1, '#ffffff');
    wheel_grd.addColorStop(0.5, hex);
    wheel_grd.addColorStop(0, '#000000');
    wheel_context.fillStyle = wheel_grd;
    wheel_context.beginPath();
    wheel_context.arc(centerX, centerY, LARGE_RADIUS, 0, 2 * Math.PI);
    wheel_context.fill();
}

   $(wheel_canvas).click(function (e)
    {
        $.event.fix(e);         
        x = e.pageX;
        y = e.pageY;

        can_p = $(this).offset();
        x = x - $(document).scrollLeft() - can_p.left;
        // Fixed typo
        y = y - $(document).scrollTop() - can_p.top;
        if (Math.sqrt((x - centerX) * (x - centerX) +  (y - centerY) * (y - centerY)) < SMALL_RADIUS) return; // Precaution
        $('#wheel_picker').css({ 'left': x-8 + 'px', 'top': y-8 + 'px' });
        var data = wheel_context.getImageData(x, y, 1, 1).data;
        pixelData = data;
        rgbString = 'rgb(' + pixelData[0] + ', ' + pixelData[1] + ', ' + pixelData[2] + ')';
        hex = rgb2hex(rgbString);

        inverted = hexBW(hex);
        $('#color_val_show').val(hex);
        current_color_hex_val_selected = hex;
        $('#color_val_show').css({'color':inverted,'background':hex});

        $('#feedback').html("Coordinates : " + x + "," + y + "  Color: " + hex);
    });

Upvotes: 1

Views: 3257

Answers (2)

Dan
Dan

Reputation: 2804

For testing, you can also use --allow-file-access-from-files as a command-line argument to Chrome; this will allow you to use local files.

Upvotes: 1

user1693593
user1693593

Reputation:

If this is all the code and you don't use any cross-origin images then the only error that stand out is this line:

wheel_grd = wheel_context.createLinearGradient(1, 1, 0, can_w, can_h);

This should only have four arguments not five. The last argument may trip out Chrome in some way.

Try by changing it to:

//                                             x0 y0 x1     y1
wheel_grd = wheel_context.createLinearGradient(1, 0, can_w, can_h);

Other errors you can consider looking at:

  • You are declaring the variables twice - the first var line in the example code is unnecessary
  • You are reading CSS size of canvas element, not its bitmap size (they are not the same).

To read proper dimension of canvas (unless you intended to read the CSS size for some reason) you need to use the following instead:

var can_w = wheel_canvas.width;  //$(wheel_canvas).width();
var can_h = wheel_canvas.height; //$(wheel_canvas).height();

or if you insist on using jQuery:

var can_w = $(wheel_canvas).prop('width');
var can_h = $(wheel_canvas).prop('height');

Hope this helps!

Upvotes: 2

Related Questions