10

Canvas画像から色を取得するためにhtml5を使用しています。このために、私は javascript で次のコードを書きました:

http://jsfiddle.net/8dQSS/1/ (コンソールで例外を確認してください)

function getImageColor() {
    var colors = [];
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        // Draw the image in canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);

        // Get the pixel data
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        // Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha
        for (var x = 0; x < imageData.width; x++) {
            for (var y = 0; y < imageData.height; y++) {
                var index = 4 * (y * imageData.width + x);
                var r = imageData.data[index];
                var g = imageData.data[index + 1];
                var b = imageData.data[index + 2];
                var a = imageData.data[index + 3];

                colors.push("rgb(" + r + "," + g + "," + b + ")");
            }
        }
    };
    image.src = "http://www.xxxxxxxxxxxx.com/demos/assets/image.jpg";
}

上記のコードは、次の例外をスローしています。

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

この問題を解決する方法を教えてください。

4

3 に答える 3

4

私が知っている唯一の解決策は、ロードしたい画像をファイルと同じサーバーでホストすることです。キャンバスを介してWeb上で必要な画像にアクセスして処理することはできません。

編集：あなたが望むなら、あなたはこのようにすることができます。

于 2013-01-21T12:22:35.353 に答える