javascript - getImageData() 返回全 0

Question

这个问题已经有答案了:

Create Canvas element with image and append to parent (2 个回答)

已关闭 8 年前。

所以，我有一个这样的函数:

var getRGBArray = function (img) {
    // create the canvas we need to work with 
    var canvas = document.createElement('canvas');

    // get the canvas context
    var context = canvas.getContext("2d");

    // will store the image data and the returned array
    var imgData, rgbArray = [];

    // make sure that the width and height are correct
    context.canvas.width = img.naturalWidth;
    context.canvas.height = img.naturalHeight;

    // draw the image
    context.drawImage(img, img.naturalWidth, img.naturalHeight);

    // get the image data 
    imgData = context.getImageData(0, 0, img.naturalWidth, img.naturalHeight);

    // imgData contains r,g,b,alpha values. We skip
    // the alpha value. 
    for (var i = 0, n = 0; i < imgData.data.length; i+=4, n+=3) {
        rgbArray[n] = imgData.data[i];
        rgbArray[n+1] = imgData.data[i+1];
        rgbArray[n+2] = imgData.data[i+2];

        // imgData.data[i+3] is the alpha channel. We ignore it. 
    }
    return rgbArray;
};

它只是应该拍摄图像并返回一个设置为 [r0, g0, b0, r1, g1, b1, ..., rn, gn, bn] 的数组。

首先，返回的数组完全是空的，这显然是有问题的。

其次，当我将所有这些内容输入到 Firefox 的控制台窗口中时，imgData数组的长度是合理的，但是所有数据都是0!所有值都没有未定义，并且我正在调试一个简单的网页。网页已经加载了图像，我只是使用 document.getElementById('testImage') 获取图像.

有人可以向我解释一下为什么会发生这种情况吗？

编辑:这与 this 不同因为我想知道为什么drawImage()给我返回一个全为 0 的数据数组。他们在问完全不同的事情。

Answer 1

我发现了这个问题。在 context.drawImage() 中，我没有传递起始位置。解决方法是将其更改为:context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight)。感谢您的帮助!