javascript - loadPixels() 不适用于 p5.js

Question

我想使用 p5.js 编辑图像(或只是 Canvas )的像素，它显示在他们网站的文档中:

var img;
function preload() {
  img = loadImage("assets/rockies.jpg");
}

function setup() {
  image(img, 0, 0);
  var d = pixelDensity();
  var halfImage = 4 * (img.width * d) *
      (img.height/2 * d);
  loadPixels();
  for (var i = 0; i < halfImage; i++) {
    pixels[i+halfImage] = pixels[i];
  }
  updatePixels();
}

所以我在 codepen 中尝试了该代码，并正确链接了 p5.js，但它不起作用(当然是用我自己的图像)。

我在Processing IDE本身中制作了一个版本并且它可以工作，所以我尝试将它转换为JS，但我不明白为什么它不工作？

var img;

function setup() {
  createCanvas(500, 400);
  img = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/379903/image.png");  // Load the image

}

function draw() {
  background(255);

  image(img, 0, 0, 500, 400);



  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
        pixels[i] = color(255, i, 0);
  }

  updatePixels();
}

我只想能够编辑 Canvas 的像素，但它不允许我。

Here是我正在使用的codepen。

图像加载正常，但我无法编辑像素？

我正在关注 Daniel Shiffman 的 tutorials在 YouTube 上。

感谢任何帮助，谢谢。

Answer 1

图像加载需要几秒钟。 setup() 函数和第一次调用 draw() 函数在几毫秒内完成。 当您尝试绘制图像时，图像尚未加载完毕。这就是您得到空白 Canvas 的原因。

为了解决这个问题，p5.js 提供了 preload()功能:

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc).

在 preload() 中加载图像，而不是在 setup() 函数中:

var img;

function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw(){
  image(img, 0, 0, 500, 400);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

我不太确定你想用像素做什么，因为你的代码的其余部分没有多大意义。考虑一下您的 i 变量是什么以及 color(255, i, 0) 应该返回什么。但希望该代码只是一个占位符，您现在可以继续加载图像了。

您可能想阅读 pixels[]大批。下面是一个显示图像的示例，但每个像素强度减半:

var img;
    
function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw() {
  background(0);
  image(img, 0, 0, 500, 400);
  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
    pixels[i] = pixels[i]/2;
  }
  updatePixels();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

Here is a CodePen如果你想尝试一下上面的内容。