laravel 上的 signaturePad 问题集成

Question

我遵循了这个教程：http://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

我将 js 文件添加到 public/js

在我的 head.blade.php 中我添加了：

    <!-- Bootstrap core CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Custom styles for this template -->

<link href="{{ asset('css/override.css') }}" rel="stylesheet">


<link href="{{ asset('css/jquery.signaturepad.css') }}" rel="stylesheet">

<script src="{{ asset('js/numeric-1.2.6.min.js')}}"></script>
<script src="{{ asset('js/bezier.js') }}"></script>
<script src="{{ asset('js/jquery.signaturepad.js') }}"></script>

<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

<script src="{{ asset('js/json2.min.js') }}"></script>

那么在我看来：

<div class="form-group col-md-8">
                                    <label>Signature électronique : </label>

                                    <div id="signArea" >
                                        <h2 class="tag-ingo"></h2>
                                        <div class="sig sigWrapper" style="height:auto;">
                                            <div class="typed"></div>
                                            <canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas>
                                        </div>
                                    </div>

                                    <button id="btnSaveSign">Save Signature</button>


                                </div>

在@endsection之前

 <script>
            $(document).ready(function() {
                $('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
            });

            $("#btnSaveSign").click(function(e){
                html2canvas([document.getElementById('sign-pad')], {
                    onrendered: function (canvas) {
                        var canvas_img_data = canvas.toDataURL('image/png');
                        var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");

                        //ajax call to save image inside folder
                        $.ajax({
                            url: 'url',
                            data: { img_data:img_data },
                            type: 'post',
                            dataType: 'json',
                            success: function (response) {
                                window.location.reload();
                            }
                        });
                    }
                });
            });
        </script>

当我刷新页面时，我得到了这个 javascript 异常：

未捕获的类型错误：$(...).signaturePad 不是函数

我运行 Jquery 3.3.1，在教程中他们使用 1.10.2 也许是因为这个？我做得对吗？

Answer 1

您缺少一些需要包含在 head 部分中的 js

访问此网址 http://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

点击查看演示，只需按 ctrl + u 即可获得所需的 js，需要包含在您的脑海中