Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas

Menyimpan Hari - Mengendalikan Imej Besar dalam Pelayar" />

Seorang pelanggan memuat naik 28 imej, setiap satu sekitar 5800 x 9500 piksel dan saiz 28 MB. Apabila cuba memaparkan imej ini dalam penyemak imbas, keseluruhan tab membeku - malah enggan ditutup - selama 10 minit yang kukuh. Dan ini adalah pada mesin mewah dengan CPU Ryzen 9 dan GPU RTX 4080, bukan komputer riba kecil.

Inilah Situasinya

Dalam CMS (Grace Web) kami, apabila pentadbir memuat naik fail - sama ada gambar atau video - kami memaparkannya serta-merta selepas muat naik selesai. Ia bagus untuk UX - ia mengesahkan muat naik berjaya, mereka memuat naik perkara yang mereka mahu dan ia menunjukkan responsif UI untuk rasa yang lebih baik.

Tetapi dengan imej besar ini, penyemak imbas hampir tidak dapat memaparkannya dan terhenti.

Adalah penting untuk ambil perhatian bahawa masalahnya bukan pada muat naik itu sendiri tetapi dengan memaparkan imej besar ini. Memaparkan 28 imej besar secara serentak dan satu demi satu adalah terlalu banyak. Walaupun pada halaman kosong, ia hanya... tidak.

Mengapa Ini Berlaku (Selam Dalam)?

Bila-bila masa anda memaparkan gambar dalam tag, penyemak imbas melalui keseluruhan proses yang menggunakan CPU, RAM, GPU, dan kadangkala pemacu - kadangkala melalui proses ini beberapa kali sebelum gambar dipaparkan semasa pemuatan imej dan pengiraan semula reka letak. Ia melalui pengiraan piksel, pemindahan data antara perkakasan, algoritma interpolasi, dsb. Untuk penyemak imbas, ia merupakan proses yang penting.

Penyelesaian Brainstormed

Kami mempertimbangkan beberapa pilihan:

1. Ubah Saiz Serta-merta Selepas Muat Naik dan Paparkan Imej Kecil
   • Isu: Saiz semula mungkin mengambil masa terlalu lama dan tidak dijamin untuk serta-merta, terutamanya jika baris gilir saiz semula tidak kosong - mengakibatkan sistem tidak responsif.
2. Semak Saiz Fail dan Paparkan Hanya Nama Mereka untuk Fail Besar
   • Isu: Ini akan menjejaskan pengalaman pengguna, terutamanya bagi mereka yang memerlukan kawalan dan pemeriksaan yang lebih besar terhadap mana-mana bahan media (secara kebetulan, mereka selalunya sama dengan fail besar).

Kedua-dua penyelesaian ini dirasakan tidak boleh digunakan. Kami tidak mahu mengehadkan keupayaan pentadbir kami untuk memuat naik apa sahaja yang mereka perlukan, dan kami juga tidak mahu berkompromi dengan pengalaman pengguna.

Mentol lampu! Menggunakan

Saya teringat bahawa elemen menggunakan GPU dengan lebih berkesan untuk menghasilkan kandungan. Baru-baru ini saya melihat seseorang membina permainan kompleks yang senyap menggunakan JavaScript dan , jadi ia secara teorinya harus mengendalikan imej besar dengan lebih cekap daripada .

Menguji Teori

Kami memutuskan untuk menggantikan elemen dengan untuk memaparkan imej yang dimuat naik. Berikut ialah coretan kod yang kami gunakan:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
  // Resize canvas to desired size (for preview)
  canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
  canvas.height = 80;
  // Draw the image onto the canvas, resizing it in the process
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
  file_div.appendChild(canvas);
};




<h3>
  
  
  Hasilnya
</h3>

<p>Peningkatan adalah serta-merta dan dramatik! Penyemak imbas bukan sahaja mengendalikan 28 imej besar tanpa sebarang gangguan, tetapi kami juga meneruskannya dengan memuatkan <strong>imej 120 MB</strong> berukuran <strong>28,000 x 17,000 piksel</strong>, dan ia masih berfungsi seolah-olah ia ialah ikon kecil.</p>

<h3>
  
  
  Di Mana Perbezaannya?
</h3>

<p>Menggunakan <kanvas> elemen, lukisan itu terletak sepenuhnya di tangan GPU, dan cip tersebut benar-benar dibuat untuk tugasan ini.</kanvas></p>

