如何在laravel 5.4中使用signature_pad？
问题描述：
我正在制作一个简单的基于表单的发票/收据网络应用程序，需要使用signature_pad获取客户签名。由于熟悉度以及内置的用户身份验证脚手架，我的应用程序使用Laravel 5.4。如何在laravel 5.4中使用signature_pad？
作为概念证明，我试图从signature_pad示例将代码嵌入到我的Blade模板中，但没有运气 - 绘图没有发生。此外，与按钮关联的动作/事件侦听器也不起作用。
代码的直接html文件变体导致功能性signature_pad（见下文），所以我知道写入的代码工作得很好 - 问题似乎与Laravel，Vue，Blade或者方式JS在模板内处理。
对于在Laravel 5.4或类似的刀片模板中使用signature_pad的任何洞察力或专业知识，都很感激。谢谢。
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Testing</title>
\t </head>
\t
\t <body>
\t \t <div class="wrapper">
\t <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
\t </div>
\t <div>
\t <button id="save">Save</button>
\t <button id="clear">Clear</button>
\t </div>
\t </body>
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
\t <script>
\t \t var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
\t \t backgroundColor: 'rgba(255, 255, 255, 0)',
\t \t penColor: 'rgb(0, 0, 0)'
\t \t });
\t \t var saveButton = document.getElementById('save');
\t \t var cancelButton = document.getElementById('clear');
\t \t saveButton.addEventListener('click', function (event) {
\t \t var data = signaturePad.toDataURL('image/png');
\t \t // Send data to server instead...
\t \t window.open(data);
\t \t });
\t \t cancelButton.addEventListener('click', function (event) {
\t \t signaturePad.clear();
\t \t });
\t </script>
</html>
答
问题由Laravel创建开箱即用的样板模板出现。默认情况下，模板布局（views/layouts/app.blade.php）带有app.js的脚本标记，这是由于我认为Vue2.0搭配。完全删除此调用可使signature_pad JS正常工作。
我已经创建了一个Laravel包，它为您抽象出所有这些：https：//github.com/GeneaLabs/laravel-casts。你可能会也可能不会觉得有帮助，只是想分享，所以你不必重新发明轮子。 :) –