Cara Kompres Gambar di Sisi Klien Menggunakan Javascript

Halo sobat CAD sepertinya saya sudah lama tidak memberikan tutorial untuk Web Development, tapi tenang pada tulisan ini saya akan membagikan sedikit tutorial yang mungkin akan bermanfaat untuk Anda.



Kalian pernah ga sih mengalami gagal upload file atau gambar saat membuat fitur upload? Yang ada dipikiran kalian "pasti ini ukuran filenya kegedean, gimana kalo saya kompres aja".

Namun pada tutorial ini saya akan fokus pada kompres gambar, pada umumnya terdapat dua cara yaitu di Client Side dan Server Side. Tetapi masalahnya jika kita mengkompres di Server Side kita tetap harus mengirimkan ukuran gambar aslinya.

Maka dari itu saya memutuskan untuk melakukan kompres gambar pada sisi klien terlebih dahulu.

Alasan pertama kenapa kalian harus mengkompres dulu di sisi klien adalah agar server kalian tidak menerima beban yang terlalu berat, maka kalian harus melakukan kompres ukuran file aslinya.

Teknik yang dilakukan disini yaitu dengan mengubah sedikit kualitas gambarnya agar ukuran tidak terlalu besar, tapi tenang gambar hasil kompres tidak jauh beda kualitasnya dengan gambar asli.

Disini saya sudah membuat sebuah repository yang isinya code sample untuk melakukan kompres gambar, kalian bisa cek disini.

Jika kalian sudah membuka repository tersebut didalamnya terdapat 3 file yaitu, index.html, script.js, dan JIC.js. JIC.js adalah library yang saya pakai untuk melakukan kompres kualitas dan script.js adalah sample code yang sudah saya buat.

Saya menggunakan FormData untuk melakukan post kepada server agar kita bisa mengirimkan filenya.

Cukup sekian untuk tutorial ini, jika ada yang ingin ditanyakan silahkan langsung saya berkomentar.

Tidak ada komentar untuk "Cara Kompres Gambar di Sisi Klien Menggunakan Javascript"