Bisakah kita melakukan pemrosesan gambar dalam javascript?

adalah Node berkinerja tinggi. perpustakaan pemrosesan gambar js untuk mengubah ukuran format gambar yang berbeda seperti JPEG, PNG, WebP, AVIF, SVG, dan TIFF. Kasus penggunaan umum untuk Node. modul js adalah untuk mengonversi gambar besar dalam format standar menjadi gambar yang lebih kecil dan ramah web

Sharp hanya berguna jika Anda ingin mengubah ukuran file raksasa atau beragamnya. Sebaliknya, jika Anda hanya ingin mengubah ukuran satu gambar kecil, sebaiknya Anda tidak menggunakannya. Sebaliknya, HTML biasa dan JavaScript vanilla akan lebih bermanfaat. Sharp memanfaatkan sepenuhnya beberapa inti CPU dan cache L1/L2/L3, memungkinkan Anda untuk mengubah ukuran dan mengompres gambar Anda jauh lebih cepat

Kasus penggunaan

Saya menggunakannya untuk mengubah ukuran seluruh Koleksi NFT dengan ukuran lebih dari 80Gb, yang setelah kompresi keluar sekitar 10Gb. Jadi sekali lagi, jika Anda ingin menggunakannya untuk mengubah ukuran beberapa gambar besar, maka ini adalah pilihan terbaik untuk Anda - Anda akan melakukannya dengan cara tercepat dan paling efisien

Contoh

Anda dapat menginstal perpustakaan ini dengan menggunakan perintah di bawah ini

npm install sharp

Ini adalah bagaimana Anda mengubah ukuran gambar menggunakan sharp

const sharp = require('sharp');
const fs = require('fs');

sharp('yellow.png')
    .rotate(180)
    .resize(200)
    .toBuffer()
    .then( data => {
        fs.writeFileSync('yellow.png', data);
    })
    .catch( err => {
        console.log(err);
    });

Keruntuhan. js

Keruntuhan. js adalah pustaka JavaScript populer lainnya untuk manipulasi gambar. Anda dapat menggunakannya untuk memotong gambar Anda dengan segala cara yang memungkinkan, mengubah rasio aspek, memutar, memperbesar, dan bekerja dengan data kanvas. Keruntuhan. js adalah pilihan yang tepat untuk memotong tanpa fitur tambahan

Gunakan Kasus

Anda dapat menggunakan API fleksibelnya untuk membuat UI pemotongan gambar kustom di aplikasi web Anda yang memungkinkan pengguna menyesuaikan foto dengan ukuran dan rasio aspek yang benar. Ini akan lebih efisien karena hampir tidak memerlukan apa pun, tidak memiliki fitur yang tidak berguna, dan sangat dioptimalkan untuk pemangkasan

Contoh

Perpustakaan ini dapat diinstal dengan perintah berikut

npm install cropperjs

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

Lihat Pemotong. demo js, ​​klik properti apa pun yang ingin Anda terapkan ke gambar Anda dan lihat hasilnya secara instan

Untuk panduan mendalam tentang cara menambahkan pemotongan gambar ke aplikasi React Anda, lihat panduan kami tentang penggunaan react-image-crop

Gabungkan Gambar

Bekerja dengan kanvas bisa sedikit membosankan, terutama ketika Anda membutuhkan konteks kanvas untuk melakukan hal-hal yang relatif sederhana seperti menggabungkan beberapa gambar. Gabung Gambar mengabstraksi semua tugas berulang menjadi panggilan fungsi sederhana. Ini adalah pembungkus di sekitar Canvas API, mengabstraksikan fungsi tingkat rendahnya, yang membuat tugas khusus ini jauh lebih mudah. Anda juga dapat membuat parameter seperti pemosisian, opasitas, dan beberapa lainnya. Anda dapat menemukannya di dokumen di GitHub

Kasus penggunaan

Ini adalah perpustakaan berharga yang dapat membantu beberapa tugas. Misalnya, Anda dapat membuat Koleksi NFT tempat Anda dapat menggabungkan semua komponen untuk memiliki rangkaian variasi yang lengkap. Atau Anda dapat menemukan pustaka ini berguna untuk penggunaan pribadi, misalnya menggabungkan beberapa gambar berbeda untuk menghasilkan kolase

Contoh

Instal perpustakaan itu sendiri

npm install --save merge-images

Kemudian Anda dapat menggunakan kode ini untuk menghasilkan gambar sederhana

//write this inside of your javascript file

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);

//And that would update the img element to show this image:

Di sini, saya menggunakannya untuk menggabungkan beberapa komponen untuk membuat variasi akhir (di sini saya menggunakan Latar Belakang, Karakter, Tanduk, Emosi, dan Aksesori)

Tampak Sama

LooksSame adalah perpustakaan untuk membandingkan gambar. Jika dua gambar yang Anda unggah adalah duplikat, perpustakaan akan memberi tahu Anda. Yang harus Anda lakukan adalah memberikan tautan ke gambar yang ingin Anda bandingkan. LooksSame bukan hanya pustaka manipulasi gambar, tetapi berguna untuk tujuan pengujian

Kasus penggunaan

