net mvc: Signaturepad toDataURL не генерирует строку - PullRequest
Новая
       25

net mvc: Signaturepad toDataURL не генерирует строку

0 голосов
/ 26 мая 2020

Используя 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 тоже светло-серый без линий.

1 Ответ

0 голосов
/ 27 мая 2020

Проблема заключалась в следующих строках кода: 

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