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

クロムでのみ上記のエラーが発生しています。私のコード (以下) は mozilla で正常に動作します。corss ドメインの問題はありません。では、なぜクロムで上記のエラーが発生するのでしょうか?

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);
    });
4

2 に答える 2

1

テストのために、--allow-file-access-from-filesChrome へのコマンドライン引数として使用することもできます。これにより、ローカル ファイルを使用できるようになります。

于 2015-03-23T17:43:19.053 に答える