提交后清除画布[重复]
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);
【讨论】:
以上是关于提交后清除画布[重复]的主要内容,如果未能解决你的问题,请参考以下文章