1

私は署名パッド JavaScriptライブラリを使用して、人々にドキュメントにデジタル署名してもらいます (これはテスト用であり、法的拘束力などはありません) が、署名結果を JS から Flask/Python に渡すのに苦労しています。

次のコードは私のHTMLフォームで、form.stu_nameフィールドを完全に送信し、JSを「送信」するようにトリガーします(コードが実行され、署名を表示する新しいウィンドウが開きます)が、JSの結果を送信する方法がわかりませんFlask へ - 詳細については、2 番目のコード ブロックの例を参照してください。

<div class="container">
    {% from "_formhelper.html" import render_field %}
    <form id="upload-form" method="POST" action="/sixth_form/" enctype="multipart/form-data">
    <dl>
      {{render_field(form.stu_name)}}
        </dl>
        <p>Student Signature</p>
<div class="wrapper">
  <img src="{{ url_for('static', filename='images/grey.jpeg') }}" width=400 height=200 />
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
  <button id="clear" type="Button">Clear</button>
</div>
<br>
    <p><input id="finalsub" type="submit" value="Submit"></p>
    </form>
</div>

スクリプト自体は次のとおりです。実行すると、署名の結果が URI エンコードされた画像として表示された新しいウィンドウが開きます (その部分は問題ありません。後で Python でデコードできます)。画像を Flask に送信して変数に保存し、別の画像に追加できるようにします。私はJSにあまり詳しくないので、どんな提案も大歓迎です!

<script>
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('finalsub');
var cancelButton = document.getElementById('clear');

saveButton.addEventListener('click', function (event) {
  var data = signaturePad.toDataURL('image/png');

// Send data to server instead...
  window.open(data);
});

cancelButton.addEventListener('click', function (event) {
  signaturePad.clear();
});
</script>
4

1 に答える 1