無法從畫布獲取圖像數據，因為畫布已被跨源數據污染

Question

我使用html5 Canvas從圖像中獲取顏色。 為此，我在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 

誰能告訴我如何解決這個問題？

Answer 1

你是通過文件系統使用它嗎？ 如果是，則在服務器（localhost）上運行它。

Answer 2

我所知道的唯一解決方案是將要加載的圖像托管在與文件相同的服務器上，您無法通過畫布訪問和處理Web上的任何圖像。

編輯：如果你願意，你可以做到這樣 。

Answer 3

我得到了同樣的錯誤。 我在畫布上搜索了很多關於crossorigin內容。 第一個解決方案是添加img.crossOrigin='anonymous' 。 但問題仍然存在。 我正在使用s3提供的資產，並修復了在存儲桶策略中添加此問題的問題。

{
  "Version": "2008-10-17",
  "Statement": [
     {
       "Sid": "AllowPublicRead",
       "Effect": "Allow",
       "Principal": {
         "AWS": "*"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::seu-candidato/*"
     }
  ]
}

來自桶的資產有一些像X-Amz-Expires ， X-Amz-Date我刪除它們的問題，我的問題已經解決了