Anda dapat menggunakan perpustakaan ini dan menulis kode untuk otomatisasi dan siklus berulang yang mencari direktori dan membandingkan setiap pasangan gambar Anda untuk duplikat. Selain itu, Anda juga dapat menghapus duplikat ini dan mengotomatiskan proses ini. Ini adalah perpustakaan yang luar biasa jika Anda terus-menerus bekerja dengan algoritme ML yang menyertakan gambar dalam jumlah besar

Contoh

Untuk mulai membandingkan gambar, Anda hanya perlu menginstalnya dengan menggunakan perintah ini

npm i looks-same

Di sini, Anda dapat melihat cara menguji pustaka ini dengan Jest

var looksSame = require('looks-same');

//Parameters can be paths to files or buffer with compressed png image

test('image1 and image2 are the same', async () => {
	expect(looksSame('image1.png', 'image2.png')).toBe(true);
});

//Result will be "image1 and image2 are the same" if they are the same

Ramping

Jimp adalah singkatan dari Program Manipulasi Gambar JavaScript, yang memungkinkan Anda mengedit gambar dengan hampir semua cara yang memungkinkan. Dengannya, Anda dapat membalikkan gambar Anda, menambahkan beberapa teks, mengubah ukuran, menggunakan pikselasi, mengkloning gambar, memburamkannya, membalikkan warna, dan beberapa fitur keren lainnya yang akan meningkatkan kemampuan manipulasi gambar aplikasi Anda

Kasus penggunaan

Dengan Jimp, Anda dapat membangun aplikasi web tempat Anda dapat mengedit dan memanipulasi gambar dengan hampir semua cara yang memungkinkan. Memotong, mengubah ukuran, memutar, dan memfilter fitur memungkinkan Anda membuat editor foto sendiri dan menambahkan antarmuka di atasnya. Untuk merampingkan proses ini, Anda dapat mencoba PhotoEditor SDK (PE. SDK). pe. SDK akan memberi Anda antarmuka pengguna yang dipoles dan fitur pengeditan foto, sehingga Anda dapat fokus pada aplikasi yang sedang Anda bangun

Contoh

Inilah kode JavaScript untuk mencoba perpustakaan yang luar biasa ini. Ada fungsi async di mana Anda dapat melihat banyak jenis properti yang dapat Anda ubah dengan mudah. Seperti Tambahkan Teks, Ubah Ukuran Gambar, Blur Gambar, dll. Untuk menggunakan setidaknya satu dari mereka, Anda hanya perlu menghapus bagian yang Anda perlukan, dan program Anda siap dijalankan

// Import dependencies
const Jimp = require("jimp");

(async function () {

    // Read the image
    const image = await Jimp.read("images/shapes.png"); // <http://www.example.com/path/to/lenna.jpg>

    // // Add text
    //  const font = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE); // bitmap fonts
    //  image.print(font, 0, 0, 'Hello world!'); // <https://github.com/libgdx/libgdx/wiki/Hiero>

    //  // Resize the image 
    //  // Resize the image to 250 x 250
    //  image.resize(250, 250);

    //  // Resize the height to 250 and scale the width accordingly
    //  image.resize(Jimp.AUTO, 250);

    //  // Resize the width to 250 and scale the height accordingly
    //  image.resize(250, Jimp.AUTO);

    //  // Add a sepia wash to the image
    //  image.sepia();

    //  // Pixelation 
    //  image.pixelate(5);
    //  image.pixelate(5, 50, 50, 190, 200); pixe,x, y, w, h 

    //  // Clone
    //  const image2 = image.clone();

    //  // Blur the image
    //  image.gaussian(1);
    //  image.blur(1);

    //  // Inverts the image
    //  image.invert(); 

    //  // Set the brightness
    //  image.brightness( 0.5 ); // -1 to +1

    //  // Resize the image
    //  image.resize(256, 256);

    //  // Set the quality
    //  image.quality(100);

    //  // Convert to grayscale
    //  image.greyscale();

    // Save the image
    image.write("images/edited-shapes.png"); // writeAsync

})();

PS. Jangan lupa untuk menghapus komentar pada efek yang ingin Anda gunakan dan menyimpan file setelahnya. . )

Seperti yang Anda lihat di sini, saya memburamkan semuanya dan membalikkan warna untuk gambar sebelumnya yang saya tunjukkan, mendapatkan hasil sebagai berikut

Itu dia. Sekarang Anda tahu perbedaan antara lima pustaka manipulasi gambar paling populer untuk JavaScript. Beberapa di antaranya hanya berguna untuk satu tugas, seperti mengubah ukuran gambar - yang lainnya dapat melakukan banyak tugas sekaligus dan membantu Anda dengan lebih banyak proses. Anda juga telah bertemu dengan PE. SDK untuk bekerja lebih cerdas dan menghemat waktu membangun solusi pengeditan foto, dan fokus membangun produk hebat Anda

Bagaimana cara bekerja dengan gambar dalam JavaScript?

Apakah Nodejs cocok untuk pemrosesan gambar?

Bisakah JavaScript mengubah gambar?

Apa itu gambar () dalam JavaScript?