提交后清除画布[重复]

Posted

技术标签:

【中文标题】提交后清除画布[重复]【英文标题】:Clearing Canvas after submission [duplicate] 【发布时间】:2018-07-25 17:16:47 【问题描述】:

我创建了一个小表单,用户可以在其中添加注释并在 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"
          
          
          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();
      ,
    );
  ));
);

【问题讨论】:

能否请您整理一下格式。 谷歌这个:javascript clear canvas。研究您提出的问题然后在 *** 上提出问题要快得多。 @Ibu,我当然做了....认真的吗?你的答案是什么? 这是第一个结果:How to clear the canvas for redrawing 【参考方案1】:

试试下面的sn-p,效果很好here:

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

【讨论】:

以上是关于提交后清除画布[重复]的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery提交后清除表单[重复]

提交成功后Jquery清除表单[重复]

提交后重置表单[重复]

提交后清空文本区域的内容[重复]

在Javascript中清除drawImage()函数[重复]

浏览历史记录清除网页后注销[重复]