10 library javascript untuk manipulasi gambar

Kompresi gambar, pemrosesan, pengubahan ukuran, dan lainnya.

10 library javascript untuk manipulasi gambar
10 library javascript untuk manipulasi gambar

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

10 library javascript untuk manipulasi gambar Pica
Pica

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

10 library javascript untuk manipulasi gambar Lena.js
Lena.js

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

10 library javascript untuk manipulasi gambar Compressor.js
compressor.js

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

10 library javascript untuk manipulasi gambar Fabric.js
fabric.js

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:

Github | Demo

Library JavacScript Blurify
blurify

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

Library JavacScript Merge Images
merge images

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

Library JavacScript Cropper.js
cropper.js

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

Library JavacScript CamanJS
camanjs

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

Library JavacScript MarvinJ
MarvinJ

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

Library JavacScript Grade
grade

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

Tinggalkan Balasan

Open WA
Bantuan?
🧑🏻‍💻 DesainerHub CS
Hello 👋
Need Help?