Converting Canvas element to Image and storing in database

Question

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

Orography

Answer 1

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/

Semple

Answer 2

Canvas.draw(source, 0, 0) of the solution did not work anymore at the time of writing. Below is a solution that works:

function canvasDraw(canvasCtx, base64Img) {
    let image = new Image();
    image.onload = function() {
        canvasCtx.drawImage(image, 0, 0);
    };
    image.src = base64Img;  
}

where canvasCtx is canvas context:

let ctx = canvas.getContext('2d');

Georganngeorge