Блог

Главная - Вопросы по программированию - Html-холст не работает для электронной подписи на простой веб-странице

Html-холст не работает для электронной подписи на простой веб-странице

#javascript #html #canvas

Вопрос:

Это мой первый HTML-код. я пытаюсь создать холст, на котором пользователь может поставить электронную подпись с помощью мыши. Кто-нибудь может мне помочь, где я ошибаюсь. Часть html и css работает, но электронная подпись не отображается на экране.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>eSignature Page</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 200px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .signature-pad {
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 200px;
            background-color: white;
        }
    </style>
    <script>
        var canvas = document.getElementById('signature-pad');
        function resizeCanvas() {
            var ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
        }
        window.onresize = resizeCanvas;
        resizeCanvas();
        var signaturePad = new SignaturePad(canvas, {
            backgroundColor: 'rgb(255, 255, 255)'
        });
        document.getElementById('clear').addEventListener('click', function () {
            signaturePad.clear();
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
    </div>
    <button id="clear">Clear</button>
</body>
</html>

Комментарии:

1. Одна вещь заключается в том, что вам нужно сохранить весь ваш <сценарий>…<сценарий></сценарий> непосредственно перед закрывающим тегом </сценарий></тело>

2. Также могу ли я узнать, что это SignaturePad такое ?

Ответ №1:

Есть такой момент :

Вам нужно загрузить его, самый простой способ-загрузить его с CDN

 <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

После того, как вы укажете цвет фона в своем css :

 .signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
    background-color: white; // <----- Here
}

Следовательно, вам не нужно добавлять эту опцию при создании панели подписи :

 // BEFORE
const signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)'
});

// AFTER
const signaturePad = new SignaturePad(canvas);
 
 const canvas = document.getElementById('signature-pad');

function resizeCanvas() {
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

const signaturePad = new SignaturePad(canvas);

document.getElementById('clear').addEventListener('click', function () {
    signaturePad.clear();
}); 
 .wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
    background-color: lightgrey; // For visualisation puropse, I changed it
} 
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>eSignature Page</title>    
</head>
<body>
    <div class="wrapper">
        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
    </div>
    <button id="clear">Clear</button>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
</body>
</html>
Метки: