Objectives

• Membuat gambar menggunakan canvas

Install Dependency

Kita hanya membutuhkan 1 package untuk membuat image di node js yaitu canvas:

npm install canvas

Membuat Blank Canvas

selanjutnya kita akan buat canvasnya terlebih dahulu sesuai dengan ukuran gambar yang kita butuhkan

const {createCanvas} =  require('canvas')  
const canvas = createCanvas(1200, 628) // panjang dan lebarnya

const context = canvas.getContext('2d')

context.fillRect(0, 0, canvas.width, canvas.height)

Generate Hasil Gambar

agar kita bisa melihat hasil gambarnya, kita bisa gunakan bawaan dari nodejs yaitu fs untuk membuat file

const buffer = canvas.toBuffer('image/png')

fs.writeFileSync('tes.png',buffer)

sampai sini kita berhasil membuat canvas yang berukuran 1200 x 628 berwarna hitam. jika kita ingin merubah warna bisa kita tambahkan fillStyle sebelum kita buat canvasnya

const canvas = createCanvas(1200, 628)  
const context = canvas.getContext('2d')

context.fillStyle = '#FFF' // ganti warna   
context.fillRect(0, 0, canvas.width, canvas.height)

Menambahkan Gambar pada canvas

pada artikel kali ini kita tidak membuat dari scratch karena kita sudah memiliki template image jadi kita hanya perlu mengisi datanya.

untuk bisa menampilkan template image kita bisa gunakan loadImage kemudian kita letakkan gambarnya di canvas yang sudah kita buat

Download Template Image

const {createCanvas ,loadImage} =  require('canvas')

loadImage("template.png").then(image => {  
    // taruh gambar di sumbu x = 0 , sumbu y = 0     
    context.drawImage(image, 0, 0)   
})

Menambahkan Tulisan

Selanjutnya kita akan menambahkan tulisan nama dengan ukuran 36px dan berwarna putih, untuk posisinya bisa disesuaikan dengan design

context.fillStyle = "white";   
context.font = "36px Helvetica";  
context.fillText("Ahmad Taufiq", 230 , 134);

Karena tulisan selanjutnya juga warna putih jadi tidak perlu mengisi fillStyle lagi, kalau ingin merubah warnanya baru kita tulis lagi fillStyle

// context.fillStyle = '#888888' -> kalau ingin merubah warna lagi  
context.font = "32px Inter";  
context.fillText("closa.me/taufiq",230,182);

context.font = "48px Inter";  
context.fillText("Write Article Layouting Flutter", 206 , 406);

Membuat Circle Avatar

Sekarang tinggal menambahkan foto avatarnya, berarti kita perlu menggunakanloadImageuntuk mendapatkan gambarnya

loadImage(`./resource/img/template.png`)
.then(image=>{
  context.drawImage(image, 0, 0)  
  context.fillStyle = "white";  
  context.font = "36px Helvetica";  
  context.fillText("Ahmad Taufiq", 230 , 134);

  context.fillStyle = '#888888'  
  context.font = "32px Inter";  
  context.fillText("closa.me/taufiq",230,182);

  context.font = "48px Inter";  
  context.fillText("Write Article Layouting Flutter", 206 , 406);

  return loadImage("https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png")  
})  
.then(photoUser=>{
  //drawImage(photoUser,sumbuX,sumbuY,width,height)  
  context.drawImage(photoUser,70,80,128,128)

  const buffer = canvas.toBuffer('image/png')  
  fs.writeFileSync('tes.png',buffer)
})

Selanjutnya kita rubah bentuk avatarnya biar menjadi bulat, untuk menjadikan bentuk bulat bisa gunakan arc method .

.then(photoUser=>{  
    let size = 128  
    let midSize = size/2  
    let sumbuX = 70  
    let sumbuY = 80

    context.beginPath()  
    context.arc(sumbuX+midSize,sumbuY+midSize,midSize,0,Math.PI \* 2, true)  
    context.closePath();  
    context.clip()
    context.drawImage(photoUser,sumbuX,sumbuY,size,size)

    const buffer = canvas.toBuffer('image/png')  
    fs.writeFileSync('tes.png',buffer)
})

Jadi hasil akhir gambar yang kita buat seperti ini: