Membuat E-Signature Pad (Tanda Tangan Digital) dengan HTML2Canvas, AJAX, dan PHP

Pada situasi pandemi Covid-19 yang terjadi di Indonesia sejak bulan Maret 2020 membuat segala kegiatan menjadi terhambat. Salah satu kegiatan yang terkendala pada situasi tersebut adalah proses tanda tangan suatu dokumen. Proses tersebut menjadi terhambat karena harus mematuhi aturan physical distancing untuk memutus rantai penyebaran virus Covid-19. Agar proses kegiatan tersebut terus berjalan semua kegiatan dibuat menjadi digital baik dari pembuatan dokumen hingga proses tanda tangannya. Pada artikel ini akan dibagikan source code untuk pembuatan tanda tangan digital yang disimpan dalam bentuk gambar agar bisa disimpan di dalam komputer atau cloud storage dan digunakan kembali pada dokumen lain seperti pada dokumen Microsoft Word atau yang lainnya dan bisa juga diimplementasikan ke aplikasi berbasis web yang sudah didevelopment untuk menambah fitur baru.

Unduh Source Code

Untuk mengunduh source code tanda tangan digitalnya dapat mengunjungi halaman github saya disini. Source code ini saya dapatkan dari Learn Infinity, dimana dalam source codenya menggunakan HTML2Canvas, AJAX, dan PHP. Source code yang saya share di github ada sedikit modifikasi yaitu untuk menghapus atau clear tanda tangan jika tidak sesuai atau tidak pas dengan tanda tangan yang asli. Sehingga dapat melakukan tanda tangan ulang tanpa harus melakukan refresh pada browser.

Konfigurasi yang dapat diubah

Jika konfigurasi yang saya sediakan tidak sesuai dengan kebutuhan Anda konfigurasi tersebut dapat diubah pada file jquery.signaturepad.js yang ada di directory folder js. Konfigurasi yang dapat diubah terdapat pada barisan terakhir yang ada dibarisan code 1090 hingga 1133. Berikut saya berikan beberapa konfigurasi yang dapat diubah sesuai dengan kebutuhan Anda.

Mengganti background color digital signature

Secara default background color yang dihasilkan akan berwarna putih. Namun, jika dokumen Anda memiliki background color warna merah maka harus mengubahnya menjadi warna merah juga. Untuk mengubahnya pada bagian bgColour terdapat nilai #ffffff dimana nilai tersebut dapat diubah sesuai dengan warna kebutuhan Anda dalam format kode hex color. Jika tidak ingin repot mencari hex color yang diinginkan agar sesuai dengan kebutuhan dokumen maka dapat menggantinya menjadi transparent. Sebagai contoh code untuk mengubahnya dapat dilihat dibawah ini.

code default
bgColour : '#ffffff'

dapat diubah menjadi
bgColour : 'transparent'

Mengubah warna tanda tangan

Warna tanda tangan ini jika diibaratkan suatu pena, maka warna itu adalah warna pena itu sendiri. Secara default warna tanda tangan yang ada di source code adalah warna biru. Tentu saja ada beberapa dokumen yang mengharuskan warna biru atau warna lain. Untuk mengubahnya dapat mengubahnya pada bagian code penColour. Secara default nilai yang diberikan adalah #145394 dan untuk mengubahnya cukup mengganti nilai tersebut. Untuk mencari hex color yang Anda inginkan dapat mengunjungi website htmlcolorcodes.com. Sebagai contoh saya akan mengubah warna tanda tangan menjadi hitam dan dapat dilihat contoh codenya dibawah ini.

code default
penColour : '#145394'

dapat diubah menjadi
penColour : '#000'

Mengatur tebal tanda tangan

Pada kenyataannya pena memiliki ketebalan yang berbeda-beda. Ada yang memiliki ketebalan 0.5mm, ada juga yang ketebalannya 0.7mm, bahkan ada yang ketebalannya 1.0mm. Untuk mengubah ketebalan tanda tangan dapat diubah pada bagian penWidth. Secara default penWidth memiliki nilai 2 dan dapat diubah nilainya sesuai keinginan dengan inputan berupa nomor. Sebagai contoh saya akan mengubah ketebalan tanda tangan dengan mengganti nilai default 2 menjadi 7 dan dapat dilihat contoh codenya dibawah ini.

code default
penWidth : 2

dapat diubah menjadi
penWidth : 7

Mengubah warna garis tanda tangan

Garis ini berada tepat dibawah tanda tangan yang dapat digunakan sebagai separator antara tanda tangan dan teks yang dibawahnya yang biasanya digunakan untuk nama terang. Jika tidak ingin menggunakan garis tersebut maka dapat mengubahnya menjadi #fff yang berarti berwarna putih dimana nilai defaultnya adalah #ccc. Untuk contoh perubahan codenya seperti dibawah ini.

code default
lineColour : '#ccc'

dapat diubah menjadi
lineColour : '#ff'

Mengubah tebal garis tanda tangan

Jika menggunakan garis tanda tangan diatas maka ketebalan garisnya juga bisa diatur sama seperti mengatur ketebalan tanda tangan. Konfigurasi ini dapat diubah pada bagian lineWidth yang memiliki nilai default 2, jika ingin mengubahnya menjadi lebih tebal maka nilai tersebut bisa diubah lebih besar dari nilai defaultnya dan juga berlaku sebaliknya jika ingin lebih tipis ketebalan garisnya maka nilainya bisa diubah menjadi lebih kecil dari nilai defaultnya. Untuk contoh perubahan codenya seperti yang dibawah ini.

code default
lineWidth : 2

dapat diubah menjadi
lineWidth : 4

Konfigurasi diatas adalah konfigurasi yang sering diubah dan tentunya konfigurasi tersebut dapat disesuaikan dengan kebutuhan masing-masing dan untuk implementasinya ke aplikasi berbasis web lainnya juga mudah yang penting sertakan script-script yang terdapat dalam halaman index.php dan dapat disesuaikan dengan aplikasi yang sudah diimplementasi.

Happy Coding ^-^