Save Image To A Png File Using Processing.js

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 c

Solution 1:

perhaps

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

Solution 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 workingconsole.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