1

我正在使用签名板 JavaScript库让人们对文档进行数字签名（这只是为了测试，没有任何法律约束力等），但我很难将签名结果从 JS 传递回 Flask/Python。

以下代码是我的 HTML 表单，它form.stu_name完美地提交了字段，甚至触发了我的 JS “提交”（意味着代码执行并打开一个显示签名的新窗口）但我不确定如何提交 JS 结果回来到 Flask - 有关更多信息，请参见第二个代码块示例。

<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

1

这个答案似乎是您正在寻找的。然而，这是使用jQuery。要在纯 JavaScript 中执行此操作，请查看此答案。然后访问您将使用的文件flask.request.files。

一个盲目的（阅读：未经测试）的例子是：

$(function() {
    $('#upload-file-btn').click(function() {
        var data = signaturePad.toDataURL('image/png');
        $.ajax({
            type: 'POST',
            url: '/uploadUrl',
            data: data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

现在在烧瓶的端点视图功能中，您可以通过 flask.request.files 访问文件的数据。

注意：正如我所说，这是未经测试的，我不知道ajax配置（例如使请求同步或设置contentType为 false）是否都是必要的。我的直觉是这样重写它：

未测试

$(function() {
    $('#upload-file-btn').click(function() {
        var data = signaturePad.toDataURL('image/png');
        $.ajax({
            type: 'POST',
            url: '/uploadUrl',
            data: data,
            contentType: 'image/png'
        }).done(function(data) {
            console.log('Success!');
        }).fail(function(data) {
            console.log('Fail!');
        });
    });
});
于 2017-03-29T22:51:31.587 回答