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!

Just my 2 cents but unless the DB you're using is setup specifically to optimise saving large blobs then I'd stay away from saving image data in that database... if you're using MySQL then you definitely shouldn't store it in there, it will be so much slower than just saving it to the HD and storing the filename. — Rob Evans
– Rob Evans, Commented May 9, 2013 at 20:35
Related: JavaScript draw image on canvas from image data stored in database — ggorlen
– ggorlen, Commented Dec 2, 2023 at 20:46

esamatti · Accepted Answer · 2011-10-26 16:42:34Z

6

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.

edited Oct 26, 2011 at 16:42

answered Oct 26, 2011 at 16:29

esamatti

19.1k11 gold badges83 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ggorlen Over a year ago

This is pretty vague without a code example.

Collectives™ on Stack Overflow

Saving html5 Canvas as Data to mysql Database

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related