10 Library JavaScript Untuk Manipulasi Gambar

10 library javascript untuk manipulasi gambar

Kompresi gambar, pemrosesan, pengubahan ukuran, dan lainnya.

Bekerja dengan gambar dalam JavaScript bisa sangat sulit dan rumit. Untungnya, ada sejumlah library yang dapat membuatnya menjadi lebih mudah. Di bawah ini adalah JS library favorit dalam berbagai kategori.

1. Pica

Plugin ini membantu Anda mengurangi ukuran unggahan untuk gambar besar sehingga menghemat waktu unggah. Memungkinkan Anda untuk mengubah ukuran gambar di browser tanpa pixelation dan prosesnya cukup cepat. Pica memilih secara otomatis teknologi terbaik yang tersedia, web assembly, createImageBitmap, dan Pure JS.

Github | Demo

2. Lena.js

Library ini berukuran sangat kecil tetapi memiliki sekitar 22 filter gambar yang cukup keren untuk digunakan. Anda juga dapat membuat dan menambahkan filter baru ke repo Github.

Github | Demo | Tutorial

3. Compressor.js

Ini adalah kompresor gambar JS sederhana yang menggunakan API canvas.toBlob bawaan Browser untuk menangani kompresi gambar. Memungkinkan Anda untuk mengatur kualitas output kompresi mulai dari 0 hingga 1.

Github | Demo

4. Fabric.js

Fabric.js mempermudah Anda untuk membuat bentuk sederhana seperti persegi panjang, lingkaran, segitiga, dan poligon atau bentuk yang lebih rumit yang terdiri dari banyak garis, kedalam elemen HTML <canvas> dilaman web menggunakan JavaScript. Sehingga Anda dapat memanipulasi ukuran, posisi, dan rotasi objek-objek ini dengan mouse.

Anda dapat pula mengubah beberapa atribut dari objek-objek ini seperti warna, transparansi, posisi kedalaman pada halaman web atau memilih grup objek-objek ini menggunakan library Fabric.js. Juga dapat pula mengonversi SVG ke JavaScript untuk diletakkan di elemen <canvas>.

Github | Demo | Tutorial

5. Blurify

Ini adalah library kecil (~ 2kb) untuk mengaburkan (blur) gambar, dengan dukungan downgrade dari mode css ke mode canvas. Plugin ini berfungsi dalam tiga mode:

• css: menggunakan filter property(default).
• canvas: menggunakan canvas export base64.
• auto: mengggunakan css mode terlebih dahulu, ataupun otomatis beralih ke canvas mode.

Github | Demo

6. Merge Images

Library ini memungkinkan Anda untuk menyusun gambar dengan mudah tanpa harus berurusan dengan canvas, terutama jika Anda hanya membutuhkan konteks canvas untuk melakukan sesuatu yang relatif sederhana seperti menggabungkan beberapa gambar.

Github

7. Cropper.js

Plugin ini adalah cropper gambar JavaScript sederhana yang memungkinkan Anda untuk memotong, memutar, skala, memperbesar gambar secara interaktif. Juga memungkinkan pengaturan rasio aspek.

Github | Demo

8. CamanJS

Ini adalah library manipulasi canvas untuk Javascript. Ini adalah kombinasi dari antarmuka yang mudah digunakan dengan teknik pengeditan gambar / canvas yang canggih dan efisien.

Sangat mudah untuk meningkatkan dengan filter dan plugin baru, dengan beragam fungsi pengeditan gambar yang terus berkembang. Library ini independen dan berfungsi baik di NodeJS dan browser.

Anda dapat memilih satu set filter preset atau mengubah properti seperti kecerahan, kontras, saturasi secara manual untuk mendapatkan output yang diinginkan.

Github | Demo | Website

9. MarvinJ

MarvinJ adalah framework pemrosesan gambar javascript murni yang berasal dari Marvin Framework. MarvinJ mudah dan kuat digunakan untuk berbagai aplikasi pemrosesan gambar.

Marvin menyediakan banyak algoritma untuk memanipulasi warna dan tampilan. Marvin juga mendeteksi fitur secara otomatis. Kemampuan untuk bekerja dengan fitur gambar dasar seperti tepi, sudut dan bentuk sangat penting untuk pemrosesan gambar.

Plugin ini membantu mendeteksi dan menganalisa sudut-sudut objek untuk menentukan posisi objek utama dalam layar. Hingga dapat memotong objek secara otomatis.

Github | Website

10. Grade

Library JS ini menghasilkan gradien pelengkap yang dihasilkan dari 2 warna dominan teratas dalam gambar yang disediakan. Ini memungkinkan website Anda untuk mengisi div dengan gradien yang cocok yang berasal dari gambar Anda dan mudah digunakan.

HTML :

<!--the gradients will be applied to these outer divs, as background-images-->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
    <img src="./samples/good-dinosaur.jpg" alt="" />
</div>

JavaScript:

<script src="path/to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function(){
        /*
            A NodeList of all your image containers (Or a single Node).
            The library will locate an <img /> within each
            container to create the gradient from.
         */
        Grade(document.querySelectorAll('.gradient-wrap'))
    })
</script>

Github | Demo

Sekian dan terimakasih sudah membaca tulisan singkat ini, selamat mencoba dan bagikan jika dirasa bermanfaat.