<ul>
<li>
<img  alt="Bagaimana  Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas" > masih cuba untuk memaparkan 28,000 * 17,000 = 476,000,000 piksel.</li>
<li><kanvas> hanya melukis 80 * 80 = 6,400 piksel.</kanvas></li>
</ul>

<p>Dengan mengubah saiz imej dalam <kanvas> kepada saiz pratonton yang kecil, kami mengurangkan jumlah data yang perlu diproses oleh penyemak imbas secara drastik - menghantar ratusan juta piksel ke GPU dan mendapatkan kembali beribu-ribu, sangat bagus, bukan?</kanvas></p>

<h2>
  
  
  Langkah Seterusnya
</h2>

<p>Memandangkan kejayaan ini, kami kini mempertimbangkan untuk menggantikan <img  alt="Bagaimana  Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas" > dengan <kanvas> di bahagian lain aplikasi kami, terutamanya dalam skrin pentadbir yang memaparkan sekitar 250 imej sekaligus. Walaupun imej ini telah diubah saiznya dengan betul, kami ingin tahu sama ada menggunakan <kanvas> boleh menawarkan prestasi yang lebih baik.</kanvas></kanvas></p>

<p>Kami akan menjalankan ujian dan penanda aras untuk mengukur sebarang peningkatan prestasi. Saya pasti akan berkongsi penemuan kami dalam artikel akan datang.</p>

<h2>
  
  
  Kaveat Penting
</h2>

<p>Semasa menggunakan <kanvas> berkesan untuk kes penggunaan khusus kami, saya mesti ambil perhatian bahawa anda <strong>tidak boleh menggunakan <kanvas> untuk memaparkan imej pada bahagian tapak web yang menghadap awam</kanvas></strong>. Inilah sebabnya:</kanvas></p>
<ul>
<li>
<strong>Kebolehaksesan</strong>: <img  alt="Bagaimana  Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas" > elemen boleh dibaca oleh pembaca skrin, membantu pengguna cacat penglihatan.</li>
<li>
<strong>SEO</strong>: Enjin carian mengindeks imej daripada <img  alt="Bagaimana  Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas" > teg, yang boleh meningkatkan keterlihatan tapak anda. (Dengan cara yang sama, pengikis latihan AI juga "mengindeks" imej. Nah, apa yang boleh anda lakukan...)</li>
<li>
<img  alt="Bagaimana  Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas" > dengan <gambar> boleh digunakan untuk mengesan ketumpatan piksel secara automatik dan menunjukkan gambar yang lebih besar atau lebih kecil untuk kesesuaian yang sempurna—<kanvas> tidak boleh. Saya menulis artikel tentang cara membina .</kanvas></gambar>
</li> anda
</ul>

<p>Untuk tapak web awam, sebaiknya ubah saiz imej pada bahagian pelayan dengan betul sebelum menyampaikannya kepada pengguna. Jika anda berminat dengan cara mengautomasikan saiz semula dan pengoptimuman imej, saya menulis artikel mengenai topik itu yang mungkin anda rasa berguna.</p>

<h2>
  
  
  Kesimpulan
</h2>

<p><strong>Saya suka pengoptimuman!</strong> Walaupun kami bergerak ke arah perkakasan berprestasi tinggi tempatan setiap hari, dengan mengoptimumkan - walaupun "ia bagus, tetapi boleh menjadi lebih baik" - kami boleh menghalang isu seperti ini daripada bermula.</p>

<p>Pendekatan ini bukan standard. Dan saya tidak begitu mengambil berat tentang piawaian. Mereka sering dianggap sebagai peraturan yang sukar, tetapi ia hanya garis panduan. Penyelesaian ini sesuai. Kami tidak mempunyai pelanggan dengan peranti purba tanpa <kanvas> sokongan. Jadi, walaupun kini kami mempunyai lebih banyak kod untuk diurus, pelbagai cara untuk memaparkan gambar, ia sangat sesuai dan itulah yang penting!</kanvas></p>

<p><strong>Adakah anda mempunyai pengalaman yang serupa? Bagaimana anda mengendalikannya? Jangan ragu untuk berkongsi pengalaman anda atau bertanya soalan dalam ulasan di bawah!</strong></p>


          </div>

            
        

Atas ialah kandungan terperinci Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!