net mvc: Signaturepad toDataURL generates no line

Question

Using Net MVC and Signaturepad, I´m taking a signature from users and generating a PNG by using this:

                <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>

I´m storing the signature in a database by using

<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>

This does nothing but setting the value in database.
In database I find the generated string:

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

I´m loading the view and if the viewmodel has that string I´m displaying it as an image:

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

This is only showing the lightgrey background from signaturepad but not the handwritten signature.
Where is the problem?

edit: I also tried saving it to desktop, but this png is also only lightgrey without lines.

score 0 · Answer 1 · answered May 27 '20 at 07:23

Problem were this lines of code:

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

Because of multiple canvas, as you can see from <canvas id="@("canvas" + flat.ID)" ..., the var signaturePad existed multiple times. Thus always the last var was used.
I solved it like this:

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

and

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

net mvc: Signaturepad toDataURL generates no line

1 Answers1