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 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!
perhaps
var image = document.getElementsByTagName("canvas")[0].toDataURL();
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
精彩评论