Pratonton imej sebaris dengan fungsi tajam, blurhash, dan lambda

Laman web dan pemuatan aplikasi web sering menderita dari kandungan reflow: Imej beban selepas kandungan sekitarnya, menyebabkan pergeseran bergelora dalam susun atur. Pengalaman pengguna yang mengecewakan ini dapat dikurangkan. Walaupun ketegangan React menawarkan penyelesaian, ia mengorbankan prestasi dengan melambatkan semua kandungan sehingga imej dimuatkan sepenuhnya. Pendekatan yang lebih baik? Memaparkan pratonton imej kabur dengan serta-merta, digantikan dengan lancar oleh imej resolusi tinggi apabila dimuatkan.

JPEG Progresif mungkin kelihatan seperti jawapannya, menawarkan penyampaian awal kabur diikuti oleh penghalusan secara beransur -ansur. Walau bagaimanapun, walaupun JPEG progresif memerlukan menunggu data awal, yang membawa kepada reflow kandungan awal yang sama.

Artikel ini meneroka dua kaedah alternatif: mewujudkan pratonton kabur tersuai dan memanfaatkan blurhash.

Perpustakaan yang digunakan:

• Jimp (versi 0.16.1)
• BlurHash (versi 1.1.5)
• Sharp (versi 0.30.3)

Kaedah 1: Menjana pratonton tersuai

Daripada bergantung pada URL imej, kita boleh membenamkan pratonton imej yang berkualiti tinggi, berkualiti rendah, langsung ke JavaScript kami. Walaupun pengekodan BASE64 biasanya membawa kepada saiz fail yang besar, pratonton kecil, kabur tetap boleh diurus. Pratonton ini dipaparkan dengan serta-merta, digantikan oleh imej resolusi tinggi sekali dimuatkan.

Fungsi resizeImage berikut (dipermudahkan untuk keringkasan) menggunakan jimp untuk membuat pratonton kabur:

 Fungsi resizeImage (src, maxwidth, kualiti) {
  Kembalikan janji baru (res => {
    Jimp.READ (src, fungsi async (err, imej) {
      jika (image.bitmap.width> maxwidth) {
        Image.Resize (MaxWidth, Jimp.Auto);
      }
      image.quality (kualiti);

      const previewImage = image.clone ();
      previewImage.quality (25) .blur (8);
      const pratonton = menunggu previewImage.getBase64Async (previewImage.getMime ());

      res ({status: "kejayaan", imej, pratonton});
    });
  });
}

Pratonton ini, walaupun tidak kecil, jauh lebih kecil daripada imej asal. Kod React yang sepadan (dipermudahkan) memaparkan pratonton dan menukarnya dengan imej resolusi penuh:

 // ... reaksi kod komponen ...

Kaedah 2: Meningkatkan dengan Blurhash (dan alternatif yang lebih baik)

Walaupun pada mulanya dicadangkan, blurhash, sambil menghasilkan pratonton yang sangat kecil melalui pengekodan Base83, memerlukan javascript sisi klien dan<canvas></canvas> tags, menjadikannya kurang sesuai untuk rangka kerja pelayan (SSR) seperti Next.js dan Sveltekit.

Alternatif yang unggul adalah pemegang plai . Ia menggunakan tajam, yang memerlukan pertimbangan pemasangan lambda yang sama seperti yang diterangkan kemudian, tetapi menghasilkan pratonton Base64 kecil. Dengan menjejaki dimensi imej dan memohon penapis kabur, ia mencapai hasil yang setanding dengan blurhash, sementara menjadi mesra SSR sepenuhnya. Pratonton boleh dipaparkan di bawah imej sebenar menggunakan CSS, memberikan peralihan yang lancar.

Pelaksanaan Blurhash Asal (kurang disyorkan):

Perpustakaan Sharp boleh menjana pratonton blurhash. Untuk penggunaan AWS Lambda, gunakan arahan pemasangan ini:

 "Pasang-Deps": "NPM I && Sharp_IGNORE_GLOBAL_LIBVIPS = 1 npm i --Arch = x64 --Platform = Linux Sharp"

Fungsi berikut menghasilkan pratonton blurhash:

 import {encode, isblurhashvalid} dari "blurhash";
const Sharp = memerlukan ("tajam");

Eksport Fungsi Async GetBlurHashPreview (SRC) {
  // ... (pemprosesan tajam dan pengekodan blurhash) ...
}

Komponen PreviewCanvas kemudian menguraikan dan menjadikan pratonton blurhash menggunakan API kanvas.

Kesimpulan:

Mencegah kandungan reflow semasa pemuatan imej meningkatkan pengalaman pengguna. Menjana pratonton kabur tersuai atau menggunakan plaiceholder menawarkan keseimbangan antara prestasi dan kelancaran visual, memberikan alternatif yang unggul untuk hanya melambatkan rendering kandungan sehingga semua imej dimuatkan. Pilih kaedah yang paling sesuai dengan keperluan dan kerangka projek anda.

Atas ialah kandungan terperinci Pratonton imej sebaris dengan fungsi tajam, blurhash, dan lambda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!