难道这段代码不能让整个图片变黑吗?

时间:2017-06-04 05:10:10

标签: javascript image image-processing p5.js

在p5.js中,我正在尝试处理个人项目的图像的每个像素,所以我想我会开始慢,只是尝试让每个像素变黑。出于某种原因,屏幕只是保持白色,我不知道为什么像素没有被更新。这是代码:

var Canvas;
var srcImg;
var defaultImg = "http://i.imgur.com/ARg0OOy.jpg";

function preload() {
srcImg = loadImage(defaultImg);
}

function setup () {
  createCanvas(srcImg.width,srcImg.height);
  noLoop();
}

function draw() {
  srcImg.loadPixels();
  for (var x = 0; x < srcImg.width; x++) {
    for (var y = 0; y < srcImg.height; y++) {
      var loc = x + y*srcImg.width;
      srcImg.pixels[loc] = color(224,29,29);
    }
  }
  console.log(loc);
  console.log(srcImg.width);
  console.log(srcImg.height);
  console.log(srcImg.width * srcImg.height);
  srcImg.updatePixels();
  //image(srcImg, 0,0,srcImg.width, srcImg.height);
}

另外,如果我取消注释最后一行,我会看到原始图片并且它在顶部被切断(并且它没有将每个像素变为黑色)。你可以亲自看看here.对于为什么会发生这种情况的任何想法?

编辑:我甚至尝试将一行像素变成鲜艳的红色,而我得到白色屏幕的原因是因为无论我将像素设置为什么颜色,它们都会变成白色... ,当我尝试将整行作为这种红色时,它停在大约1/4处,如图所示here(并且仍然是白色)。我不知道为什么会这样。

1 个答案:

答案 0 :(得分:3)

您将所有像素设为黑色,但随后您将在这些黑色像素上绘制srcImage。所以你看到的只是srcImage

尝试注释掉image(srcImg, 0,0,srcImg.width, srcImg.height);行以查看黑色像素。