Question

我正在制作一个名为“jsignature”的签名捕获插件。我想将它添加为我的表单中的一个字段，如下所示。

但我不想在表单中使用click函数以及表单中的textarea。只有更改签名并提交数据才能保存在帖子中。我想用javascript自定义这个，我没有试图解决这个问题。

我的代码如下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<!-- jQuery -->
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script
    src="https://cdn.jsdelivr.net/npm/jsignature@2.1.2/libs/jSignature.min.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->

<!-- jSignature -->
<style>
#signature {
    width: 100%;
    height: auto;
    border: 1px solid black;
}
</style>
<form method="post" action="test.php">
    <!-- Signature area -->
    <div id="signature"></div>
    <br /> <input type='button' id='click' value='click'>
    <textarea id='output' name='sig'></textarea>
    <br />

    <!-- Preview image -->
    <img src='' id='sign_prev' style='display: none;' /> <input
        type="submit" name="submit">
</form>
<!-- Script -->
<script>
    $(document).ready(function() {

        // Initialize jSignature
        var $sigdiv = $("#signature").jSignature({
            'UndoButton' : true
        });
        true
        $('#click').click(function() {
            // Get response of type image
            var data = $sigdiv.jSignature('getData', 'image');

            // Storing in textarea
            $('#output').val(data);

            // Alter image source 
            $('#sign_prev').attr('src', "data:" + data);
            $('#sign_prev').show();
        });
    });
</script>
</html>

我不知道在哪里更改代码。我想在提交表单后将数据保存在数据库中，而不需要任何textareas和单击按钮。有人可以给我一个帖子，教程或一些帮助吗？

Answer 1

我想这就是你要找的东西

 <script>
        $(document).ready(function() {
            // Initialize jSignature
            var $sigdiv = $("#signature").jSignature({
                'UndoButton' : true
            });
            true

            $('#signature').change(function() {    
                var data = $sigdiv.jSignature('getData', 'image');
                // Storing in textarea
                $('#output').val(data);

                // Alter image source 
                $('#sign_prev').attr('src', "data:" + data);
                $('#sign_prev').show();
            });
        });
    </script>

JavaScript - 如何自定义jsignature功能？

1 个答案: