save image to a png file using processing.js

Question

I have an small drawing application made in processing.js. I would like to save the image made using the application to a server using a php file (no problem on this). I know the canvas element has a method to get that content, canvas.toDataURL() but I dont know how to do the same with processing.js

Any hint?

Cheers!

Answer 1

perhaps

var image = document.getElementsByTagName("canvas")[0].toDataURL();

Answer 2

So when you use saveFrame() in processing.js. The image opens in a new window and i found it hard to intercept the data. The soultion is to get the image from the canvas in javascript.

// this grabs the canvas and turns it into a base64 image    
var image = document.getElementsByTagName("canvas")[0].toDataURL();

// Log the data to the canvas to check it working
console.log(image);

// then you can place the image on your web page    
document.getElementById("theImage").src=image;

Then the html is easy. Just add

<img id="theImage"></img> 

If you want to upload the image to a server you can acsess the data in js with.

image

Note that you can also use style display:none; and have the canvas render image for you without the canvas displaying. It also supports transparent pngs and the canvas by default is transparent