无法从画布获取像素颜色

Question

我无法从画布上的像素获取颜色信息。

var canvas = document.getElementById('frame');
var context = canvas.getContext('2d');
var img = new Image();
var source = $("#image").attr("src");

img.src = source;
$(img).load(function() {
   context.drawImage(img, 0, 0);
});

var imgd = context.getImageData(0, 0, 50, 50);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log(pix[i] +", "+ pix[i+1] +", "+ pix[i+2] +", "+ pix[i+3]);
}

（所以我从页面上的另一个图像中获取src并将其绘制在画布上。哪个工作正常，我可以在画布上看到图像。）

据我所知，每次for循环运行时，此代码都应将红色，绿色，蓝色和alpha值记录到控制台中，前50X50像素。

相反，我得到的只是零。

等...

提前感谢您的帮助！

Answer 1

尝试这种方式：

$(img).load(function() {
    context.drawImage(img, 0, 0);

    var imgd = context.getImageData(0, 0, 50, 50);
    var pix = imgd.data;

    for (var i = 0, n = pix.length; i < n; i += 4) {
      console.log(pix[i] +", "+ pix[i+1] +", "+ pix[i+2] +", "+ pix[i+3]);
    }
});

在您的图像加载时，循环可能是在缓冲区迭代的情况下完成的，因此缓冲区将为空，因为图像加载是异步的。

除此之外，还有可能存在CORS限制（您需要检查控制台以查看是否存在任何安全错误）。