HTML5画布保存PNG onclick提交按钮、PHP、MYSQL、Javascript_Javascript_Php_Html_Canvas

HTML5画布保存PNG onclick提交按钮、PHP、MYSQL、Javascript

javascript php html canvas

HTML5画布保存PNG onclick提交按钮、PHP、MYSQL、Javascript,javascript,php,html,canvas,Javascript,Php,Html,Canvas,我正在申请签名捕获表方面的帮助。我在Github上发现了这个标准模板，它的功能非常出色，但我希望对它进行一些定制，但我的javascript才刚刚开始。目前，此代码允许您进行签名，然后单击“保存”时，它会将您带到一个新页面，您可以在该页面上下载PNG格式的图像。我正在为现场技术人员实现此功能，因此我们不需要他们将其保存到手机中。我们需要他们能够单击提交，它会自动将图像发送到服务器上标记为signatures/的文件夹中。任何帮助都将不胜感激。我也见过类似的问题，但我很难把这些问题联系起来 sig

我正在申请签名捕获表方面的帮助。我在Github上发现了这个标准模板，它的功能非常出色，但我希望对它进行一些定制，但我的javascript才刚刚开始。目前，此代码允许您进行签名，然后单击“保存”时，它会将您带到一个新页面，您可以在该页面上下载PNG格式的图像。我正在为现场技术人员实现此功能，因此我们不需要他们将其保存到手机中。我们需要他们能够单击提交，它会自动将图像发送到服务器上标记为signatures/的文件夹中。任何帮助都将不胜感激。我也见过类似的问题，但我很难把这些问题联系起来

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>

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

添加一个提交到php文件的表单，该文件可以存储从

$\u POST['sig']

收到的签名：

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

然后savesig.php将有如下内容

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

这正是我需要的。对我来说就像一个符咒。非常感谢。

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

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