lifelong learner — urip iku urup, currently working on accenture.

Upload dan resize gambar dengan sharp dan multer nodejs

1
Degananda.com -

Pada ulasan ini akan membahas bagaimana melakukan upload gambar serta resize terhadap gambar tersebut dengan menggunakan multer dan sharp. Jika anda belum pernah melihat tutorial sebelumnya mengenai upload file dengan multer(tanpa resize) maka disarankan untuk mengecek terlebih dahulu ulasan dibawah ini.

Simple upload file angular & nodejs dengan menggunakan multer

Multer

Multer adalah suatu middleware yang digunakan untuk menghandle multipart/form-data yang dikirimkan client melalui protokol http. Untuk mempermudah menghandle http request(membuat endpoint, send response,dsb) kita menggunakan expressjs. Namun multer tidak dapat memodifikasi file yang telah terupload secara radikal. Multer hanya dapat mengubah nama (rename) dari file tersebut.

Oleh karena itu untuk melakukan perubahan yang “radikal” pada suatu gambar misalkan resize, compress, mengganti format (jpg ke png , png ke jpg, jpg ke webp dan lain sebagainnya) dibutuhkan library lainnya yang memang berfokus kesana. Terdapat beberapa alternatif library nodejs yang dapat melakukan hal tersebut diantarannya adalah

  1. Sharp
  2. Graphicmagick
  3. Imagemagick

Ketiga library diatas jika dilihat dari popularitasnya (berdasarkan star pada github) maka sharp menduduki posisi pertama. Oleh karena itulah disini kami memilih menggunakan sharp karena dukungan komunitas dan popularitasnya cukup besar. Dengan crowd yang cukup banyak ini maka dukungan untuk library ini diharapkan tidak akan berhenti.

Sharp

Sharp JS adalah library untuk memanipulasi file berupa gambar (image processing). Sharp dibangun dengan menggunakan library libvips yang berfungsi untuk memproses gambar – gambar 2D. Beberapa hal yang ditawarkan oleh sharp yakni  :

  1. Resize image secara penuh , misalkan dari 500×400 menjad 300×300
  2. Resize parsial (Crop). Image dapat dicrop sesuai dengan ukuran dan posisi yang kita inginkan
  3. Konversi format gambar jpg, png, webp dan tiff.
  4. Manipulasi warna (color manipulation), misalkan menjadikan hitam putih atau grayscale.
  5. Compositing image. Contohnya ketika kita ingin menumpuk gambar tersebut dengan gambar lain. Implementasinnya adalah seperti membuat twibbon pada gambar.

dari kelima fitur yang ditawarkan oleh sharp ulasan ini akan fokus membahas untuk melakukan resize image dan bagaimana cara mengambil input file dari multer yang kemudian dapat kita gunakan pada sharp untuk melakukan processing gambar.

What will we build

Kita akan membuat endpoint untuk mengupload file gambar , melakukan filter (pada sisi server) untuk hanya menerima file bertipe (jpg dan png saja) dan melakukan resize terhadap gambar tersebut. Sisi client tidak akan dibahas pada ulasan ini karena sudah tercover pada ulasan sebelum ini.

Implemenetasi

1. Setup

langsung saja pertama kita harus meninstall beberapa package yang dibutuhkan. Perintah yang digunakana adalah (kami berasumsi anda sudah menginisiasi project node di folder tertentu dengan npm init)

npm install express multer sharp cors --save

cors digunakan agar kita dapat mengupload file dari client ke server karena membutuhkan header cross origin. Daripada melakukan seting secara manual pada node , cukup menggunakan library cors semuannya akan dihandle dengan mudah (oleh library cors).

2. Inisiasi

Melakukan inisiasi untuk ke empat library yang kita telah install tadi.

var express = require('express');
var multer = require('multer');
var upload = multer({ dest : 'uploads/'});
var app = express();
var cors = require('cors');
var sharp = require('sharp');
/* Cross Origin */
app.use(cors());

dest berarti destination atau lokasi dari direktori penyimpanan file hasil upload. Pastikan direktori tersebut rewriteable oleh server. Jika tidak rewriteable atau ada masalah mengenai permisson gunakan perintah

chmod 755 nama_folder

2. Membuat endpoint dan resize dengan sharp

buat endpoint dengan path “/fileupload” dan gunakan upload.single() sebagai parameter. Upload single ini maksutnya adalah hanya akan terdapat satu file yang diupload oleh client (tidak menerima multiple upload). Untuk multiple upload dapat menggunakan .upload.field() yang nantinnya akan diterima berupa array.

app.post('/fileupload', upload.single('photo'), function(req,res){
    sharp('./'+req.file.path).toBuffer().then(
        (data) => {
            sharp(data).resize(150).toFile('./'+req.file.path, (err,info) => {
                console.log('oke');
            });
        }
    ).catch(
        (err) => {
            console.log(err);
        }
    )
    res.send("oke");
});

app.listen(4156, function(){
    console.log('app running');
})

Sharp memiliki dua buah input yang dapat kita gunakan. Pertama adalah path dari suatu file. Kedua yaitu buffer dari file tersebut. Pada kode diatas mekanisme kami adalah

  1. Processing gambar / image dilakukan setelah file terupload. Pertimbangannya adalah untuk menghemat memori server jika processing gambar dilakukan pada saat file tersebut sedang diupload.
    NB : ini bukanlah best practice sehingga mekanisme / urutan proses masih dapat diperdebatkan
  2. Input yang digunakan adalah buffer dari file yang telah terupload (toBuffer()).
  3. Setelah mendapatkan buffer dari file yang sudah terupload maka gambar akan diproses (resize)
  4. Setelah gambar di resize maka akan diwrite / dikonversi menjadi file baru dengan nama yang sama.

itulah empat langkah yang menjelaskan mengenai upload gambar dan resize dengan menggunakan multer dan sharp. Endpoint tersebut dapat diakses dengan http post dan jangan lupa menggunakan multipart/form-data atau jika anda menggunakan angular dapat disimak ulasan sebelum ini mengenai upload file dengan angular dan multer(nodejs).

3. Filter, konversi dan kompresi gambar

Agar ulasan tidak semakin panjang(which is pasti sangat mengganu bagi sebagian pembaca) maka akan dilanjutkan pada part 2 untuk proses konversi dan kompresi gambar.

Upload dan filter file dengan multer nodejs

Demo

Misalkan kita akan mengupload gambar dengan ukuran 680×292

selanjutnya kita akan upload

maka gambar akan teresize sesuai dengan spesifikasi sharp kita

  • edi setiawan

    sangat membantu