Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting Canvas element to Image and storing in database

I want to store the Image into my Server side Database. Once the user draw using canvas and hit a Submit button , Canvas Element should be converted to image format and then I want to store that Image into my database for further use. I can use this image to verify the user next time he visits my site.

Can anyone help me to sort it out? My server code is written in Java Servlets

like image 527
suraj Avatar asked Feb 29 '12 05:02

suraj


People also ask

How do you save an HTML5 canvas as an image on a server?

Saving HTML canvas as an image is pretty easy, it can be done by just right-clicking on the canvas and save it as an image.

How do I get data from canvas?

Getting image data from a canvas We use getImageData() to extract a slice of the image, starting at (10, 20) , with a width of 80 and a height of 230 . We then draw this slice three times, positioning the slices progressively below and to the right of the last slice.

How do you utilize the canvas element?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


1 Answers

Use Canvas.toDataURL() which will return a string with a base64 encoded PNG. You can then store it as a normal text or decode and save as a file. To put it back on canvas you simply pass this string as a source for Canvas.draw(source, 0, 0) method

Fiddle for you: http://jsfiddle.net/9a7Xd/

like image 59
rezoner Avatar answered Oct 02 '22 16:10

rezoner