Question

我想使用p5.js编辑图像（或只是画布）的像素，并在文档中显示在他们的网站上：

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();
}

我只是希望能够编辑画布的像素，但它不会让我。

Here是我正在使用的codepen。

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

我在Youtube上跟随Daniel Shiffman的tutorials。

感谢任何帮助，谢谢。

Answer 1

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

为了解决这个问题，p5.js提供了preload()函数：

在setup（）之前直接调用，preload（）函数用于处理外部文件的异步加载。如果定义了预加载功能，则setup（）将等待，直到内部的任何加载调用完成。加载调用之外的任何内容都不应该在preload（loadImage，loadJSON，loadFont，loadStrings等）中。

将图片加载到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以上如果你想玩它。

loadPixels（）不能与p5.js一起使用

1 个答案: