Question

我创建了一个小表单，用户可以在其中添加注释并在Canvas上签名。我在提交后清除画布时遇到问题无法使其正常工作。所有其他部分工作得很好。

这个想法是在提交时清除文本字段和画布。

现在我需要为Stack-overflow键入更多文本，让我发布这个问题

<form method="post" enctype="multipart/form-data" id="notes">
  <div class="modal-body">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="col-md-12 col-sm-12 ">
          <label class=" control-label">Notes: </label>
          <textarea name="notes" style="width:100%" rows="5"></textarea>
        </div>
      </div>
    </div>
    <input type="hidden" id="e_sign" name="e_sign">
    <div class="row">
      <div class="col-md-12">
        <h5> E-Signature (If required) </h5>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12" style="align:center;">
        <canvas
          style="box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); border:2px"
          id="sig-canvas"
          width="550"
          height="250"
          style="background: white; align:center;">
        </canvas>
        <br>
        <div class="row">
          <div class="col-md-12"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-primary" value="Save">
  </div>
</form>

和

$(document).ready(function(e) {

  $("#notes").on('submit', (function(e) {

    e.preventDefault();
    var canvas = document.getElementById("sig-canvas");

    image = canvas.toDataURL("image/png", 1);
    $("#e_sign").val(image);
    console.log(image);
    var url = "<?php echo base_url("medication / add_notes / ");?>"
    $.ajax({
      url: url,
      type: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#note_count').val();
        $('#myModal78').modal('hide');

        swal("Done!", "Notes Successfully Added.", "success");
        $("#notes")[0].reset();
        $("#e_sign")[1].reset();
      },
    });
  }));
});

Answer 1

尝试使用以下代码段，工作正常here：

var canvas = document.getElementById('canvas');
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

提交后清除画布

1 个答案: