Question

我在签名捕获表单上请求帮助。我在Github上找到了这个标准模板，它的功能非常漂亮，但我希望自定义它，但我的javascript只是在开始阶段。目前，此代码允许您进行签名，然后当您单击“保存”时，它会将您带到一个新页面，您可以将该图像作为PNG下载。我正在为技术人员实现此功能，以便我们不需要他们将它们保存到手机中。我们需要它们能够单击“提交”并将图像自动发送到我们服务器上标记为签名/的文件夹中。任何帮助，将不胜感激。我已经看到了类似问题的类似要求，但我无法连接点。

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'));
    }
});

Answer 1

看起来你可以通过signaturePad.toDataURL（）获得签名的字符串表示。您可以在html页面上输入一个表单，然后输入＆＃34;保存按钮＆＃34; click handler设置签名输入的值，并将表单提交给服务器。

添加一个提交到php文件的表单，该文件可以存储从$_POST['sig']收到的签名：

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

我偷了你的savePNG按钮作为触发器：

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();
    }
});

然后savesig.php会有类似

的东西

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

HTML5 Canvas保存PNG onclick提交按钮，PHP，MYSQL，Javascript

1 个答案: