Bina alat e-tandatangan dalam talian menggunakan JavaScript-tutorial js-php.cn

Bina alat e-tandatangan dalam talian menggunakan JavaScript

WBOY

Lepaskan： 2023-08-09 12:01:05

asal

1371 orang telah melayarinya

Bina alat e-tandatangan dalam talian menggunakan JavaScript

Gunakan JavaScript untuk membina alat tandatangan elektronik dalam talian

Dengan kemunculan era digital, tandatangan elektronik telah menjadi cara komunikasi perniagaan yang pantas, mudah dan selamat. Apabila membangunkan alat tandatangan elektronik dalam talian, JavaScript sudah pasti merupakan pilihan bahasa yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membina alat tandatangan elektronik dalam talian yang ringkas tetapi berkuasa, dengan contoh kod.

Sebelum bermula, kita perlu memahami beberapa konsep. Secara umumnya terdapat dua jenis tandatangan elektronik: tandatangan berasaskan gambar dan tandatangan berasaskan grafik vektor. Yang pertama memaparkan imej tandatangan sebenar pengguna pada halaman web, manakala yang kedua menggunakan JavaScript untuk melukis grafik tandatangan. Dalam artikel ini kita akan menggunakan tandatangan berasaskan grafik vektor.

Pertama, kita memerlukan halaman HTML sebagai asas. Pada halaman, kami akan meletakkan elemen kanvas untuk pengguna melukis tandatangan mereka. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>在线电子签名工具</title>
    <script src="signature.js"></script>
</head>
<body>
    <h1>在线电子签名工具</h1>
    <canvas id="signatureCanvas"></canvas>
    <button onclick="clearSignature()">清除签名</button>
    <button onclick="saveSignature()">保存签名</button>
    <img  id="savedSignature" / alt="Bina alat e-tandatangan dalam talian menggunakan JavaScript" >
</body>
</html>

Salin selepas log masuk

Seterusnya, kami memerlukan fail JavaScript untuk mengendalikan logik lukisan tandatangan. Kodnya adalah seperti berikut:

const canvas = document.getElementById('signatureCanvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop];
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(x, y);
    context.stroke();
    [lastX, lastY] = [x, y];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

function clearSignature() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
    const image = document.getElementById('savedSignature');
    image.src = canvas.toDataURL();
}

Salin selepas log masuk

Dalam kod di atas, kita mula-mula mendapatkan elemen kanvas dan objek konteksnya. Kami kemudian mendengar acara tetikus untuk mendapatkan kedudukan cabutan tandatangan pengguna. Dalam acara turun tetikus, kami akan mula merekodkan koordinat titik terakhir pengguna. Dalam acara pergerakan tetikus, kami melukis grafik tandatangan berdasarkan koordinat yang direkodkan dan koordinat semasa. Pada acara tetikus naik, kami berhenti merakam lukisan tandatangan pengguna. Akhir sekali, kami menyediakan fungsi untuk mengosongkan tandatangan dan menyimpan tandatangan Yang terakhir memberikan DataURL yang dijana oleh tandatangan kepada elemen imej untuk memaparkan tandatangan.

Akhir sekali, kami perlu memperkenalkan fail CSS luaran untuk mencantikkan halaman. Anda boleh menyesuaikan gaya mengikut keperluan anda sendiri. Kod sampel adalah seperti berikut:

canvas {
    border: 1px solid #000;
    cursor: crosshair;
}

button {
    margin-top: 10px;
}

Salin selepas log masuk

Melalui langkah di atas, kami berjaya membina alat tandatangan elektronik dalam talian yang mudah. Pengguna boleh melukis tandatangan mereka sendiri pada kanvas, mengosongkan tandatangan melalui butang Kosongkan dan menyimpan tandatangan sebagai gambar melalui butang Simpan. Pembangun boleh mengembangkan fungsi mengikut keperluan perniagaan, seperti menambah pengesahan tandatangan, menyimpan tandatangan pada pelayan bahagian belakang, dsb.

Ringkasan: Menggunakan JavaScript untuk membina alat tandatangan elektronik dalam talian boleh memberikan kemudahan dan keselamatan untuk komunikasi perniagaan moden. Melalui contoh kod yang disediakan dalam artikel ini, pembangun boleh dengan cepat melaksanakan alat tandatangan elektronik dalam talian yang berkuasa dan mengembangkannya mengikut keperluan perniagaan.

Di atas ialah artikel tentang menggunakan JavaScript untuk membina alat tandatangan elektronik dalam talian, saya harap ia akan membantu pembaca.

Atas ialah kandungan terperinci Bina alat e-tandatangan dalam talian menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!