Menggunakan Canvas API Secara Interaktif
update 13 Juli 2021: ditambahkan drawerJS dengan modifikasi
Selama ini, kita berlatih menggunakan berbagai fitur dan kemampuan Canvas API secara programatik. Programatik disini adalah kebalikan dari interaktif. Jika elemen canvas disajikan secara interaktif, maka canvas itu bisa menerima input dan menampilkan output secara dinamis. Bingung? Well, contoh paling mudah adalah melihat aplikasi Paint di MS Windows (catatan: Paint itu bukan Canvas ya...).
Nah kita bisa menyediakan fitur seperti itu di laman web buatan kita, menggunakan library yang sudah ada. Ada dua yang akan dibahas, yang satu adalah menggunakan hook pada <div> (non <canvas>), satunya lagi menggunakan canvas secara langsung.
1. bcPaint
Sebenarnya, ini adalah salah satu dari banyak plugin JQuery yang memungkinkan kita menggunakan canvas secara instan. Kalau tertarik, kalian bisa lihat di link ini, beserta plugin-plugin lainnya.
Pertama sisipkan kode JQuery dan path ke file css dan js di bagian <head>. Oiya, filenya masing-masing bernama bcPaint.css, bcPaint.mobile.css, dan bcPaint.js beserta lokasi relatifnya terhadap file HTML ini. (Ini pasti kalian paham maksudnya.. gampang kok.)
<link rel="stylesheet" href="css/bcPaint.css">
<link rel="stylesheet" href="css/bcPaint.mobile.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="js/bcPaint.js"></script>
Di bagian <body>, tentukan area canvas menggunakan <div> dengan id unik. Misalnya:
<div id="bcPaint"></div>
Lalu, tambahkan <script> sebelum penutup </body> dengan kode JS:
$(document).ready(function () {
$('#bcPaint').bcPaint({
// warna utama
defaultColor: '000000',
// pilihan warna yang ditampilkan ke user
colors: [
'000000', '444444', '999999', 'DDDDDD', '6B0100', 'AD0200',
'6B5E00', 'FFE000', '007A22', '00E53F', '000884', '000FFF'
],
});
});
Nah, $('#bcPaint').bcPaint(); di atas maksudnya menampilkan interface plugin ini pada elemen dengan id = "bcPaint".
Kode lengkap untuk template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bcPaint</title>
<link rel="stylesheet" href="css/bcPaint.css">
<link rel="stylesheet" href="css/bcPaint.mobile.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="js/bcPaint.js"></script>
</head>
<body>
<div id="bcPaint"></div>
<script>
$(document).ready(function () {
$('#bcPaint').bcPaint({
// warna utama
defaultColor: '000000',
// pilihan warna yang ada
colors: [
'000000', '444444', '999999', 'DDDDDD', '6B0100', 'AD0200',
'6B5E00', 'FFE000', '007A22', '00E53F', '000884', '000FFF'
],
});
});
</script>
</body>
</html>
2. Signature Pad
Untuk yang nomor dua ini juga sederhana. Plugin ini bernama Signature Pad karena fungsi utamanya menghasilkan gambar tanda tangan.
Kita bisa memuat file JS yang digunakan via CDN, jadi tidak perlu mengunduh apapun. Letakkan kode berikut sebelum penutup </body> HTML:
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
Di bagian body (terserah mau di mana), buat <canvas> baru dengan style seperlunya, beserta dua buah button:
<canvas style="border: 1px solid black; touch-action: none;" width="320" height="320"></canvas>
<button onclick="save()">Unduh</button>
<button onclick="clearPad()">Bersihkan area</button>
Penasaran untuk apa fungsi save() dan clearPad() ?
Tambahkan kode JS berikut (dalam <script> tersendiri lho yaa...):
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {backgroundColor: "rgb(255,255,255)"});
function download(dataurl, filename) {
var a = document.createElement("a");
a.href = dataurl;
a.setAttribute("download", filename);
a.click();
}
function save() {
if (signaturePad.isEmpty()) {
alert("Buat tanda tangan terlebih dahulu!");
} else {
var dataURL = signaturePad.toDataURL("image/jpeg");
download(dataURL, "tanda_tangan.jpg");
}
}
function clearPad() {
signaturePad.clear();
}
Pada bagian signaturePad.toDataURL("image/jpeg"), kita dapat mengganti image/jpeg dengan satu format lain, yaitu image/svg+xml untuk SVG. Bagaimana jika dihilangkan parameternya? Maka gambar akan tersimpan dalam format default yaitu PNG.
Live Demo (coba corat-coret canvas di bawah ini):
Ok all done. Semoga materi ini bermanfaat bagi kalian 🙏.
3. DrawerJS (UG Demo)
Ini adalah DrawerJS yang sudah dimodifikasi untuk tujuan pembelajaran. Versi yang digunakan di demo ini ada di GitHub. Penjelasan ini sama dengan isi file README di repo.
Petunjuk Instalasi
Unduh repo ini, bisa dengan git clone atau unduh ZIP. Susunan direktori harusnya seperti di bawah:
gp@pop-os-3770k:~/Devel/html_canvas/drawerJS_GIT$ tree .
.
├── assets
│ ├── border-dashed-bold.png
│ ├── border-dashed-thin.png
│ ├── border.gif
│ ├── border-solid-bold.png
│ ├── border-solid-thin.png
│ ├── cursor-fa-eraser.cur
│ ├── cursor-fa-pencil.cur
│ ├── pencil-square-o.32.png
│ └── transparent.png
├── canvas
│ ├── canvas.css.map
│ ├── canvasLocalization.js
│ ├── canvas.min.css
│ ├── canvas.standalone.js.map
│ └── canvas.standalone.js.min.js
├── canvasConfig.js
├── fonts
│ ├── font-awesome
│ │ └── font-awesome.min.css
│ └── fonts
│ └── fontawesome-webfont.woff2
├── images
│ └── drawer.jpg
├── jQuery
│ └── jquery-3.4.1.min.js
└── README.md
7 directories, 20 files
Kemudian buatlah sebuah file HTML, misalnya index.html.
Pada bagian <head>, muat resource yang diperlukan (minified CSS):
<link rel="stylesheet" href="fonts/font-awesome/font-awesome.min.css" />
<link rel="stylesheet" href="canvas/canvas.min.css" />
Di bagian <body>, buatlah <div> baru yang nantinya akan di-append elemen canvas bawaan DrawerJS, lalu muat resource JS yang dibutuhkan:
(perhatikan id pada <div> yang disebutkan di atas.)
<h1>UTS</h1>
<div id="canvas-editor" style="margin-top: 100px;"></div>
<script src="jQuery/jquery-3.4.1.min.js"></script>
<script src="canvas/canvas.standalone.js.min.js"></script>
<script src="canvas/canvasLocalization.js"></script>
<script src="canvasConfig.js"></script>
Bagian paling penting: kode initialization untuk canvas (dengan JQuery). Perhatikan id selector $('#canvas-editor'):
$(document).ready(function () {
var drawer = new DrawerJs.Drawer(null, {
texts: customLocalization,
plugins: drawerPlugins,
defaultImageUrl: '/images/drawer.jpg',
defaultActivePlugin: { name: 'Pencil', mode: 'lastUsed' },
}, 600, 600);
$('#canvas-editor').append(drawer.getHtml());
drawer.onInsert();
});
Tambahkan style seperlunya (di bagian <head>):
#canvas-editor {
margin-top: 50px;
margin-left: 50px;
}
img {
margin-top: 5rem;
display: block;
margin-left: 5rem;
}
Selesai.
Coba buka file HTML untuk melihat hasilnya.