Saving html5 Canvas as Data to mysql Database

Question

This might not be possible, it would just be really Ideal for my situation. I'm using an html5 canvas as a slide presenter which the user can draw on and save onto their local machine.

My goal is to instead save this to our database in a some what different way.

What I want to happen:

The canvas loads up the slide and the user then can draw on it. Once they hit save, it saves the data of the lines to a cell in our database. When the user logs back into to see the slide it displays the original slide with the annotations then pulled on top of it.

Using this method I will not have to store thousands of Images for each unique person and they will have the ability to erase past annotations without erasing the original slide.

Here is my code for uploading:

Canvas:

<input type="button" id="savepngbtn" value="Save Slide">

<!-- Main Canvas / Main Slide -->
 <div id="main"><canvas id="drop1" class="drop" style=" background-repeat:no-repeat;" width="680" height="510"></canvas></div>

Pulling Original Image:

var img = new Image();
img.src = 'pdf_images/pdf-save-0.png';
img.onload = function() {
    oCtx.drawImage(img, 0, 0)
}

What I need:

• The save feature/function to save the lines created as data to the database
• The code to upload data and display it on the canvas as it was created before.

I'm not sure if any of this is possible but man it would be really nice and a life saver! Thanks!

Answer 1

Canvas is transparent by default so you can put it easily on top of other images and draw on it.

Use canvas.toDataURL() to get base64 encoded png of the canvas. You can save that into your database. You can send the data to the server by using normal post-request. Then you can restore it by retrieving the data from you db and setting it as src of an Image element and writing the image back to the canvas using drawImage on canvas 2d context.

Or you can record every stoke that users draws and save those in database. When loading the page you can just redraw the strokes.