我知道如何使用p5.js保存画布。然而,我想将画布保存为非常大的png格式(例如8000x8000),以便在Photoshop中使用并将图像缩小到适当的大小。除了在幕后创建一个超出浏览器窗口太大的新画布外,还有没有简单的方法可以实现这一点?
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");
}
将所有内容绘制到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();
}