像素RGB值均为零

Question

我想迭代画布像素并将其颜色设为RGB，但即使画布上有图像，所有像素都有0,0,0 RGB值。

这是我的代码; （我的测试图像在jsfiddle中看不到）

http://jsfiddle.net/mwPfa/2/

for(i = 400; i < 1000; i += 4) {
      red = imageData.data[i];
      green = imageData.data[i + 1];
      blue = imageData.data[i + 2];
      alpha = imageData.data[i + 3];
      console.log(red + "," + green + "," + blue + "," + alpha);
    }

Answer 1

这很可能是因为您的画布污染并且Web浏览器安全性不允许您读取它的数据。这是因为跨域安全性：您正在从其他域加载图像或视频并在画布上绘制它们。如果没有跨域安全性，您可以例如窃取用户Facebook照片等。

Mozilla Developer Network有一篇很好的文章如何处理这个问题

• https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

但是，我的建议是尽可能从同一个域加载HTML页面和图像，以避免CORS问题。

Answer 2

工作示例 - http://jsfiddle.net/mwPfa/3/

这些是值得一提的事情：

1. window.onload - 在jsfiddle中你不需要使用它。
2. 因为CORS，如果你想在jsfiddle中加载外部域的图像，你必须使用支持它的图像并用img.crossOrigin = "Anonymous";加载 - 不是每个图像都可以在这里工作。
3. 如果要访问图像数据 - 您必须等到图像加载，因此只能在onload处理程序中绘制图像并访问数据。您不希望在加载图像之前访问画布数据...它有时会工作，但您需要稳定的代码，每次都可以使用，不是吗？
4. RGB值为0,0,0表示有效黑色，因此请确保不要测试带有黑色左上角的图像。