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 是我正在使用的代码笔。

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

我在 Youtube 上关注 Daniel Shiffman 的 tutorials。

感谢任何帮助，谢谢。

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) 应该是什么 return。但希望该代码只是一个占位符，现在您可以继续加载图像了。

您可能想阅读 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 以上如果你想玩的话。

loadPixels() 不适用于 p5.js

loadPixels() not working with p5.js

javascript

processing

canvas

p5.js