Gambar & foto · Pengubah Gambar Sosial
Cara Kerja Pengubahan Ukuran Gambar Browser: Canvas, drawImage, dan Resampling
· Cara kerjanya
mengubah ukuran gambar kanvas pemrosesan browser
Browser dapat memecahkan kode foto, menggambarnya ke dalam kanvas dengan ukuran baru dan menyandikan hasilnya, semuanya tanpa server. Postingan ini mengikuti alur tersebut, menjelaskan di mana kualitas menang atau kalah, dan menunjukkan mengapa satu-satunya batasan ukuran adalah memori perangkat Anda.
Tidak ada unggahan, tidak ada server, ukurannya tetap diubah — pertanyaan konkret tentang di mana pekerjaan dilakukan ketika halaman mengecilkan foto 20 megapiksel
Sebuah foto dapat menjadi potret 1080 oleh 1350 tanpa mengunjungi server pemrosesan gambar. Social Image Resizer menerima File dari pemilih browser, memvalidasi jenis dan ukurannya MIME, dan memanggil createImageBitmap. Bitmap yang didekodekan tersebut tetap menjadi sumber untuk setiap keluaran yang dipilih, sehingga satu objek lokal dapat memberi makan beberapa kanvas dengan bentuk berbeda.
Pratinjau yang terlihat bukanlah ekspor akhir yang tersembunyi di balik permintaan jaringan. Ini adalah rendering kanvas yang lebih kecil dengan status pembingkaian yang sama: rasio target, zoom, offset, mode pas, dan latar belakang. Ekspor kemudian mengulangi perenderan tersebut pada dimensi yang telah ditentukan sebelumnya, mengkodekan Blob dan menyerahkan Blob ke kontrol unduhan di halaman.
Penguraian kode bersifat lokal, namun alat ini juga menerapkan batas masukan 40 MB
Rencananya mengatakan memori perangkat adalah satu-satunya batasan praktis, namun jalur masukan yang dikirimkan juga memiliki batas file 40 MB yang eksplisit. JPEG, PNG dan WebP diterima; tipe lain ditolak sebelum didekode. Setelah gerbang itu, createImageBitmap meminta browser untuk mengubah byte file terkompresi menjadi lebar, tinggi, dan piksel yang didekodekan yang dapat digunakan oleh kanvas.
Piksel yang didekodekan dapat menempati lebih banyak memori daripada file terkompresi, dan setiap kanvas keluaran memerlukan alokasinya sendiri. Oleh karena itu, penyaji memanggil penjaga anggaran piksel bersama sebelum membuat kanvas. Itu adalah batasan kedua yang berorientasi pada perangkat, bukan izin untuk menjanjikan bahwa setiap file di bawah 40 MB akan sesuai dengan setiap keluaran yang diminta di setiap mesin.
drawImage menskalakan bitmap penuh yang diposisikan sementara klip kanvas keluaran meluap
ToolAcre tidak menghitung persegi panjang pemangkasan sumber dan meneruskan delapan argumen sumber dan tujuan ke drawImage. Ini menghitung skala dari dimensi sumber dan target, memposisikan seluruh bitmap yang diskalakan, dan menggambarnya ke kanvas yang ujung-ujungnya memotong luapan apa pun. Dalam mode sampul, kliping adalah pemotongan; dalam mode berisi seluruh bitmap tetap terlihat.
Perbedaan ini penting karena memotong dan mengubah ukuran bukanlah sinonim. Mengubah ukuran akan mengubah dimensi pengambilan sampel bitmap. Pemangkasan menghilangkan apa pun yang ada di luar bingkai keluaran terbatas. Satu panggilan drawImage dapat berpartisipasi dalam kedua efek di sini, namun pemangkasan dihasilkan oleh geometri bingkai dan kliping, bukan dengan menulis ulang file sumber terlebih dahulu.
Pengambilan sampel ulang secara tersembunyi — menghaluskan pengaturan, petunjuk 'berkualitas tinggi' yang diminta browser untuk dilakukan, dan mengapa hasilnya sedikit berbeda antar browser
Sebelum menggambar, penyaji mengaktifkan imageSmoothingEnabled dan menyetel imageSmoothingQuality ke tinggi. Itu adalah kontrol kanvas browser, bukan permintaan untuk kernel bernama Lanczos, bicubic, atau lainnya. Implementasinya tidak dapat menjanjikan sampel yang sama di seluruh mesin karena API memperlihatkan petunjuk kualitas daripada tabel koefisien browser yang tepat.
Perbandingan yang berguna menjaga sumber, dimensi keluaran, dan browser tetap, lalu memeriksa tepi diagonal, garis halus, dan tekstur berulang. Jika browser lain sedikit berbeda, bukan berarti rasio targetnya berubah. Ini berarti permintaan geometris yang sama melewati implementasi kanvas yang berbeda, itulah sebabnya artikel tersebut menghindari persentase kinerja atau kualitas yang ditemukan.
Mengkodekan keluaran — mengembalikan kanvas menjadi file gambar yang disandikan dan menawarkannya untuk diunduh
Kanvas ekspor menjadi Blob melalui OffscreenCanvas.convertToBlob jika metode tersebut ada, atau HTMLCanvasElement.toBlob sebaliknya. Pengguna memilih JPEG, PNG atau WebP. Nilai kualitas diberikan ke encoder, meskipun PNG tidak menggunakan kontrol kualitas lossy seperti yang dilakukan JPEG dan WebP. Jumlah byte yang dihasilkan diukur, bukan diperkirakan.
Untuk beberapa target yang dipilih, alat ini membangun setiap Blob secara berurutan, menampilkan dimensi sebenarnya dan ukuran terukur, dan dapat mengemas file yang sudah dikodekan ke dalam ZIP. Penyimpanan ZIP tidak meningkatkan kompresi gambar di sini; kontennya mencatat bahwa format tersebut sudah dikompresi. Unduhan individual dan arsip keduanya berasal dari byte yang dibuat secara lokal.
Implementasi ini melakukan pekerjaan ekspor di thread utama, bukan di Web Worker
Buku kerja mengatakan pekerjaan berat biasanya berjalan di Web Worker, namun aplikasi ini mengimpor fungsi pemangkasan dan rendering langsung ke main.js dan mengulangi target di sana. Tidak ada Pekerja yang dibuat di jalur yang diperiksa. Halaman tersebut masih dapat digunakan untuk pekerjaan biasa, namun daya tanggap harus diperhatikan dan bukan dikaitkan dengan arsitektur yang tidak ada.
Isolasi jaringan didukung oleh dua jenis bukti. Pengujian inti memasang pelindung jaringan dan membingkai setiap preset tanpa upaya, sementara catatan produk menandai pemrosesan lokal. Pemeriksaan panel Jaringan runtime dapat menambahkan bukti penerapan. Ini harus membedakan unggahan gambar dari aset halaman biasa atau analisis yang diungkapkan, bukannya mengklaim seluruh halaman tidak membuat permintaan.
Apa yang tidak tercakup di sini — GPU-percepatan pengubahan ukuran pustaka dan pipeline gambar sisi server
Rute ini sengaja dibuat di browser primitif, bukan di perpustakaan GPU atau saluran media jarak jauh. Itu tidak mengekspos kernel pengambilan sampel ulang yang dapat dipilih, algoritma alternatif benchmark atau menjanjikan pemrosesan batch yang dipercepat. Satu gambar sumber menghasilkan beberapa hasil panen; banyak file sumber yang tidak terkait milik alur kerja yang berbeda.
Pengecualian tersebut membuat janji tersebut dapat diuji. Kode ini membuktikan validasi file, decoding bitmap, framing aritmatika, gambar kanvas, pengkodean Blob, dan perakitan unduhan. Ini tidak membuktikan bagaimana server farm akan mengubah ukuran piksel yang sama atau jalur GPU mana yang dapat dipilih browser secara internal. Klaim berhenti pada API Web yang dapat diamati yang digunakan.
Kesimpulan: browser Anda sudah memiliki resizer bawaan — Social Image Resizer menggerakkannya untuk Anda, memotong dan menskalakan ke rasio aspek platform tanpa mengunggah file
Browser sudah menyediakan operasi penting, namun hasil yang bermanfaat bergantung pada geometri yang benar di sekitarnya. Social Image Resizer memilih skala maksimum untuk perlindungan, skala minimum untuk penahanan, gerakan penjepit, meninjau panduan area aman secara terpisah dan mengekspor pada dimensi target yang tepat. Orkestrasi tersebut mengubah gambar tingkat rendah API menjadi alur kerja aset sosial yang berulang.
Uji alur dengan gambar asli, bukan salinan yang telah diperkecil sebelumnya. Pilih preset alat atau rasio khusus saat ini, pindahkan subjek, ekspor sekali, dan periksa dimensi yang diunduh. Buktinya adalah file lokal yang Anda terima dan jalur kode yang membuatnya, bukan klaim bahwa setiap browser menggunakan resampler tersembunyi yang identik.