Imej & foto · Pengubah Imej Sosial
Cara Saiz Semula Imej Pelayar Berfungsi: Kanvas, drawImage dan Pensampelan Semula
· Bagaimana ia berfungsi
saiz semula imej kanvas pemprosesan pelayar
Pelayar boleh menyahkod foto, melukisnya ke dalam kanvas pada saiz baharu dan mengekod hasilnya, semuanya tanpa pelayan. Siaran ini mengikuti saluran paip itu, menerangkan tempat kualiti dimenangi atau hilang, dan menunjukkan sebab satu-satunya had saiz ialah memori peranti anda.
Tiada muat naik, tiada pelayan, masih diubah saiz — persoalan konkrit tentang tempat kerja berlaku apabila halaman mengecilkan foto 20-megapiksel
Gambar boleh menjadi potret 1080 oleh 1350 tanpa melawati pelayan pemprosesan imej. Resizer Imej Sosial menerima Fail daripada pemilih pelayar, mengesahkan jenis dan saiz MIMEnya dan memanggil createImageBitmap. Peta bit yang dinyahkod itu kekal sebagai sumber untuk setiap output yang dipilih, jadi satu objek tempatan boleh menyuap beberapa kanvas berbentuk berbeza.
Pratonton yang boleh dilihat bukanlah eksport terakhir yang tersembunyi di sebalik permintaan rangkaian. Ia ialah pemaparan kanvas yang lebih kecil daripada keadaan pembingkaian yang sama: nisbah sasaran, zum, offset, mod muat dan latar belakang. Eksport kemudian mengulangi pemaparan itu pada dimensi pratetap, mengekodkan Blob dan menyerahkan Blob kepada kawalan muat turun dalam halaman.
Penyahkodan adalah setempat, tetapi alat ini juga menguatkuasakan had input 40 MB
Pelan itu mengatakan memori peranti adalah satu-satunya sempadan praktikal, tetapi laluan input yang dihantar mempunyai had fail 40 MB yang eksplisit juga. JPEG, PNG dan WebP diterima; jenis lain ditolak sebelum penyahkodan. Selepas get itu, createImageBitmap meminta pelayar menukar bait fail yang dimampatkan kepada lebar, tinggi dan piksel yang dinyahkod yang boleh digunakan oleh kanvas.
Piksel yang dinyahkod boleh menduduki lebih banyak memori daripada fail yang dimampatkan, dan setiap kanvas output memerlukan peruntukannya sendiri. Oleh itu pemapar memanggil pengawal belanjawan piksel yang dikongsi sebelum membuat kanvas. Itu adalah kekangan kedua, berorientasikan peranti, bukan kebenaran untuk menjanjikan bahawa setiap fail di bawah 40 MB akan muat setiap output yang diminta pada setiap mesin.
drawImage menskala peta bit penuh yang diposisikan sementara klip kanvas output melimpah
ToolAcre tidak mengira segiempat pangkas sumber dan menghantar lapan hujah sumber dan destinasi kepada drawImage. Ia mengira skala daripada sumber dan dimensi sasaran, meletakkan keseluruhan peta bit berskala dan melukisnya ke atas kanvas yang tepinya menjepit sebarang limpahan. Dalam mod penutup bahawa keratan adalah tanaman; dalam mod mengandungi keseluruhan bitmap kekal kelihatan.
Perbezaan itu penting kerana pangkas dan ubah saiz bukan sinonim. Saiz semula mengubah dimensi di mana peta bit dijadikan sampel. Pemotongan mengalih keluar apa sahaja yang terletak di luar bingkai keluaran terhingga. Satu panggilan drawImage boleh mengambil bahagian dalam kedua-dua kesan di sini, tetapi pemangkasan dihasilkan oleh geometri bingkai dan keratan dan bukannya dengan menulis semula fail sumber terlebih dahulu.
Pensampelan semula di bawah hud — merapikan tetapan, pembayang 'berkualiti tinggi' yang diminta pelayar lakukan, dan sebab keputusan berbeza sedikit antara pelayar
Sebelum melukis, pemapar mendayakan imageSmoothingEnabled dan menetapkan imageSmoothingQuality kepada tinggi. Itu adalah kawalan kanvas pelayar, bukan permintaan untuk Lanczos bernama, bikubik atau kernel lain. Pelaksanaan tidak boleh menjanjikan sampel yang sama merentas enjin kerana API mendedahkan pembayang kualiti dan bukannya jadual pekali tepat pelayar.
Perbandingan yang berguna memastikan sumber, dimensi output dan pelayar tetap, kemudian memeriksa tepi pepenjuru, garis halus dan tekstur berulang. Jika pelayar lain berbeza sedikit, itu tidak bermakna nisbah sasaran berubah. Ini bermakna permintaan geometri yang sama melalui pelaksanaan kanvas yang berbeza, itulah sebabnya artikel itu mengelakkan peratusan prestasi atau kualiti ciptaan.
Pengekodan output — menjadikan kanvas kembali menjadi fail imej yang dikodkan dan menawarkannya untuk dimuat turun
Kanvas eksport menjadi Blob melalui OffscreenCanvas.convertToBlob apabila kaedah itu wujud, atau HTMLCanvasElement.toBlob sebaliknya. Pengguna memilih JPEG, PNG atau WebP. Nilai kualiti dibekalkan kepada pengekod, walaupun PNG tidak menggunakan kawalan kualiti lossy seperti yang dilakukan JPEG dan WebP. Kiraan bait yang terhasil diukur, bukan dianggarkan.
Untuk beberapa sasaran yang dipilih, alat ini membina setiap Blob dalam urutan, memaparkan dimensi sebenar dan saiz yang diukur dan boleh membungkus fail yang telah dikodkan ke dalam ZIP. ZIP storan tidak meningkatkan pemampatan imej di sini; kandungan menyatakan bahawa format tersebut sudah dimampatkan. Muat turun individu dan arkib kedua-duanya berasal daripada bait yang dibuat secara tempatan.
Pelaksanaan ini melaksanakan kerja eksport pada urutan utama, bukan dalam Pekerja Web
Buku kerja mengatakan kerja berat biasanya dijalankan dalam Pekerja Web, tetapi apl ini mengimport fungsi pemangkasan dan pemaparan terus ke dalam main.js dan gelung melalui sasaran di sana. Tiada Pekerja dicipta dalam laluan yang diperiksa. Halaman itu masih boleh digunakan untuk kerja biasa, tetapi daya tindak balas mesti diperhatikan dan bukannya dikaitkan dengan seni bina yang tidak ada.
Pengasingan rangkaian disokong oleh dua jenis bukti. Ujian teras memasang pengawal rangkaian dan bingkai setiap pratetap tanpa percubaan, manakala rekod produk menandakan pemprosesan setempat. Semakan panel Rangkaian masa jalan boleh menambah bukti penggunaan. Ia harus membezakan muat naik imej daripada aset halaman biasa atau analitis yang didedahkan dan bukannya mendakwa keseluruhan halaman tidak membuat permintaan.
Perkara ini tidak meliputi — GPU-percepatan mengubah saiz perpustakaan dan saluran paip imej sebelah pelayan
Laluan ini sengaja dibina pada primitif pelayar dan bukannya perpustakaan GPU atau saluran paip media jauh. Ia tidak mendedahkan kernel pensampelan semula yang boleh dipilih, algoritma alternatif penanda aras atau menjanjikan pemprosesan kelompok dipercepatkan. Satu imej sumber menghasilkan beberapa tanaman; banyak fail sumber yang tidak berkaitan tergolong dalam aliran kerja yang berbeza.
Pengecualian tersebut memastikan janji boleh diuji. Kod ini membuktikan pengesahan fail, penyahkodan peta bit, pembingkaian aritmetik, lukisan kanvas, pengekodan gumpalan dan pemasangan muat turun. Ia tidak membuktikan cara ladang pelayan akan mengubah saiz piksel yang sama atau laluan GPU yang boleh dipilih oleh pelayar secara dalaman. Tuntutan berhenti pada API Web yang boleh diperhatikan yang digunakan.
Bawa pulang: pelayar anda sudah mempunyai resizer terbina dalam — Social Image Resizer memacunya untuk anda, memangkas dan menskala ke nisbah bidang platform tanpa memuat naik fail
Pelayar sudah membekalkan operasi penting, tetapi hasil yang berguna bergantung pada geometri yang betul di sekelilingnya. Social Image Resizer memilih skala maksimum untuk penutup, skala min untuk kandungan, pergerakan pengapit, pratonton panduan kawasan selamat secara berasingan dan eksport pada dimensi sasaran yang tepat. Orkestrasi itu menjadikan lukisan peringkat rendah API menjadi aliran kerja aset sosial yang boleh berulang.
Uji saluran paip dengan imej asal dan bukannya salinan yang dikecutkan sebelum ini. Pilih pratetap alat semasa atau nisbah tersuai, alihkan subjek, eksport sekali dan periksa dimensi yang dimuat turun. Buktinya ialah fail setempat yang anda terima dan laluan kod yang membuatnya, bukan dakwaan bahawa setiap pelayar menggunakan resampler tersembunyi yang sama.