HTML5 Canvas Save PNG onclick 提交按钮, PHP, MYSQL, Javascript答案

【问题标题】：HTML5 Canvas Save PNG onclick Submit button, PHP, MYSQL, JavascriptHTML5 Canvas Save PNG onclick 提交按钮, PHP, MYSQL, Javascript
【发布时间】：2018-01-20 05:35:51
【问题描述】：

我正在请求有关签名捕获表单的帮助。我在 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'));
    }
});

【问题讨论】：

标签： javascript php html canvas

【解决方案1】：

看起来您可以通过 signaturePad.toDataURL() 获得签名的字符串表示形式。您可以在您的 html 页面上有一个带有输入的表单，然后在“保存按钮”单击处理程序中将输入值设置为签名，并将表单提交到您的服务器。

添加一个提交到一个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.

【讨论】：

这正是我所需要的。像魅力一样为我工作。谢谢！