Cara Menambahkan Background Pada GIF Menggunakan Sharp.js

Pernah ingin menambahkan background pada sebuah GIF dengan menggunakan module Sharp.js? Saya juga. Setelah saya riset akhirnya saya ketemu caranya. Mungkin ada cara lain, tapi cara ini sudah cukup dan sesuai untuk saya. Berikut ini cara yang saya gunakan untuk menambahkan background pada GIF dengan menggunakan Sharp.js.

Persiapan

Module Sharp.js minimal versi 0.30.0, karena di versi ini Sharp.js sudah memiliki support built-in untuk output GIF, jadi tidak perlu module atau library tambahan. Untuk meng-install Sharp.js versi 0.30.0 dengan menggunakan npm, gunakan perintah:

npm install sharp@0.30.0

Atau install saja versi terbaru dengan menggunakan perintah:

npm install sharp@latest

GIF yang akan dipakai pada tutorial ini adalah GIF dengan dimensi 512x160px:

Gambar yang akan dipakai sebagai background dari GIF di atas adalah gambar checkerboard yang biasa ada di PNG dengan dimensi 512x512px:

Menambahkan background pada GIF

Cara paling umum menyatukan gambar satu sama lain pada Sharp.js adalah dengan menggunakan composite. Untuk meng-composite dua gambar, gambar yang akan ditimpa harus lebih besar atau sama dimensinya dengan gambar yang akan menimpa. Dalam kasus ini, dimensi background harus lebih besar atau sama dengan dimensi GIF-nya. karena dimensi GIF yang digunakan tidak sama, kita resize terlebih dahulu GIF-nya dengan cara:

await sharp(gifInput, { animated: true })
.resize(
  { width: BACKGROUND_WIDTH, height: BACKGROUND_HEIGHT, fit: "contain", filter: "nearest" }
)
.toFile("resized-output.gif")

Kalau secara urutan, biasanya background duluan kan di paling awal kemudian di-composite dengan GIF-nya. Tapi, kalau dengan cara ini biasanya dimensi GIF akan jauh berkali lipat dibanding dengan backgroundnya karena GIF ini meskipun secara dimensi sama dengan background, aslinya heightnya dikali lagi dengan jumlah framenya (kalau tidak salah istilahnya anggap saja sama dengan film roll).

Karena itu, saya balik urutannya, jadi GIF-nya yang paling awal kemudian di-composite dengan backgroundnya. Jadi bakalan ketimpa dong GIF-nya? Normalnya iya. Karena dari itu, kita juga harus menambahkan beberapa parameter untuk mengatasi hal itu. Kurang lebih seperti ini solusinya:

await (gifInput, { animated: true })
.composite(
  { input: backgroundInput, blend: "dest-over", tile: true }
)
.toFile("composited-output.gif")

Jadi, pertama backgroundya kita tambahkan parameter yang namanya blend. Secara default, blend ini memiliki value "over" yang berfungsi untuk menimpa gambar kedua (background) ke atas gambar pertama (GIF). Karena kita melakukannya terbalik, jadi valuenya kita ubah jadi blend: "dest-over" yang berarti menimpa gambar pertama (GIF) ke atas gambar kedua (background).

Parameter kedua adalah parameter yang namanya tile. Secara default, tile bernilai false. Jika kita ubah menjadi true, tile akan mengulang gambar kedua (background) sepanjang gambar pertama (GIF) sesuai dengan parameter gravity (default gravity: "centre"). Dengan parameter tile: true ini, memungkinkan dimensi background sama dengan GIF-nya.

Berikut ini hasil akhir setelah kita berhasil menggabungkan GIF dengan background statiknya:

Selamat! Kamu telah berhasil menambahkan background pada GIF-mu. Kalau kamu suka blog ini, bagikan ke teman-temanmu ya.

Link referensi

• https://sharp.pixelplumbing.com/changelog/#v0300---1st-february-2022
• https://www.libvips.org/API/current/libvips-conversion.html#VipsBlendMode
• https://www.cairographics.org/operators/
• https://sharp.pixelplumbing.com/api-composite/