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
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With