Ubah png ke base64

Silahkan Pilih 1 File png:


Silahkan Klik untuk dapatkan Hasil Edit (atau Ctrl+Shift+i --> copy):

...

Filter Warna untuk javascript

Gunakan link ini untuk mendapatkan filter warna sesuai keinginan:

https://angel-rs.github.io/css-color-filter-generator/

misal

hijau

filter: brightness(0) saturate(100%) invert(76%) sepia(68%) saturate(7285%) hue-rotate(96deg) brightness(128%) contrast(123%);

biru

filter: brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg) brightness(104%) contrast(144%);

merah

filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(7202%) hue-rotate(358deg) brightness(109%) contrast(112%);

bentuk di atas formatnya untuk css

di javascript tinggal hilangkan kata filter

var biru = "brightness(0) saturate(100%) invert(8%) sepia(99%) saturate(7166%) hue-rotate(247deg)"

masukkan di ctx

ctx.filter = biru;

Insert gambar di js - base64

Pada menggambar img di html dengan javascript, daripada pakai file.png, saya lebih cocok pakai image dari base64.

Alasannya, img tersebut include dalam file. Gak ambil dari luar file.

Sehingga, memudahkan penumpukan gambar di canvas yang sama.

Dan selanjutnya, hasilnya bisa di save ke png dengan toDataURL, dan akhirnya bisa dipanggil ke canvas baru agar bisa di cetak menggunakan print()