Rumah hujung hadapan web tutorial js Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas

Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas

Dec 03, 2024 am 01:48 AM

How <canvas> Selamat Hari - Mengendalikan Imej Besar dalam Pelayar 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);
};
Salin selepas log masuk

Hasilnya

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

Di Mana Perbezaannya?

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

  • masih cuba untuk memaparkan 28,000 * 17,000 = 476,000,000 piksel.
  • hanya melukis 80 * 80 = 6,400 piksel.

Dengan mengubah saiz imej dalam 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?

Langkah Seterusnya

Memandangkan kejayaan ini, kami kini mempertimbangkan untuk menggantikan dengan 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 boleh menawarkan prestasi yang lebih baik.

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

Kaveat Penting

Semasa menggunakan berkesan untuk kes penggunaan khusus kami, saya mesti ambil perhatian bahawa anda tidak boleh menggunakan untuk memaparkan imej pada bahagian tapak web yang menghadap awam. Inilah sebabnya:

  • Kebolehaksesan: elemen boleh dibaca oleh pembaca skrin, membantu pengguna cacat penglihatan.
  • SEO: Enjin carian mengindeks imej daripada teg, yang boleh meningkatkan keterlihatan tapak anda. (Dengan cara yang sama, pengikis latihan AI juga "mengindeks" imej. Nah, apa yang boleh anda lakukan...)
  • dengan boleh digunakan untuk mengesan ketumpatan piksel secara automatik dan menunjukkan gambar yang lebih besar atau lebih kecil untuk kesesuaian yang sempurna— tidak boleh. Saya menulis artikel tentang cara membina .
  • anda

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.

Kesimpulan

Saya suka pengoptimuman! 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.

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 sokongan. Jadi, walaupun kini kami mempunyai lebih banyak kod untuk diurus, pelbagai cara untuk memaparkan gambar, ia sangat sesuai dan itulah yang penting!

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

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1663
14
Tutorial PHP
1266
29
Tutorial C#
1239
24
Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Apr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Enjin JavaScript: Membandingkan Pelaksanaan Enjin JavaScript: Membandingkan Pelaksanaan Apr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

JavaScript: meneroka serba boleh bahasa web JavaScript: meneroka serba boleh bahasa web Apr 11, 2025 am 12:01 AM

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Apr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend) Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend) Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

Dari C/C ke JavaScript: Bagaimana semuanya berfungsi Dari C/C ke JavaScript: Bagaimana semuanya berfungsi Apr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend) Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend) Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

See all articles