Saving html5 Canvas as data to mysql database

Question

It may not be possible, it would be really perfect for my situation. I use html5 canvas as a slide show, which the user can draw and save on his local machine.

My goal is to store this in our database in some other way.

What I want:

The canvas loads the slide, and then the user can draw it. As soon as they click "Save", it saves the line data in the cell of our database. When the user goes back to see the slide, it displays the original slide with annotations, and then pulls it over.

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

Here is my download code:

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 the 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:

• Save function / save function for rows created as data in a database
• Code for loading data and displaying it on the canvas, as it was created earlier.

I'm not sure that this is possible, but it would be great and cheerful! Thanks!

Answer 1

By default, a transparent canvas is transparent, so you can easily place it on top of other images and draw on it.

Use canvas.toDataURL () to get baseng png png canvas. You can save this in your database. You can send data to the server using a regular post request. You can then restore it by extracting data from db and setting it as the src of the Image element and writing the image back to the canvas using drawImage in the context of canvas 2d.

Or you can record every stock that users draw and save to the database. When loading a page, you can simply redraw the strokes.

Answer 2

Although it is aimed at capturing signatures, I am sure that the Thomas J Bradley Signature Pad project will have useful information and code samples for saving and regenerating captured drawings.