Save an HTML5 canvas image to a database

Question

How can I save a canvas image to a database?

I have a signature pad with a save button which opens a new window and displays the image when clicked. I would like to change the behavior of the button so that it saves the image to a database in order to be displayed later.

I'm having trouble getting the Data URL to send to the next page where I can process it to be inserted to the database.

I'm using phpMyAdmin.

Here's the index.html file:

<body onselectstart="return false"> 

  <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body" >
      <canvas>
        
      </canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button type="button" class="button clear" data-action="clear">Clear</button>
      <button type="button" class="button save" data-action="save">Save</button>
    </div>
  </div>

  <script src="js/signature_pad.js"></script>
  <script src="js/app.js"></script>
</body>`

And here is app.js:

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        window.open(signaturePad.toDataURL());
    }
});

Here is a JSfiddle

i'm sorry. but that's the problem i dont know how to start it. i just started learning javascript. — Vincent Dapiton, Dec 07 '16 at 17:29
Saving to a database is (usually) done on the server, so it's unrelated to JavaScript and requires some code on the server side. If you're new to JavaScript, I'd recommend trying something simpler, as SO is not a good place to ask a question like this. — fstanis, Dec 07 '16 at 17:33
@ftanis what if i change `window.open(signaturePad.toDataURL());` to `window.open("newpage.php?image="signaturePad.toDataURL());` and use `$_GET[`image`]` and insert it to database do you think it will work? — Vincent Dapiton, Dec 07 '16 at 17:36
In theory, yes, but with several caveats (most notably, there's a limit on the size of the GET request, so I'd urge you to use [POST](http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit) instead). However, this will still need to be stored in the database via PHP, which is beyond the scope of JavaScript. — fstanis, Dec 07 '16 at 17:42
@fstanis yeah ur right . i just tried it and error in length. and don't worry im using php too. i will USE the `INSERT`. and can you help me how to use method post from my codes their?. — Vincent Dapiton, Dec 07 '16 at 17:47
i just want to successfully set the dataurl into a variable to other page where in i can process it and insert it to database — Vincent Dapiton, Dec 07 '16 at 17:48
Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Dec 07 '16 at 17:54
@MikeMcCaughan thanks for the advise and i have edited my post. if that helps in understanding my problem. — Vincent Dapiton, Dec 07 '16 at 18:10
Frankly I can't get past the fact that you write in txtspk and incorrectly capitalize things. Your post is just too broad right now. An answer would need to explain how to post file content to PHP, how to consume file content in PHP, how to connect to a database in PHP, and how to insert a row into a database in PHP. That's tutorial-level code, which can be found elsewhere on the internet. Stack Overflow just isn't meant for answers that large and complex. — Heretic Monkey, Dec 07 '16 at 18:14
@MikeMcCaughan sorry for the bad POST. just can't make a very good sentence to it. coz at first a didn't understand what i really need to do. — Vincent Dapiton, Dec 07 '16 at 18:19

score 1 · Answer 1 · answered Dec 07 '16 at 18:16

Just found an answer to this. and i think i should put the answer. other people might have the same problem.

to send DataURL to the next page . i just change my code

from

    saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        window.open(signaturePad.toDataURL());
    }
});

to

saveButton.addEventListener("click", function post (event) {

    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        document.body.innerHTML += '<form id="form" action="newpage.php" method="post"><input type="hidden" name="image" value="'+signaturePad.toDataURL()+'"></form>';
        document.getElementById("form").submit();

    }
  });

just added a form and hidden input in javascript . now it can be retrieve to other page using $_POST

Save an HTML5 canvas image to a database

1 Answers1