Imej & foto · Penukar & Pemampat Imej
Cara Pekerja Web dan OffscreenCanvas memastikan penukaran imej responsif
· Bagaimana ia berfungsi
pemprosesan pelayar kanvas pekerja web
Pengekodan imej besar mengambil masa sebenar CPU dan melakukannya pada urutan utama akan membekukan halaman. Siaran ini menerangkan cara Pekerja Web dan OffscreenCanvas mengalihkan yang berfungsi keluar dari urutan UI dan maksud seni bina itu untuk privasi dan untuk had.
Tab yang akan membeku — apa yang berlaku apabila pengekodan berat dijalankan pada urutan yang turut menarik halaman
Menyahkod, melukis semula dan mengekod kumpulan memerlukan CPU kerja dan memori piksel yang dinyahkod. Jika setiap operasi dijalankan dalam gelung acara yang sama yang mengendalikan kawalan, kemas kini kemajuan dan lukisan, antara muka boleh berhenti bertindak balas sehingga fail selesai. Oleh itu, panel tertumpu mencipta pekerja modul dengan malas apabila penukaran pertama bermula daripada membayar kos permulaan itu untuk pelawat yang tidak pernah menukar.
Responsif ialah matlamat seni bina, bukan nombor pemasaan yang dijanjikan. Muatan peranti, dimensi imej, pelaksanaan pelayar dan komposisi kelompok masih menentukan kelancaran halaman itu. Sahkan dengan fail wakil pada peranti yang penting; jangan terbitkan tempoh penukaran universal atau dakwa bahawa pekerja membuat kerja yang mahal percuma.
Urutan utama dan sebab ia berharga — satu utas untuk susun atur, input dan skrip, dan berapa lama tugas menyekat ketiga-tiga
Urutan utama memiliki DOM dan kawalan yang disentuh pelawat. ToolAcre menggunakannya untuk mengesahkan pilihan, menyahkod secara ringkas untuk dimensi sumber, membina tetapan, memberikan status dan hasil muat turun. Penyahkodan berulang kumpulan, lukisan kanvas dan gelung pengekodan berada di belakang `image.worker.js`, membenarkan mesej kemajuan kembali antara fail.
Seorang pekerja tidak menghapuskan setiap tugas utas utama. Setiap fail yang dipilih pada mulanya disemak dan diukur dalam panel, dan hasilnya kemudiannya ditukar menjadi pratonton dan tindakan muat turun di sana. Reka bentuk mengalihkan saluran paip berat yang berulang daripada pemilikan antara muka sambil mengekalkan API pelayar dan pembentangan dalam konteks di mana masing-masing berada.
Pekerja Web: utas kedua tanpa DOM — perkara yang boleh dan tidak boleh disentuh oleh pekerja, dan cara fail bergerak ke sana
Pekerja itu tidak mempunyai akses DOM biasa. Ia menerima perihalan item boleh bersiri, tetapan dan ArrayBuffer setiap fail. Untuk setiap item ia membina pelan penukaran tulen yang sama yang digunakan oleh antara muka, mencipta Blob, melaksanakan penyahkod-draw-enkod, menukar Blob yang terhasil kepada bait dan merekodkan kegagalan setiap fail tanpa meninggalkan kumpulan yang lain.
Pengasingan itu juga membentuk pengendalian ralat. Fail yang rosak boleh memasuki tatasusunan kegagalan sementara item kemudian diteruskan. Pekerja menyemak pembatalan antara item dan melaporkan kemajuan dengan nama fail semasa. UI menterjemahkan tamat masa pekerja kepada nasihat untuk mencuba imej yang lebih sedikit atau lebih kecil daripada meninggalkan butang dilumpuhkan tanpa penjelasan.
OffscreenCanvas: lukisan dan pengekodan tanpa unsur yang kelihatan — cara pekerja mendapatkan kanvasnya sendiri dan memanggil convertToBlob
`createCanvas` lebih suka `OffscreenCanvas` apabila pembina wujud. Di dalam laluan itu, `encodeCanvas` memanggil `convertToBlob` dengan sasaran MIME jenis dan kualiti pilihan. Penyampai yang sama juga boleh membuat kanvas HTML dan menggunakan `toBlob` berasaskan panggil balik, mengekalkan sandaran untuk konteks yang OffscreenCanvas tidak tersedia.
Sandaran adalah penting untuk diterangkan dengan tepat. OffscreenCanvas diutamakan, bukan satu-satunya kanvas yang mungkin dalam sumber. Begitu juga, pengekodan WebP pelayar disemak oleh hasil pengekodan akhirnya dan bukannya diandaikan daripada sokongan penyahkod. Aplikasi menjanjikan ralat apabila pengekod yang diminta tidak dapat menghasilkan format, bukan penggantian senyap dengan jenis MIME yang lain.
Boleh dipindahkan dan salinan — memindahkan ImageBitmap atau ArrayBuffer kepada pekerja tanpa menduplikasi puluhan megabait
Sebelum memanggil pekerja, panel membaca setiap Fail ke dalam ArrayBuffer dan memasukkan penimbal tersebut dalam senarai pemindahan. Pemilikan beralih kepada pekerja dan bukannya mengklon setiap penimbal input. Selepas pengekodan, pekerja membungkus bait Blob dalam Uint8Array dan mendaftarkan penimbal sokongan itu untuk pemindahan pada laluan tindak balas.
Ini mengurangkan penyalinan yang boleh dielakkan, tetapi imej dan kanvas yang dinyahkod masih menduduki memori. `executePlan` menutup setiap ImageBitmap dalam blok `finally` supaya piksel yang dinyahkodnya boleh dikeluarkan dengan segera. Boleh dipindahkan, pembersihan peta bit eksplisit dan pengawal belanjawan piksel menangani sumber tekanan yang berbeza; tiada yang membenarkan tuntutan kelompok tanpa had.
Mengapa seni bina ini juga merupakan kisah privasi — keseluruhan saluran paip berada dalam tab anda dan panel rangkaian kekal senyap
Kod penukaran memanggil imej pelayar dan API kanvas tanpa permintaan muat naik fail. Ujian unit mengawal perancangan untuk setiap kombinasi input-output yang disokong dengan akses rangkaian dilarang. Kenyataan privasi konfigurasi adalah sama sempit: kod alat tidak membuat permintaan untuk membawa fail, teks yang ditampal atau output yang dijana.
Halaman itu sendiri masih boleh memuatkan aset tapak dan skrip luaran yang didedahkan, jadi "panel rangkaian senyap" memerlukan tafsiran. Kosongkan DevTools selepas dimuatkan dan cari nama fail ujian tidak berbahaya yang tersendiri atau bait muatan dalam permintaan baharu. Semakan sumber dan pemerhatian masa jalan bersama-sama menyokong tuntutan tentang laluan penukaran; tidak menjadikan keseluruhan persekitaran pelayar menjadi kotak pasir luar talian.
Dari mana had datang — memori dan penutup kanvas menggantikan topi muat naik, jadi siling adalah peranti anda
Pemprosesan setempat menggantikan had muat naik dengan kekangan daripada pengesahan input, piksel yang dinyahkod, peruntukan kanvas dan memori peranti yang tersedia. Setiap fail input dihadkan pada 40 MB oleh panel fokus. Geometri keluaran yang dirancang dipasang pada belanjawan piksel peranti dan pengguna menerima amaran yang menamakan dimensi yang dikurangkan apabila pengawal itu menukar permintaan.
Tiada kiraan kelompok tetap dalam konfigurasi. Dua puluh grafik kecil dan dua puluh foto resolusi tinggi bukanlah peruntukan yang setara. Telefon boleh gagal lebih awal daripada desktop. Nasihat operasi yang benar adalah untuk memproses lebih sedikit atau lebih kecil fail selepas tamat masa atau kegagalan memori, bukan untuk menerbitkan kiraan maksimum atau siling megapiksel yang tidak disokong.
Bawa pulang: angkat berat, antara muka yang senyap — cara Penukar & Pemampat Imej melaksanakan penukaran daripada benang utama pada peranti anda
Antara muka kekal lebih senyap kerana saluran paip berulang berjalan dalam pekerja, kanvasnya boleh di luar skrin dan penimbal bait besar bergerak sebagai boleh dipindah milik. Itu adalah sifat sumber konkrit, bukan trengkas pemasaran. Mereka menerangkan tempat kerja berlaku dan cara kemajuan kembali tanpa mendakwa bahawa setiap pelayar menjadualkannya secara sama.
Uji seni bina dengan imej yang sebenarnya digunakan oleh aliran kerja anda. Tonton kawalan semasa penukaran, sahkan kemajuan setiap fail, periksa kegagalan dan semak panel Rangkaian untuk penanda ujian. Reka bentuk ToolAcre memberi anda bukti yang boleh diperhatikan: modul pekerja sebenar, output yang diukur dan bait muat turun setempat dan bukannya kerja jauh yang legap.