Question

我已经在Flask中创建了表单，并且正在使用引导程序来帮助呈现文件。我的表单正常工作，但是现在我想让用户绘制他们的签名，并让该签名与表单一起提交。但是我一直很难做到这一点，因为当我将canvas标记放置在form标记内时，用户无法在画布上绘制任何内容。如果将canvas标签放置在form标签之外，则可以在其上绘制。

{% extends "base.html" %}
{% import 'wtf.html' as wtf %}
<html>
<body>
{% block app_content %}
{% block content %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script>
      $(document).ready(function() {
      var flag, dot_flag = false,
        prevX, prevY, currX, currY = 0,
        color = 'black', thickness = 2;
      var $canvas = $('#canvas');
      var ctx = $canvas[0].getContext('2d');

      $canvas.on('mousemove mousedown mouseup mouseout', function(e) {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - $canvas.offset().left;
        currY = e.clientY - $canvas.offset().top;
        if (e.type == 'mousedown') {
          flag = true;
        }
        if (e.type == 'mouseup' || e.type == 'mouseout') {
          flag = false;
        }
        if (e.type == 'mousemove') {
          if (flag) {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = color;
            ctx.lineWidth = thickness;
            ctx.stroke();
            ctx.closePath();
          }
        }
      });

      $('.canvas-clear').on('click', function(e) {
        c_width = $canvas.width();
        c_height = $canvas.height();
        ctx.clearRect(0, 0, c_width, c_height);
        $('#canvasimg').hide();
      });
    });
</script>

  //When canvas placed here, the canvas shows up, and it works fine as user can write to it
  <canvas id="canvas" width="300" height="50" style="border:2px solid;"></canvas>
  <input type="button" value="Clear" class="canvas-clear" />

  <script>
        function delete_flash(flash){$(flash).parent().remove()}
  </script>

    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}" role="alert" onclick=delete_flash(this)>
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endfor %}
        {% endif %}
        {% endwith %}
    </div>

    <h1><center>Visitor Check In</center></h1>
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}

        <h5> &emsp;<b>3. </b>{{ form.question1.label }}</h5>
        {% for subfield in form.question1%}
            <tr>&emsp;
                <td>{{ subfield }}</td>
                <td>{{ subfield.label }}</td> &emsp;
            </tr>
        {% endfor %}
        {% for error in form.question1.errors %}
            <span style="color: red;">[{{ error }}]</span>
        {% endfor %}


        <h5>&emsp;<b>4. </b>{{ form.question2.label }}</h5>
        {% for subfield in form.question2%}
            <tr>&emsp;
                <td>{{ subfield }}</td>
                <td>{{ subfield.label }}</td> &emsp;
            </tr>
        {% endfor %}
        {% for error in form.question2.errors %}
            <span style="color: red;">[{{ error }}]</span>
        {% endfor %}


        //When canvas placed here, the canvas shows up, but user cannot write anything to it
        <canvas id="canvas" width="300" height="50" style="border:2px solid;"></canvas>
        <input type="button" value="Clear" class="canvas-clear" />
        <p>{{ form.submit() }}</p>
    </form>

{% endblock %}
{% endblock %}
</body>
</html>

也许将画布放在form标签内的问题是我在后端没有任何东西可以提交在画布上绘制的内容。所以我也想知道当用户单击“提交”按钮时，如何将绘制的内容保存到画布上。

以烧瓶形式提交画布工程图

0 个答案: