Mengunduh Font
Font merupakan salah satu hal yang sangat penting dalam sebuah desain, maka dari itu ditutorial kali ini kita akan menambahkan font baru pada canvas.
Sebelum itu kita perlu mengunduh font yang kita inginkan terlebih dahulu, kita bisa mengunduh font di Google Fonts
Pada tutorial ini kita akan menggunakan font Montserrat
Menambahkan Font Baru
untuk menambahkan font baru kita bisa menggunakan registerFont()
const { registerFont, createCanvas } = require('canvas')
registerFont('./assets/fonts/Montserrat-Regular.ttf', { family: 'Montserrat' })
registerFont('./assets/fonts/Montserrat-Bold.ttf', { family: 'Montserrat', weight:700 })
registerFont('./assets/fonts/Montserrat-BoldItalic.ttf', { family: 'Montserrat', weight:700,style:'italic' })
const canvas = createCanvas(500, 300)
const ctx = canvas.getContext('2d')
Ada 3 property yang bisa kita gunakan untuk menambahkan font baru yaitu
- family
- weight (optional)
- style (optional)
Menggunakan Font yang telah ditambahkan
ada 4 property yang bisa kita gunakan untuk mengatur font kita agar sesuai dengan desain yang kita inginkan :
- font style : normal / italic
- font weight : normal, bold atau angka (1 - 1000)
- font size : px, em, %, dll
- jenis font : Montserrat
ctx.fillStyle = 'white' // memberi warna putih pada tulisan
ctx.font = '18px Montserrat'
ctx.fillText('Menambahkan Font Montserrat Regular', 10, 50)
ctx.font = '700 18px Montserrat'
ctx.fillText('Menambahkan Font Montserrat Bold', 10, 150)
// jika kita ingin merubah warnanya, kita bisa menuliskan ctx.fillStyle seperti ini
ctx.fillStyle = 'green' // rubah warna tulisan jadi hijau
ctx.font = 'italic 700 18px Montserrat'
ctx.fillText('Menambahkan Font Montserrat Bold', 10, 250)
Generate Gambar menggunakan fs.writeFileSync
Kita bisa menggunakan fs.writeFileSync agar bisa menghasilkan output berupa file gambar seperti dibawah ini
const bufferImage = canvas.toBuffer('image/jpeg')
fs.writeFileSync('namaGambar.png',bufferImage)
Jika kita ingin memasukkan kedalam folder images, kita tinggal menulis lokasi folder kemudian nama file gambarnya seperti ini.
fs.writeFileSync('./assets/images/namaGambar.png',bufferImage)
Hasil Akhir
