net mvc: Signaturepad toDataURL 不生成任何行答案

【问题标题】：net mvc: Signaturepad toDataURL generates no linenet mvc: Signaturepad toDataURL 不生成任何行
【发布时间】：2020-05-26 09:57:22
【问题描述】：

使用 Net MVC 和 Signaturepad，我从用户那里获取签名并使用以下方法生成 PNG：

                <canvas id="@("canvas" + flat.ID)" width="400" height="200" style="background-color: lightgrey;"></canvas>
                <script type="text/javascript">
                    var canvas = document.querySelector("@("#canvas" + flat.ID)");
                    var signaturePad = new SignaturePad(canvas, {
                        backgroundColor: 'rgba(211,211,211, 1)',
                        penColor: 'rgb(0, 0, 0)'
                    });
                </script>

我正在使用

将签名存储在数据库中

<button class="btn btn-shadow btn-block btn-primary" onclick="saveSignature('@Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', signaturePad.toDataURL(), '@flat.ID', '@ViewBag.AssemblyOrderID')">Speichern</button>

这只是在数据库中设置值。
在数据库中我找到生成的字符串：

data:image/png;base64,iVBORw...

我正在加载视图，如果视图模型具有该字符串，我会将其显示为图像：

<img src="@flat.Signature" style="width: 100%; height: 200px;"/>

这仅显示签名板的浅灰色背景，但不显示手写签名。
问题出在哪里？

编辑：我也尝试将它保存到桌面，但是这个 png 也只是没有线条的浅灰色。

【问题讨论】：

标签： asp.net-mvc signaturepad

【解决方案1】：

问题是这行代码：

var signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgba(211,211,211, 1)',
    penColor: 'rgb(0, 0, 0)'
});

因为有多个画布，从<canvas id="@("canvas" + flat.ID)" ... 可以看出，var signaturePad 存在多次。因此总是使用最后一个变量。
我是这样解决的：

var pads = {};
...
pads["@("#canvas" + flat.ID)"] = new SignaturePad(canvas, {
    backgroundColor: 'rgba(211,211,211, 1)',
    penColor: 'rgb(0, 0, 0)'
});

和

onclick="saveSignature('@Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', pads['@("#canvas" + flat.ID)'].toDataURL(), '@flat.ID', '@ViewBag.AssemblyOrderID')"

【讨论】：