Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Nodejs menukar saiz imej
Node.js ialah bahasa pengaturcaraan JavaScript popular yang sangat fleksibel dan praktikal serta boleh digunakan untuk membangunkan pelbagai jenis aplikasi pada bahagian belakang. Satu aplikasi universal sedemikian ialah galeri foto dalam talian dan editor gambar. Dalam kes ini, mengubah saiz atau menskala imej secara dinamik adalah tugas yang sangat biasa. Dalam artikel ini, kami akan meneroka cara menggunakan Node.js untuk mengubah saiz imej agar lebih sesuai dengan keperluan aplikasi kami.
Sebelum kita mula, kita perlu memasang beberapa perpustakaan yang diperlukan melalui npm. Kita boleh memasuki direktori akar projek dari terminal dan menjalankan arahan berikut:
$ npm install sharp
sharp ialah modul Node.js yang cekap yang membolehkan kami melakukan pemprosesan pada imej dengan mudah, seperti sebagai pemangkasan, putaran, penskalaan dan operasi lain.
Seterusnya, kami akan menulis kod untuk melaksanakan fungsi zum imej. Mari kita lihat program yang ringkas tetapi berkuasa ini:
const fs = require('fs'); const sharp = require('sharp'); sharp('input.jpg') .resize(200, 200) .toFile('output.jpg', (err, info) => { if (err) console.log(err); console.log(info); });
Di sini kita mula-mula memuatkan fail yang ingin kita ubah saiz (input.jpg) menggunakan modul fs. Kami kemudian menggunakan kaedah resize() daripada modul sharp untuk menentukan saiz imej baharu (di sini kami menukar saiz imej kepada 200x200). Akhir sekali, kami menyimpan fail output dalam output.jpg.
Apabila kita menjalankan program ini, beberapa maklumat akan dicetak dalam output terminal, iaitu seperti berikut:
{ format: 'jpeg', width: 200, height: 200, channels: 3, premultiplied: false, size: 4370 }
Di sini, kita boleh melihat pelbagai atribut imej output, seperti format, lebar, tinggi dll.
Dalam aplikasi sebenar, mungkin perlu mengubah saiz imej dalam kelompok. Menggunakan Node.js, kami boleh memproses sejumlah besar imej dalam masa minimum. Berikut ialah contoh untuk mengubah saiz kumpulan dan mengubah saiz imej:
const fs = require('fs'); const sharp = require('sharp'); const inputFolder = './input/'; const outputFolder = './output/'; const imageSize = 400; fs.readdir(inputFolder, (err, files) => { if (err) console.log(err); files.forEach(file => { sharp(inputFolder + file) .resize(imageSize, imageSize) .toFile(outputFolder + 'resized_' + file, (err, info) => { if (err) console.log(err); console.log(info); }); }); });
Di sini kami mula-mula menentukan folder yang ingin kami ubah saiz dan folder baharu. Kami kemudian membaca semua fail dalam direktori itu dan mengehoskannya ke dalam pelbagai fail. Seterusnya, kami membuat instantiate objek tajam untuk setiap fail dan memanggil kaedah resize() untuk menentukan saiz imej baharu. Akhir sekali, kami menyimpan fail output dalam direktori baharu dan mencetak output ke terminal.
Dalam aplikasi web, saiz semula imej secara dinamik boleh membantu meningkatkan kelajuan dan prestasi aplikasi. Jika aplikasi anda memerlukan pemuatan yang kerap bagi sejumlah besar imej dalam penyemak imbas web, adalah berguna untuk mengubah saiz dan menskalakan imej agar sesuai dengan reka letak dan gaya anda. Ini membolehkan anda memindahkan hanya imej yang anda perlukan dari pelayan atas permintaan, dan bukannya memuat turun imej yang lebih besar. Dalam kes ini, menulis aplikasi menggunakan Node.js boleh membantu anda menyampaikan pengalaman pengguna yang berkualiti tinggi sambil mengekalkan prestasi halaman web yang baik.
Kesimpulan
Dalam artikel ini, kami menyelam lebih mendalam tentang cara menukar saiz imej dengan cepat dan mudah menggunakan Node.js. Dengan menggunakan perpustakaan tajam yang popular, kami boleh mengubah saiz imej dengan mudah dalam masa yang minimum dan meningkatkan kelajuan dan prestasi aplikasi web kami. Kini anda boleh menggunakan teknologi ini dengan mudah dalam aplikasi anda untuk pengalaman pengguna yang lebih baik dan prestasi aplikasi yang lebih baik.
Atas ialah kandungan terperinci Nodejs menukar saiz imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!