为什么getImageData仅返回前300个像素的有效数据，后续全为0？

• canvas未设置匹配原图的尺寸属性：canvas元素默认的内置宽高为300px * 150px，你代码中创建canvas后没有手动将其width、height属性设置为和原图一致的realWidth、realHeight，绘制图片时只能填充默认尺寸的画布区域，超出画布的部分本身是空白，调用getImageData读取超出画布范围的像素时，返回值自然全部为0。
• 未等待图片异步加载完成就执行绘制：图片加载是异步操作，给img.src赋值后浏览器会在后台请求资源，你的代码没有等待加载完成就直接调用drawImage，此时画布上没有绘制完整的图片内容，也会导致读取到空像素数据。

var myImg = document.getElementById('img');
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
console.log(realWidth, realHeight);

function get_rgba_data(callback) {
  var img = new Image();
  // 图片加载完成后再执行后续操作
  img.onload = function() {
    var canvas = document.createElement("canvas");
    // 给canvas设置和原图匹配的宽高
    canvas.width = realWidth;
    canvas.height = realHeight;
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    var data = context.getImageData(0, 0, realWidth, realHeight).data;
    callback(data);
  }
  img.src = "colorful_cat.png";
}

get_rgba_data(function(imageInfo) {
  console.log("imageInfo", imageInfo);
});

• 如果使用跨域图片调试，需要给img设置crossOrigin = 'anonymous'，同时图片服务器配置允许跨域访问，否则调用getImageData会抛出跨域安全错误。
• 所有需要使用imageInfo的代码都要放在回调函数内部，避免读取到未定义的变量。

内容的提问来源于stack exchange，提问作者Andevai