Ubah saiz imej _

Cara pengubahan saiz imej berasaskan pelayar berfungsi

Setiap ubah saiz ialah saluran paip ringkas yang berjalan sepenuhnya dalam JavaScript. Tiada perpustakaan kodek dimuat turun dan tiada pelayan terlibat. Canvas API pelayar sendiri menyahkod fail, melukis semula pada saiz sasaran dan mengekodkan semula dalam ingatan, kemudian menyerahkan Blob yang boleh dipratonton atau di-zip oleh halaman. Kerana setiap langkah berada dalam kotak pasir tab, fail asal tidak pernah mencapai rangkaian.

1. Baca setiap fail yang dimuat naik sebagai Blob dan buat URL objek supaya pelayar boleh menyahkodnya secara setempat, tanpa menyalin bait ke pelayan atau menulis ke cakera.
2. Kira dimensi sasaran daripada mod yang dipilih — had sisi terpanjang, lebar dan tinggi yang tepat, atau skala peratusan. Kunci nisbah aspek mengekalkan perkadaran apabila anda mengedit satu medan.
3. Cipta Canvas luar skrin pada saiz sasaran dan panggil ctx.drawImage(source, 0, 0, width, height) untuk melukis semula piksel yang disahkodkan. Pelayar mengendalikan interpolasi yang melicinkan hasil berskala.
4. Panggil canvas.toBlob untuk mengekodkan semula dalam format sumber. PNG kekal tanpa kehilangan, JPEG dan WebP dienkodkan semula pada kualiti tinggi. Kemudian halaman menunjukkan kad sebelum/selepas dan menawarkan muat turun setiap imej atau ZIP tunggal yang dibina dalam ingatan dengan fflate.

Mengapa mengubah saiz imej?

• Imej terlalu besar ialah punca paling biasa halaman yang lambat. Foto telefon 4000×3000 yang dimasukkan terus ke dalam susun atur lebar 600 piksel menghantar kira-kira 40 kali lebih banyak piksel daripada yang boleh ditunjukkan skrin. Mengehadkan sisi terpanjang kepada 1600 px sebelum muat naik memotong berat halaman dengan ketara dan meningkatkan LCP Core Web Vitals.
• Borang muat naik menguatkuasakan dimensi yang ketat. Slot avatar, portal foto ID, penyenaraian marketplace, dan kad OG semuanya memerlukan saiz piksel tertentu: 1200×630 untuk pratonton Open Graph, 512×512 untuk ikon apl, 150×150 untuk lakaran kecil. Masukkan nombor yang betul dan elakkan gelung muat naik yang ditolak.
• Alat e-mel dan sembang senyap-senyap memampatkan semula semua yang besar, yang boleh merosakkan tangkap layar yang bersih. Mengubah saiz sendiri kepada lebar yang wajar memastikan hasil yang boleh diramal berbanding menyerahkannya kepada saluran paip lossy orang lain.
• Konsistensi kelompok penting untuk galeri dan katalog. Menjalankan folder foto pelbagai saiz melalui satu sasaran 800×800 bermakna setiap kad berbaris pada grid, tanpa imej besar yang mengganggu susun atur.

Aplikasi biasa

Pengubahan saiz berlaku apabila dimensi sumber dan jangkaan destinasi tidak sepadan. Tiga corak muncul berulang kali.

• Menyediakan foto produk untuk kedai Shopify atau WooCommerce. Folder 4000 piksel dari kamera dihadkan kepada sisi terpanjang 1600 px supaya kedai dimuatkan dengan pantas, manakala nisbah aspek kekal tidak disentuh supaya tiada yang kelihatan teregang.
• Menjana aset sosial dan apl daripada satu fail induk. Tetapkan 1200×630 yang tepat untuk kad Open Graph, kemudian 512×512 untuk ikon apl, mengeksport setiap satu dalam beberapa klik tanpa membuka editor yang berat.
• Mengecilkan kelompok tangkap layar QA atau sokongan sebelum dilampirkan pada tiket. Menskalakan folder 50 tangkap layar kepada 50% biasanya memotong saiz arkib kira-kira tiga suku sebelum ia masuk ke dalam penjejak pepijat.

Contoh yang dikerjakan: foto 4000 px kepada imej web 1600 px

