10

我正在使用 html5Canvas从图像中获取颜色。为此，我在 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

11

您是通过文件系统使用它吗？如果是，则在服务器（本地主机）上运行它。

于 2013-05-06T12:01:51.837 回答
4

我知道的唯一解决方案是将要加载的图像与文件托管在同一服务器上，您无法通过画布访问和处理 Web 上所需的任何图像。

编辑：如果你愿意，你可以这样做。

于 2013-01-21T12:22:35.353 回答
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我删除了它们，我的问题得到了解决

于 2016-08-27T22:34:26.387 回答