Gambar & foto · Konverter & Kompresor Gambar
Bagaimana canvas.toBlob mengonversi PNG menjadi WebP di dalam browser Anda
· Cara kerjanya
format gambar kanvas webp
Konverter gambar browser adalah decoder, bitmap, dan encoder yang dirangkai bersama, dan seluruh rantai dibangun ke dalam browser. Posting ini mengikuti PNG melalui decode, canvas dan toBlob ke file WebP, dan mencatat apa yang hilang dalam perjalanan.
Dari mana WebP berasal ketika tidak ada server yang terlibat — pertanyaan konkret di balik konverter yang bekerja secara offline
WebP tidak berasal dari antrean konversi sisi server. Browser Anda sudah memiliki decoder gambar, permukaan piksel yang dapat digambar, dan encoder; konverter ToolAcre menghubungkannya. Itulah sebabnya PNG dapat diubah di tab Anda setelah situs dimuat. “Tidak ada unggahan” mengacu pada gambar sumber dan keluaran konversi, bukan situs web yang tidak memiliki aktivitas jaringan sama sekali.
Langkah pertama: decoding — bagaimana browser mengubah PNG byte menjadi bitmap RGBA, dan mengapa setiap format berakhir sebagai grid yang sama
Pertama, PNG didekodekan menjadi bitmap gambar. Kompresi PNG, pilihan palet, dan metadata warna menentukan bagaimana byte-nya menjadi piksel, namun kanvas berfungsi pada raster yang didekodekan, bukan pada potongan file PNG. Tangkapan layar 1600×900 menghasilkan 1.44 juta posisi piksel meskipun file itu sendiri jauh lebih kecil. ToolAcre menggunakan createImageBitmap dan menerapkan anggaran piksel; gambar dekode berukuran besar merupakan masalah memori sebelum menjadi masalah pengunggahan.
Langkah kedua: kanvas sebagai area pementasan — menggambar bitmap ke kanvas atau OffscreenCanvas dengan dimensi yang cocok
Bitmap digambar ke dalam kanvas atau OffscreenCanvas dengan dimensi keluaran yang diminta. Jika dimensi tersebut cocok dengan sumbernya dan tidak ada pemotongan yang dipilih, drawImage akan mengatur piksel untuk pengkodean; jika dimensi berubah, kanvas akan mengambil sampel ulang dan nilai piksel dapat berubah sebelum pengkodean WebP dimulai. Rutinitas render yang sama menyajikan pratinjau interaktif dan jalur pekerja, mencegah kedua keluaran tersebut mengikuti algoritme yang tidak terkait.
Langkah ketiga: toBlob dengan jenis dan kualitas MIME — cara encoder dipilih, jumlah kualitas yang dikontrol, dan mengapa encoder diabaikan untuk PNG
Pada kanvas biasa, toBlob(callback, "image/webp", quality) meminta browser untuk menyandikan WebP dan memanggil kembali dengan Blob. Jika OffscreenCanvas tersedia, ToolAcre menggunakan convertToBlob({type,quality}) untuk pekerjaan yang sama. Kontrol kualitas encoder lossy; ini bukan janji jumlah byte tertentu. Ekspor PNG bersifat lossless dan parameter kualitasnya tidak menetapkan tingkat kompresi seperti JPEG. Selalu periksa format sebenarnya yang dikembalikan, karena ketersediaan pembuat enkode bergantung pada browser.
Apa yang dibuang oleh pipeline — metadata, profil warna, dan presisi 16-bit, dan mengapa hal tersebut merupakan properti teknik, bukan bug
Pengkodean ulang raster yang didekodekan tidak dapat menyimpan setiap fakta dalam wadah PNG asli. Potongan teks, metadata kamera atau editor, beberapa detail profil warna, dan kedalaman bit sumber mungkin tidak dapat bertahan dalam perjalanan bolak-balik kanvas; Saluran 16-bit tidak menjadi 16-bit WebP hanya karena masukan membawanya. WebP dapat menjaga transparansi ketika pembuat enkode mendukungnya, sedangkan ekspor JPEG memerlukan pengisian area transparan. Ukuran file saja tidak dapat menunjukkan apakah suatu konversi mempertahankan garis-garis halus atau warna.
Contoh praktis: tangkapan layar 1.8 MB PNG ke WebP — mengikuti file melalui tiga langkah dan membaca hasilnya
Pertimbangkan tangkapan layar 1.8 MB PNG dengan teks, gradien, dan sudut transparan. Dekode, biarkan dimensinya tidak berubah, pilih WebP, ekspor dan bandingkan ukuran Blob dan jenis MIME dengan aslinya. Ukuran yang dihasilkan diukur, tidak dapat diprediksi: tangkapan layar yang bersih mungkin dapat dikompres dengan baik, sedangkan konten yang berisik mungkin tidak dapat dikompres dengan baik. Perbesar mesin terbang kecil dan sudut transparan sebelum menerima file yang lebih kecil. Jika teks UI yang tajam menjadi kabur, pertahankan PNG atau sesuaikan kualitas encoder daripada mengklaim bahwa WebP selalu lebih baik.
Apa yang tidak tercakup di sini — gambar animasi, format yang tidak dapat didekode oleh browser, dan pengaturan encoder yang tidak diekspos oleh API
Pipeline ini tidak menjanjikan retensi animasi, decoding HEIC pada setiap perangkat, atau kontrol penuh terhadap subsampling dan parameter upaya encoder WebP. Itu juga tidak dapat memulihkan detail yang sudah hilang dalam sumber JPEG dengan menyimpannya sebagai PNG atau WebP. Siklus decode/re-encode yang berulang dapat mengakumulasi kerugian. Simpan yang asli, dan gunakan format input/output yang didukung yang tercantum pada halaman alat sebenarnya daripada berasumsi setiap format yang diketahui sistem operasi Anda diterima di sini.
Kesimpulan: tiga langkah, tanpa unggahan — bagaimana Konverter & Kompresor Gambar menjalankan saluran ini di perangkat Anda
Mekanismenya adalah decode → draw → encode, dilakukan dengan API browser dan tanpa upload gambar. ToolAcre memperlihatkan format dan dimensi target sehingga Anda dapat mengetahui apakah Anda hanya mengubah wadah atau mengubah ukuran piksel juga. Uji satu tangkapan layar yang representatif di Image Converter & Compressor sebelum memproses keseluruhan batch, lalu periksa hasil unduhan sesuai ukuran yang dapat dilihat orang.