在处理 js 时无法从 PImage 获取像素 []答案

【问题标题】：can't get pixels[] from an PImage in processing js在处理 js 时无法从 PImage 获取像素 []
【发布时间】：2013-06-11 02:16:58
【问题描述】：

我一直在尝试使用 processing.js 运行以下代码，但它只是给我一个灰色窗口。我认为这是因为它没有正确访问图像像素[]。

PImage img;


void setup() {  // this is run once.  
 size(600, 400); 
 img=loadImage("http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1");

} 
void draw() {  // this is run repeatedly.   

int dimension = (img.width*img.height);
img.loadPixels();
for (int i=0; i < dimension; i+=2) { 
  img.pixels[i] = color(0, 0, 0); 
} 
img.updatePixels();
   image(img, 0, 0);
}

代码在这里运行http://sketchpad.cc/sp/pad/view/ro.TExeW6NhoU8/rev.163

【问题讨论】：

标签： javascript image-processing pixels processing.js pixel-manipulation

【解决方案1】：

我不知道为什么它在 processing.js 上不起作用。

但是，每次调用 draw() 函数时，您都在进行图像处理（绘制黑色条纹），这似乎没有必要，而且对于浏览器来说可能过于密集。请记住，setup() 函数在草图启动时被调用一次，而 draw() 函数在草图运行时被无限循环调用（当您关闭草图时它会停止）。

所以基本上在 setup() 函数中进行一次图像处理，然后在 draw() 函数中绘制处理后的图像（你不需要，你也可以在 setup() 函数中绘制图像）。查看http://sketchpad.cc/sp/pad/view/ro.TExeW6NhoU8/rev.163 的其他示例，此代码可能会：

PImage img;

void setup() {  // this is run once.  
  size(600, 400); 
  img=loadImage("http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1");
  img.loadPixels();
  int dimension = (img.width*img.height);
  for (int i=0; i < dimension; i+=2) { 
     img.pixels[i] = color(0, 0, 0);
  } 
  img.updatePixels();
} 
void draw() {  // this is run repeatedly. It only draws the image again and again.   
  image(img, 0, 0);
}

【讨论】：

【解决方案2】：

我一直在处理这个问题。问题似乎是文档完全错误。

我所做的几乎与您在上面显示的结果相同，但事实证明这是您必须这样做的方式：

var pixels = bg.pixels.toArray();
for(var i=0;i<pixels.length;++i){
  pixels[i] = color(0);
}
bg.pixels.set(pixels);

JSFiddle

【讨论】：