使用p5.js仅保存画布的特定区域

Question

我想知道是否可以使用P5.js将画布的指定区域裁剪/保存到本地jpg / png文件。我知道save()函数。但是，据我所知，它只保存画布的整体。有什么想法吗？

谢谢！

Answer 1

您可以这样做：

• 调用get()函数以获取特定区域的像素值
• 使用createGraphics()函数创建缓冲区
• 在该缓冲对象上调用set()并传入您创建的像素数组
• 调用save()并将该缓冲对象作为第一个参数传递

这是一个简单的例子：

let pg;

function setup() {
  createCanvas(100, 100);
  pg = createGraphics(50, 50);
}

function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width / 2, pg.height / 2, 25, 25);
  image(pg, 25, 25);

}

function mousePressed(){
    save(pg, "test.png");
}

更多信息可以在the reference中找到。