Foto 4000×3000 terus dari telefon ialah muatan biasa yang jauh lebih besar daripada keperluan mana-mana susun atur web. Ini adalah penanda aras yang wajar untuk apa yang pengubahan saiz jimatkan.

Lepaskan foto ke zon muat naik, biarkan mod pada Hadkan sisi terpanjang, dan tetapkan nilai kepada 1600. Saluran paip Canvas melukis semula imej pada 1600×1200 dengan nisbah aspek dipelihara, kemudian mengekodkan semula dalam format asal. Kad output menunjukkan dimensi baharu dan saiz fail, yang bagi JPEG tipikal jatuh dari beberapa megabait kepada beberapa ratus kilobait. Klik Muat Turun pada kad untuk ambil fail tunggal, atau klik Muat Turun .zip jika anda mengubah saiz beberapa imej dalam satu laluan. Keseluruhan pusingan, dari lepas hingga muat turun, berjalan dalam sebahagian kecil saat dan menggunakan sifar lebar jalur selepas halaman itu sendiri selesai dimuatkan.

Mod ubah saiz apa yang tersedia?

Tiga. Hadkan sisi terpanjang mengehadkan lebar atau tinggi yang lebih panjang kepada nilai piksel dan menskalakan sisi lain untuk sepadan — ini ialah lalai yang selamat kerana ia tidak pernah mengherotkan. Lebar × tinggi tepat membolehkan anda menaip kedua-dua nombor, dengan kunci nisbah aspek yang mengira semula medan kedua daripada nisbah sumber semasa anda mengedit yang pertama — matikan kunci apabila borang memerlukan saiz tepat yang tidak berkadaran. Skala mengikut peratusan mendarab kedua-dua dimensi dengan satu faktor, berguna untuk membelah dua atau menggandakan keseluruhan kelompok sekaligus. Enam pratetap satu klik (1920×1080 hingga lakaran kecil 150×150) merangkumi sasaran yang paling biasa.

Adakah ini berlaku pada peranti saya?

Ya, sepenuhnya. Halaman menggunakan Canvas API asli pelayar dan Web File API untuk menyahkod, melukis semula, dan mengekodkan semula setiap imej dalam ingatan. Tiada data imej dihantar ke pelayan, tiada muat naik sementara, tiada perjalanan pusingan awan. Anda boleh mengesahkan sendiri: buka DevTools, tukar ke panel Rangkaian, dan jalankan ubah saiz. Satu-satunya permintaan keluar yang anda lihat ialah muat halaman awal dan panggilan iklan. Tiada yang berbentuk imej meninggalkan tab, yang menjadikannya selamat untuk dokumen ID yang diimbas, imej perubatan, dan bahan lain yang anda tidak mahu muat naik.

Adakah ubah saiz akan mengurangkan kualiti?

Mengecilkan imej (penurunan skala) kelihatan sangat baik — pelayar mempurata piksel sumber kepada lebih sedikit piksel, jadi perincian kekal tajam dan fail menjadi lebih kecil. Membesarkan melebihi resolusi sumber (peningkatan skala) tidak dapat mencipta perincian yang tidak pernah ditangkap, jadi imej kecil yang diperbesar akan kelihatan kabur — ini adalah had setiap pengubah saiz, bukan alat ini secara khusus. Output mengekalkan format sumber: PNG kekal tanpa kehilangan, JPEG dan WebP dienkodkan semula pada tetapan kualiti tinggi supaya perbezaan visual dari asal sukar dikesan.

Format fail apa yang disokong?

Pada bahagian input, sebarang format yang boleh disahkodkan pelayar diterima: PNG, JPEG, WebP, GIF, dan BMP meliputi hampir setiap fail yang dihasilkan oleh telefon, kamera, atau alat tangkap layar. Output mengekalkan format sumber di mana enkoder Canvas menyokongnya — PNG, JPEG, dan WebP berfungsi secara langsung. GIF dan BMP, yang Canvas API boleh dekodkan tetapi tidak enkodkan semula, disimpan sebagai PNG tanpa kehilangan. Nama fail yang diubah saiz menyertakan dimensi baharu (contohnya photo-1600x1200.jpg) supaya kelompok mudah disusun.

Lepaskan imej anda, pilih saiz, ubah. Semuanya berjalan dalam tab anda. Tiada muat naik, tiada akaun, tiada menunggu giliran pelayan.