net mvc: Signaturepad toDataURL不生成任何行

Question

使用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;"/>

这只显示来自signaturepad的浅灰色背景，而不显示手写签名。

问题出在哪里？

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

Answer 1

问题是以下几行代码：

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

由于有多个var signaturePad，正如您在<canvas id="@("canvas" + flat.ID)" ...中看到的那样，canvas多次存在。因此，总是使用最后一个变量。

我是这样解决的：

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')"