Membuat Canvas Tanda Tangan Online dengan HTML + JavaScript

Membuat Canvas Tanda Tangan Online dengan HTML + JavaScript

DailyBlog.id - Dengan perkembangan teknologi yang sangat cepat, tidak terasa yang dulu hanya melakukan tanda tangan (signature) melalui kertas, sekarang bisa melakukannya melalui online. Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat canvas tanda tangan online dengan HTML dan JavaScript. Dengan membuat signature atau tanda tangan online ini, nanti pengguna akan melakukan tanda tangan melalui canvas. Lalu hasil yang diperoleh nantinya dapat didownload menjadi gambar dengan format jpg atau png atau juga svg. Bagi saya ini sangat menarik, karna sudah tidak perlu tanda tangan melalui kertas lalu difoto dan baru dipasang. Jadi langsung melakukan tanda tangan secara online atau digital, dan langsung mengunduh gambarnya.

Signature Pad

Signature Pad adalah library JavaScript untuk menggambar tanda tangan yang mulus. Dengan berbasis canvas HTML5 dan menggunakan interpolasi kurva B├ęzier lebar variabel berdasarkan posting Tanda Tangan Halus. Ini berfungsi di semua browser desktop dan seluler modern dan tidak bergantung pada library eksternal apa pun.

Berikut ini cara membuat canvas tanda tangan online (signature) dengan menggunakan HTML + JavaScript.

Membuat Canvas Tanda Tangan Online dengan HTML + JavaScript 

Langkah awal yang dapat dilakukan yaitu, kalian bisa membuat file dengan nama index.html untuk membuat tampilan awal dari halaman nantinya. Dan kalian bisa copy script yang ada di bawah ini:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Tanda Tangan Online</title>
        <link rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
    </head>
    <body>
        <div id="signature-pad" class="signature-pad">
            <div class="signature-pad--body">
              <canvas></canvas>
            </div>
            <br/>
            <div class="signature-pad--footer">
              <div class="description">Tanda tangan di atas</div>
              <br/>
              <div class="signature-pad--actions">
                <div>
                  <button type="button" class="button clear" data-action="clear">Bersihkan</button>
                  <button type="button" class="button" data-action="undo">Undo</button>
                </div>
                <div>
                    <select data-action="download">
                        <option>Simpan Gambar: </option>
                        <option value="png">- PNG</option>
                        <option value="jpg">- JPG</option>
                        <option value="svg">- SVG</option>
                    </select>
                </div>
              </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
        <script src="./app.js"></script>
    </body>
</html>


Dengan demikian signature pad, akan diambil dari url librarynya yaitu https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js dan untuk app.js, nantinya agar canvas bisa dibuat tanda tangan dan bisa disimpan hasil tanda tangannya.

Jika sudah, kalian bisa buat file dengan nama app.js, lalu copy script yang ada di bawah ini.

app.js

const wrapper = document.getElementById("signature-pad");
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas, {backgroundColor: 'rgb(255, 255, 255)'});

const 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);
    signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

const dataURLToBlob = (dataURL) => {
    const parts = dataURL.split(';base64,');
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i)
        uInt8Array[i] = raw.charCodeAt(i);

    return new Blob([uInt8Array], {type: contentType});
}

const download = (dataURL, filename) => {
    if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
        window.open(dataURL);
    }
    else {
        const blob = dataURLToBlob(dataURL);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.style = "display: none";
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    }
}

const clearButton = wrapper.querySelector("[data-action=clear]");
clearButton.addEventListener("click", () => {
    signaturePad.clear();
});

const undoButton = wrapper.querySelector("[data-action=undo]");
undoButton.addEventListener("click", () => {
    var data = signaturePad.toData();

    if (data) {
        data.pop();
        signaturePad.fromData(data);
    }
});

const downloadImg = wrapper.querySelector("[data-action=download]")
downloadImg.addEventListener('change', (e) => {
    const value = e.target.value;

    downloadImg.selectedIndex = 0;

    if (signaturePad.isEmpty()) {
        alert('Tidak ada tanda tangan yang diunduh!');
    }
    else {
        let dataURL;
        let fileName;

        if (value === 'png') {
            dataURL = signaturePad.toDataURL();
            fileName = 'signature.png';
        }
        else if (value === 'jpg') {
            dataURL = signaturePad.toDataURL("image/jpeg");
            fileName = 'signature.jpg';
        }
        else if (value === 'svg') {
            dataURL = signaturePad.toDataURL("image/svg+xml");
            fileName = 'signature.svg';
        }

        if (value === 'png' || value === 'jpg' || value === 'svg')
            download(dataURL, fileName);
    }
});



Sesuai yang sudah saya jelaskan tadi di awal, bahwa script app.js  ini digunakan untuk mengekspor hasil gambar tanda tangan menjadi gambar yang memiliki format PNG, JPG, atau SVG. Selain itu bisa mmembersihkan hasil tanda tangan, dan ada undo jika pengguna ada melakukan kesalahan saat tanda tangan.

Jika sudah, tahap selanjutnya yaitu desain tampilan index.html nya. Kalian bisa buat file dengan nama yaitu style.css . Lalu copas script yang ada di bawah ini.

style.css

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 32px 16px;
    background: #f0f0f0;
    font-family: Helvetica, Sans-Serif;
}

.signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 460px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    padding: 16px;
}

.signature-pad::before, .signature-pad::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 40%;
    height: 10px;
    bottom: 10px;
    background: transparent;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
    left: 20px;
    -webkit-transform: skew(-3deg) rotate(-3deg);
    transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
    transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-bottom: 1px solid #ddd;
    margin-top: -16px;
    margin-left: -16px;
    margin-right: -16px;
}

.signature-pad--body canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
    color: #999;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}

.signature-pad--actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
}

button {
    background: #008cff;
    color: #fff;
    border: 1px solid #008cff;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 3px;
    -webkit-border-radius: 10px;
}

select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    -webkit-border-radius: 10px;
}



Dan halaman buat tanda tangan online sudah jadi. Untuk hasil tanda tangan yang sudah diekspor menjadi gambar hasil jadi seperti png, jpg atau svg Seperti yang ada di thumbnail artikel ini. Sangat mudah kan? Script yang di atas merupakan script yang sudah saya buat simple atau saya sederhanakan. Agar lebih mudah dipahami.

Jika kalian ingin melihat dokumentasi lengkapnya, kalian bisa kunjungi melalui github signature pad nya di link berikut ini. https://github.com/szimek/signature_pad

Mungkin cukup sekian artikel tutorial dari saya, semoga artikel yang saya berikan ini dapat bermanfaat bagi kalian semua. Jika saya ada salah kata atau salah pengetikan, saya mohon maaf. Sekian dan terima kasih.

Selamat mencoba!

Posting Komentar (0)
Lebih baru Lebih lama