如何将p5.js画布保存为非常大的PNG文件？

Question

我知道如何使用p5.js保存画布。然而，我想将画布保存为非常大的png格式（例如8000x8000），以便在Photoshop中使用并将图像缩小到适当的大小。除了在幕后创建一个超出浏览器窗口太大的新画布外，还有没有简单的方法可以实现这一点？

- benwiz

Answer 1

您可以使用createGraphics()函数创建一个离屏缓冲区。然后，您可以使用image()函数将其绘制到屏幕上，或者调用它的save()函数将其存储为文件。以下是一个示例：

let pg;

function setup() {
  createCanvas(400, 400);
  pg = createGraphics(4000, 4000);
  pg.background(32);
}

function draw() {
  pg.ellipse(random(pg.width), random(pg.height), 100, 100);
  image(pg, 0, 0, width, height);
}

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

- Kevin Workman

Answer 2

将所有内容绘制到pGraphics对象中。 通常，您只需将此“输出”绘制为画布上的图像即可。 但是，如果您想要导出高分辨率版本，则首先需要将其缩放。

let scaleOutput = 1;
let output;
let canvas;

// setup
function setup() {

    // other stuff...
    output = createGraphics(1000, 640);
    canvas = createCanvas(1000, 640);

}
// the draw loop
function draw() {

    // Clear Canvas
    background(255);
    output.clear();

    // Set scale
    output.push();
    output.scale(scaleOutput);

    // Draw to your output here...

    output.pop();


    // Show on canvas
    image(output, 0, 0);
}

// Scale up graphics before exporting
function exportHighRes() {
    // HighRes Export
    scaleOutput = 5;
    output = createGraphics(scaleOutput * 1000, scaleOutput * 640);
    draw();
    save(output, "filename", 'png');

    // Reset Default
    scaleOutput = 1;
    output = createGraphics(1000, 640);
    draw();
}

// Export when key is pressed
function keyReleased() {
    if (key == 'e' || key == 'E') exportHighRes();
}

- Philipp Lehmann