P5.image to base64 POSTable image

[ogoossens]

Nature of issue?

• New feature request

Most appropriate sub-area of p5.js?

• Image

New feature details:

Is there a way on how to convert P5.image object into base64 png image object?

I would like to:

• extract a canvas part (crop) and post it per ajax (base 64)
• get() would be great for this, but that returns P5.image and I dont know how to convert and post it

Note:
If I wanted to post my whole canvas (already solved) I simply grab the canvas contents with canvas.toDataURL() and use that - but since cropped result is what I need - this isnt the way.

Thank you

Oliver

[lmccart]

something like this should work:

var img;

function setup() { 
  img = loadImage("cat.jpg");
} 

function mousePressed() {
  img.loadPixels();
  console.log( img.canvas.toDataURL() );
 
}

[ogoossens]

Worked like a charm - thank you.

@lmccart - Lauren, a question: Do you think it would be helpful to propose and create some functions for beginners to get() the canvas encoded images - or parts of it (with get()) in case they would like to upload them somewhere per POST?

Like lets say - upload sketches by users to a server?

I just did it for one project and it wasn't easy for me to figure everything out.. What do you think?

Anyway big thank you :)

[cledesma]

This is nowhere in the documentation. Thanks for this.

[nikensss]

something like this should work:

var img;

function setup() { 
  img = loadImage("cat.jpg");
} 

function mousePressed() {
  img.loadPixels();
  console.log( img.canvas.toDataURL() );
 
}

Is it possible to add the canvas property to the p5.Image type in the typings for TypeScript? I currenly need this feature and I have to do the following:

const { canvas } = p5.get() as unknown as {
  canvas: HTMLCanvasElement;
}

which feels very hacky...