点击提交按钮时Canvas toDataURL无法写入隐藏输入框问题

你遇到的问题根源在于每次点击提交按钮时才创建新的SignaturePad实例，这个新实例无法读取之前在画布上绘制的签名内容，自然也就没法把有效数据写入隐藏输入框。

1. 提前初始化SignaturePad实例 #

把SignaturePad的初始化逻辑放在页面加载完成时，而不是点击提交按钮时，这样实例能一直关联画布上的签名内容。

2. 点击提交时直接复用实例获取数据 #

用已初始化好的实例调用toDataURL()，就能拿到正确的签名数据。

JavaScript 代码 #

<script type="text/javascript">
    $(document).ready(function () {
        // 页面加载完成就初始化SignaturePad，绑定到画布
        var canvas = document.querySelector('#colors_sketch');
        var pad = new SignaturePad(canvas);

        $('#myBtn1').click(function () {
            // 直接用已有的实例获取签名数据
            var data = pad.toDataURL();
            $('#savetarget').attr('src', data);
            $('#SignatureDataUrl').val(data);
        });
    });
</script>

HTML 代码（保持原结构即可） #

<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>
<input type="hidden" asp-for="SignatureDataUrl">
<input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary" />

• 检查页面是否正确引入了SignaturePad的脚本文件，避免因脚本未加载导致实例创建失败。
• 可以在点击事件里加一行console.log(data)，打开浏览器控制台查看是否输出了有效的DataURL，以此区分是数据获取问题还是赋值问题。

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