为数字签名添加重置按钮的技术实现咨询

只需添加一个重置函数并绑定到Reset按钮上，就能实现清空签名图片、重新签名的效果，具体操作如下：

1. 新增重置函数 #

在现有<script>标签中添加clearSignature函数，用来清空签名图片内容：

function clearSignature() {
    // 用空白透明base64图替换签名，避免显示破损图标
    document.getElementById("imagefetch1").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
    // 也可以直接清空src：document.getElementById("imagefetch1").src = ""; 但可能显示破损图标
}

2. 绑定按钮点击事件 #

给id为clear的Reset按钮添加onclick属性，调用重置函数：

<button style="position:relative;  top:-40px;" type="button" value="clear" id="clear" onclick="clearSignature()">Reset</button>

修改后的完整代码 #

<div class="m-signature-pad">
    <div class="m-signature-pad--body">
        <img style="width: 260px;  height: 60px; margin:0px; padding: 0px; filter:sepia(100%);" id="imagefetch1">
    </div>
</div>                  

<script>
function init() {
    var docDescription = 'Please sign below';
    var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
    docDescription = docDescription.replaceAll(' ', '%20');
    reqUrl += '&ReceiptData=' + docDescription;
    fetch(reqUrl)
        .then(data => data.json())
        .then(data => {
            if (data.successful) {
                $("#imagefetch1").attr("src","data:image/png;base64," + data.response.PNG);  
            }                                                           
        })
        .catch(e => {
            console.log('Error fetching image', e)
        })  
} 

// 新增签名重置函数
function clearSignature() {
    document.getElementById("imagefetch1").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
}
</script> 

<div class="form-row" > 
    <label for="signature" type="label"><strong>Signature</strong></label> 
    <input style="margin-left:90px; margin-top: 10px; border:transparent; width: 150px;" type="date" name="date" >
    <button style="position:relative;  top:-40px;" type="button" value="clear" id="clear" onclick="clearSignature()">Reset</button> 
    <button style="position:relative;right:90px;top:-80px; line-height: 17px;" type="button" value="clear" id="clickto" onclick="init()">Click to Sign</button>                                                                          
</div>

效果说明 #

点击Reset按钮后，签名区域会恢复为空白状态，此时再次点击“Click to Sign”按钮即可重新获取新的签名。使用空白base64图是为了避免浏览器显示默认的破损图片图标，提升视觉体验。

内容的提问来源于stack exchange，提问作者Ivonne Aspilcueta