Photoshop Question posted in
The official user guide can be found here.

How do I save a p5.js canvas as a very large PNG? – Photoshop

I know how to save the canvas using p5.js. However I want to save the canvas as a very large png (for example 8000×8000) so that I can use it in Photoshop and scale down the image to the appropriate size. Is there a simple way of doing this besides creating a new canvas behind the scenes that is too large for the browser window?

Tags:

2

Answers


  1. 0

    You could use the createGraphics() function to create an off-screen buffer. Then you can draw it to the screen using the image() function, or you can call its save() function to store it as a file. Here’s an example:

    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"); 
}
    Login or Signup to reply.
  2. 0

    Draw everything into a pGraphics object.
    Normally you draw this “output” just as an image to the canvas.
    But if you want to export a high-res version of it, you scale it up first.

    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();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search