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

Posted 2023-03-28

【中文标题】如何将 p5.js 画布保存为非常大的 PNG？

【英文标题】：How do I save a p5.js canvas as a very large PNG?

【发布时间】：2019-08-08 05:56:48

【问题描述】：

我知道如何使用 p5.js 保存画布。但是我想将画布保存为一个非常大的 png（例如 8000x8000），以便我可以在 Photoshop 中使用它并将图像缩小到适当的大小。除了在幕后创建一个对于浏览器窗口来说太大的新画布之外，还有其他简单的方法吗？

【参考方案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"); 

【参考方案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();