Javascript imageData 返回 0 的数组

Question

我试图操作imageData，但我的imageData数组在加载图像并获取其像素数据后返回所有0。

有一些html元素，如滑块和文本框。请忽略这些。

有一个ImageObject数据结构，我在其中存储所有图像属性，如图像、pixelData等。

我首先加载图像，获取其像素数据，然后返回一个回调来存储ImageObject.imageData。然而，在日志中，ImageObject.data返回所有0。

ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties
function start()
{
    //load up the main canvas and ctx 
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');
    //first load up the image and then get its pixel data
    ImageObject.loadImage(function(imageData){
        ImageObject.imageData = imageData;
        ImageObject.data = ImageObject.imageData.data;
        console.log(ImageObject.data); // -> data return all 0's in the array
        for(var i = 0; i < ImageObject.data.length; i += 4) {
            var brightness = 0.34 * ImageObject.data[i] + 0.5 * ImageObject.data[i + 1] + 0.16 * ImageObject.data[i + 2];
          // red
          ImageObject.data[i] = brightness;
          // green
          ImageObject.data[i + 1] = brightness;
          // blue
          ImageObject.data[i + 2] = brightness;
      }
      ImageObject.ctx.putImageData(ImageObject.imageData,ImageObject.image.width,ImageObject.image.height);
  });
}
ImageObject.loadImage = function(callback)
{
    ImageObject.image = new Image();
    ImageObject.image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    ImageObject.image.addEventListener('load',function()
    {
        MainCtx.drawImage(ImageObject.image,0,0);
        callback(ImageObject.getImageData(ImageObject.image));
    });
}
ImageObject.getImageData = function(img)
{
    this.canvas = getCanvas(img.width,img.height);
    this.ctx = this.canvas.getContext('2d');
    return this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);
}
function getCanvas(w,h)
{
    var c = document.createElement('canvas');
    c.width = w;
    c.height = h;
    return c;
}
start();

我已经分享了下面的jsFiddle链接

jsFiddle

有人能看看我做错了什么吗？

Answer 1

您的问题是从getCanvas函数内创建的新画布中获取图像数据。您需要在现有画布上运行getImageData。

以下是console.log 的更新

console.log(MainCtx.getImageData(0, 0, MainCanvas.width, MainCanvas.height));

当您从不同的原点加载图像时，这仍然无法立即工作，因此请确保首先在本地承载图像。

Answer 2

尝试通过缓冲区将信息放入32位无符号整数数组中。

类似的东西

var img = canvas.getImageData(),
data32 = new Uint32Array(img.data.buffer);
//loop through the pixels
for(var i=0; i<data32.length, i++){
var pixel = data32[i];
//get the colors
var r = (pixel) & 0xff,
g = (pixel >> 8) & 0xff,
b = (pixel >> 16) & 0xff;
a = (pixel >> 24) & 0xff;
//put the pixels back in (no change)
data32[i] = (a << 24)
| (b << 16)
| (g << 8)
| r;
}

作者：Matt Lockyer

检索自：http://mattlockyer.github.io/iat455/workshop-1.html

Answer 3

快速答案是：

您尝试从一个新的（空的）画布中获取图像数据。

说明：

在函数getImageData中，使用一个名为getCanvas的函数设置画布。在这个函数中，您创建了一个新的画布（document.createElement('canvas');），而不是使用绘制了图像的实际画布

既然您已经将画布设置为MainCanvas，那么您应该在函数getImageData中使用它，如下所示：

this.canvas = MainCanvas;

不幸的是，由于Cross-Origin Resource Sharing policy，我无法在您的jsfiddle中工作。