HTML5 Canvas Save PNG onclick Submit button, PHP, MYSQL, Javascript

Question

I am requesting help on a signature capture form. I found this standard template on Github and it functions beautifully but I was hoping to customize it a bit but my javascript is just in the beginning stages. Currently this code allows you to make the signature and then when you click save it takes you to a new page where you are able to download the image as a PNG. I am implementing this function for techs to use in the field so we don't need them to save them to their phones. We need them to be able to click Submit and it send the image automatically to a folder on our server labeled signatures/. Any help would be appreciated. I have seen similar requests for this type of question but I am having trouble connecting the dots.

signaturepad.php

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Signature Pad demo</title>
        <meta name="description" content="Signature Pad - HTML5 canvas based smooth 
            signature drawing using variable width spline interpolation.">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-
            scale=1, maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="css/signature-pad.css">
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-39365077-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
                    'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();
        </script>
    </head>
    <body onselectstart="return false">
        <div id="signature-pad" class="m-signature-pad">
            <div class="m-signature-pad--body">
                <canvas id="canvas"></canvas>
            </div>
            <div class="m-signature-pad--footer">
                <div class="description">Sign above</div>
                <div class="left">
                    <button type="button" class="button clear" data-
                        action="clear">Clear</button>
                </div>
                <div class="right">
                    <button type="button" class="button save" data-action="save-
                        png">Save</button>
                    <!--<button type="button" class="button save" data-action="save-svg">Save as 
                        SVG</button>-->
                </div>
            </div>
        </div>
        <script src="js/signature_pad.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

app.js

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    savePNGButton = wrapper.querySelector("[data-action=save-png]"),
    saveSVGButton = wrapper.querySelector("[data-action=save-svg]"),
    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();
});

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

saveSVGButton.addEventListener("click", function(event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        window.open(signaturePad.toDataURL('image/svg+xml'));
    }
});

James · Accepted Answer · 2017-08-11 16:35:34Z

1

It looks like you can get a string represenation of the signature via signaturePad.toDataURL(). You could have a form on your html page with an input, then within the "save button" click handler set the value of the input to the signature, and submit the form to your server.

Add a form which submits to a php file that can store the signature it receives from $_POST['sig']:

<form id='sigform' method='post' action='savesig.php'>
<input id='sigfield' type='hidden' name='sig'>
</form>

I'm stealing your savePNG button to be the trigger:

savePNGButton.addEventListener("click", function(event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        // store the signature in the form field
        document.getElementById('sigfield').value = signaturePad.toDataURL();
        // submit the form
        document.getElementById('sigform').submit();
    }
});

Then savesig.php will have something like

$sig = $_POST['sig'];
// now save $sig in the database.

answered Aug 11, 2017 at 16:35

James

22.4k5 gold badges29 silver badges44 bronze badges

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

1 Comment

Grisham Designs Over a year ago

This is exactly what I needed. Worked for me like a charm. Thank you!

Collectives™ on Stack Overflow

HTML5 Canvas Save PNG onclick Submit button, PHP, MYSQL, Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related