0
私はsignature_padを使用して顧客の署名を取得する必要がある簡単なフォームベースの請求書/領収書Webアプリケーションを作成しています。私のアプリは親密さと組み込みのユーザー認証の足場のためにLaravel 5.4を利用しています。laravel 5.4内でsignature_padを使用するには？
概念証明として、signature_padのコードを私のBladeテンプレートにembeddingしようとしましたが、これは運がなくても描画が行われませんでした。さらに、ボタンに関連付けられたアクション/イベントリスナーも機能しません。
コードのまっすぐなhtmlファイルのバリエーションは、機能的なsignature_pad（下を参照）になりますので、書かれたコードはうまくいきます - 問題はLaravel、Vue、Blade、またはway 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パッケージを作成しました：https://github.com/GeneaLabs/laravel-casts。あなたが役に立つと思うかもしれませんし、分かち合いたいと思うかもしれませんので、あなたは車輪を再発明する必要はありません。 :) –