Imej & foto · Penukar & Pemampat Imej
Cara canvas.toBlob menukar PNG kepada WebP dalam pelayar anda
· Bagaimana ia berfungsi
format imej kanvas webp
Penukar imej pelayar ialah penyahkod, peta bit dan pengekod yang dirantai bersama, dan keseluruhan rantaian dibina ke dalam pelayar. Siaran ini mengikuti satu PNG melalui penyahkod, kanvas dan toBlob ke fail WebP dan mencatat perkara yang hilang dalam perjalanan.
Di mana WebP berasal apabila tiada pelayan terlibat — soalan konkrit di sebalik penukar yang berfungsi di luar talian
WebP tidak datang daripada baris gilir penukaran sebelah pelayan. Pelayar anda sudah mempunyai penyahkod imej, permukaan piksel boleh lukis dan pengekod; penukar ToolAcre menghubungkannya. Itulah sebabnya PNG boleh diubah dalam tab anda selepas tapak dimuatkan. "Tiada muat naik" merujuk kepada imej sumber dan output penukaran, bukan kepada tapak web yang tidak mempunyai aktiviti rangkaian sama sekali.
Langkah pertama: penyahkodan — cara pelayar menukar PNG bait menjadi peta bit RGBA dan mengapa setiap format berakhir sebagai grid yang sama
Mula-mula PNG dinyahkodkan menjadi peta bit imej. PNG mampatan, pilihan palet dan metadata warna menentukan cara baitnya menjadi piksel, tetapi kanvas berfungsi pada raster yang dinyahkod, bukan pada ketulan fail PNG. Tangkapan skrin 1600×900 menghasilkan 1.44 juta kedudukan piksel walaupun fail itu sendiri jauh lebih kecil. ToolAcre menggunakan createImageBitmap dan menguatkuasakan belanjawan piksel; imej besar yang dinyahkod adalah masalah memori sebelum ia menjadi masalah muat naik.
Langkah kedua: kanvas sebagai kawasan pementasan — melukis peta bit pada kanvas atau OffscreenCanvas dengan dimensi yang sepadan
Peta bit dilukis ke dalam kanvas atau OffscreenCanvas dengan dimensi output yang diminta. Jika dimensi tersebut sepadan dengan sumber dan tiada pemangkasan dipilih, drawImage memperingkatkan piksel untuk pengekodan; jika dimensi berubah, kanvas menyampelnya semula dan nilai piksel mungkin berubah sebelum pengekodan WebP bermula. Rutin pemaparan yang sama menyajikan pratonton interaktif dan laluan pekerja, menghalang kedua-dua output tersebut daripada mengikuti algoritma yang tidak berkaitan.
Langkah ketiga: toBlob dengan jenis dan kualiti MIME — cara pengekod dipilih, perkara yang dikawal oleh nombor kualiti dan sebab ia diabaikan untuk PNG
Pada kanvas biasa, toBlob(panggilan balik, "image/webp", kualiti) meminta pelayar mengekod WebP dan memanggil semula dengan Blob. Di mana OffscreenCanvas tersedia, ToolAcre menggunakan convertToBlob({type,quality}) untuk kerja yang sama. Kualiti mengawal pengekod yang hilang; ia bukan janji kiraan bait tertentu. PNG eksport adalah tanpa kerugian dan parameter kualitinya tidak menetapkan tahap mampatan seperti JPEG. Sentiasa periksa format sebenar yang dikembalikan, kerana ketersediaan pengekod bergantung pada pelayar.
Perkara yang dibuang oleh saluran paip — metadata, profil warna dan ketepatan 16-bit, dan sebab itu adalah sifat teknik dan bukannya pepijat
Pengekodan semula raster yang dinyahkod tidak boleh mengekalkan setiap fakta dalam bekas PNG asal. Ketulan teks, metadata kamera atau editor, beberapa butiran profil warna dan kedalaman bit sumber mungkin tidak dapat bertahan dalam perjalanan pergi balik kanvas; Saluran 16-bit tidak menjadi 16-bit WebP semata-mata kerana input membawanya. WebP boleh mengekalkan ketelusan apabila pengekod menyokongnya, manakala JPEG eksport memerlukan mengisi kawasan lutsinar. Saiz fail sahaja tidak dapat menunjukkan sama ada penukaran mengekalkan garis halus atau warna.
Contoh yang berjaya: tangkapan skrin 1.8 MB PNG kepada WebP — mengikut fail melalui tiga langkah dan membaca hasilnya
Pertimbangkan tangkapan skrin 1.8 MB PNG dengan teks, kecerunan dan sudut lutsinar. Nyahkodkannya, biarkan dimensi tidak berubah, pilih WebP, eksport dan bandingkan saiz Gumpalan dan jenis MIME kepada yang asal. Saiz yang terhasil diukur, tidak boleh diramal: tangkapan skrin bersih mungkin dimampatkan dengan baik, manakala kandungan bising mungkin tidak. Zum ke dalam glif kecil dan sudut lutsinar sebelum menerima fail yang lebih kecil. Jika teks UI tajam menjadi kabur, kekalkan PNG atau laraskan kualiti pengekod daripada mendakwa bahawa WebP sentiasa lebih baik.
Perkara yang tidak dilindungi ini — imej animasi, format yang tidak boleh dinyahkod oleh pelayar dan tetapan pengekod yang tidak didedahkan oleh API
Saluran paip ini tidak menjanjikan pengekalan animasi, HEIC penyahkodan pada setiap peranti atau kawalan penuh parameter subsampel dan usaha pengekod WebP. Ia juga tidak dapat memulihkan butiran yang telah hilang dalam sumber JPEG dengan menyimpannya sebagai PNG atau WebP. Penyahkod berulang/re-encode kitaran boleh mengumpul kerugian. Simpan yang asal dan gunakan format input/output yang disokong yang disenaraikan pada halaman alat sebenar dan bukannya menganggap setiap format yang diketahui oleh sistem pengendalian anda diterima di sini.
Bawa pulang: tiga langkah, sifar muat naik — cara Penukar Imej & Pemampat menjalankan saluran paip ini pada peranti anda
Mekanismenya ialah nyahkod → lukis → pengekodan, dijalankan dengan API pelayar dan tiada muat naik imej. ToolAcre mendedahkan format dan dimensi sasaran supaya anda boleh mengetahui sama ada anda sahaja menukar bekas atau mengubah saiz piksel juga. Uji satu tangkapan skrin wakil dalam Penukar & Pemampat Imej sebelum memproses keseluruhan kumpulan, kemudian periksa hasil yang dimuat turun pada saiz yang orang akan lihat.