1

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!

biquillo
  • 6,469
  • 7
  • 37
  • 40

2 Answers2

3

perhaps

var image = document.getElementsByTagName("canvas")[0].toDataURL();
Breton
  • 15,401
  • 3
  • 59
  • 76
  • @Breton : actually, i have added one image using element and drawn some lines on the image using javascript successfully.Now i want to save the modified image back to the server.In that case, shall i use your above answer to do that.. for example var image = document.getElementById("Image2").toDataURL("image/png"); – Saravanan May 28 '13 at 10:19
  • the above function returns a data uri. you can post it back to the server via an XHR request. you could even place it as the value in a form. the only caveat is you must be prepared to do the appropriate decoding server side. – Breton Jun 06 '13 at 01:05
0

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

Sabba Keynejad
  • 7,895
  • 2
  • 26
  • 22