Nota daripada pasukan tentang kraf, format, dan keputusan kecil di sebalik potongan bulat yang baik.
Bagaimana Cropper.js v2 melukis topeng bulatan
Cropper.js v2 dihantar sebagai Web Component dengan elemen seperti cropper-canvas, cropper-image dan cropper-handle. Pemotongan bulatan bukan tipu muslihat CSS border-radius, sebaliknya ia ialah operasi komposit kanvas (destination-in) yang digunakan pada masa eksport. Pengguna melihat keseluruhan gambar dengan hamparan gelap, dan kawasan pilihan bulatan dikira secara langsung dari kedudukan pemegang yang disimpan dalam keadaan dalaman komponen. Apabila Simpan diklik, kanvas sementara dicipta pada dimensi yang dipilih, gambar dilukis ke atasnya, dan topeng komposit membuang segala-galanya di luar bulatan. Untuk PNG, WebP dan AVIF hasilnya menyertakan saluran alfa. Untuk JPEG piksel telus diisi dengan warna pepejal sebelum pengekodan kerana JPEG tiada spesifikasi saluran alfa. Cropper.js v2 dilesenkan di bawah MIT dan dihoskan di GitHub di repositori fengyuanchen/cropperjs.
PNG, WebP, AVIF dan JPEG untuk pemotongan bulatan
Setiap format mempunyai kes penggunaan terbaiknya. PNG ialah tanpa kehilangan, disokong secara universal, dan menghasilkan fail lebih besar, dengan eksport bulatan 512 kali 512 daripada foto 8 megapiksel rata-rata 180 hingga 350 KB bergantung pada kerumitan foto. WebP ialah tanpa kehilangan secara visual pada kualiti 85 hingga 90, kira-kira 25 hingga 40 peratus lebih kecil daripada PNG, dan disokong oleh semua pelayar moden sejak 2023. AVIF menggunakan pengekodan intra AV1, biasanya 40 hingga 50 peratus lebih kecil daripada WebP pada kualiti visual yang setara, tetapi penyekod @jsquash/avif WASM mengambil masa lebih lama, sekitar 3 saat pada desktop dan sehingga 30 saat pada mudah alih mid-range untuk input 8 megapiksel. JPEG ialah pengekodan terpantas pada kira-kira 400 milisaat di desktop, tetapi tiada alfa, jadi gunakannya hanya apabila platform destinasi menolak fail telus.
Panduan saiz platform untuk avatar bulatan
Keperluan saiz untuk empat platform dalam ekor panjang. LinkedIn memaparkan foto profil pada minimum 400 kali 400 piksel, diberikan bulatan pada halaman profil dan pada saiz lebih kecil sekitar 48 piksel dalam suapan. Discord menunjukkan ikon pelayan pada maksimum 512 kali 512 yang diberikan bulatan, dengan avatar pengguna pada 128 kali 128 dalam senarai ahli pelayan dan 32 kali 32 dalam sembang. Instagram memaparkan gambar profil secara bulatan pada kira-kira 110 piksel pada profil mudah alih dan 32 piksel dalam lakaran kecil suapan. Slack menerima avatar ruang kerja pada maksimum 512 kali 512 untuk muat naik, kemudian diberikan bulatan dalam senarai saluran pada kira-kira 36 piksel. Alat ini mengeksport pada resolusi foto asal, jadi jika anda memerlukan saiz output tepat, ubah saiz gambar terlebih dahulu menggunakan alat ubah saiz.
HEIC dan had khusus Safari yang dijelaskan
HEIC ialah format bekas Apple yang menggunakan mampatan HEVC. Safari 17 dan ke atas mengendalikan HEIC secara asli melalui createImageBitmap, dan itulah sebabnya memotong foto iPhone berfungsi pada Safari tanpa penukaran. Chrome, Firefox dan Edge tidak melaksanakan createImageBitmap untuk HEIC pada 2026, dan mereka mengembalikan ralat penyahkodan. Alat ini menghidu bait ajaib semasa muat naik, dan jika fail HEIC dikesan pada pelayar bukan Safari, ralat mesra mencadangkan penukaran kepada JPG terlebih dahulu. Penyelesaian untuk pengguna bukan Safari termasuk membuka foto pada iPhone dalam aplikasi Foto dan berkongsi sebagai JPG, atau menggunakan alat tukar PNG kepada JPG jika anda sudah mempunyai fail HEIC pada desktop. Nota penting: fail HEIC yang dinamakan semula kepada akhiran .jpg masih akan ditolak kerana penghidu bait ajaib mengesan penggantian nama itu.
Mengapa kawasan di luar bulatan adalah telus
Apabila anda mengeksport pemotongan bulatan PNG atau WebP, piksel di luar sempadan bulatan mempunyai nilai alfa sifar, iaitu sepenuhnya telus. Ini bermakna pada platform yang memaparkan avatar dalam bingkai bulatan, latar belakang telus menjadi tidak kelihatan dan warna latar belakang platform sendiri menembusi dengan bersih. Pada platform yang menunjukkan fail pada saiz penuh seperti pratonton lampiran fail atau album foto, kawasan telus ditunjukkan sebagai papan dam. Jika anda menampal bulatan ke dalam alat reka bentuk seperti Figma atau Canva, anda boleh melapiskannya pada mana-mana warna tanpa artifak halo putih. Pilihan JPEG wujud untuk kes di mana ketelusan menimbulkan masalah, termasuk sesetengah klien e-mel, sesetengah pemuat naik imej CMS, dan sesetengah platform lama yang menggantikan ketelusan dengan hitam.
Menggunakan tab Rangkaian DevTools untuk mengesahkan pemprosesan dalam pelayar
Pengguna ingin tahu boleh mengesahkan gambar tidak meninggalkan peranti mereka dengan langkah ringkas. Buka DevTools pelayar (F12 atau klik kanan diikuti Periksa), pergi ke tab Rangkaian, klik Padam untuk mengalih keluar entri sebelumnya, kemudian muat naik gambar ke alat pemotongan bulatan dan seret pemegang. Perhatikan tab Rangkaian semasa muat naik dan seretan pemotongan. Satu-satunya permintaan yang muncul adalah untuk aset halaman seperti JS, CSS dan fon yang dimuatkan sebelum muat naik, dan tiada permintaan POST atau PUT baharu yang membawa data gambar akan muncul. Selepas mengklik Simpan, satu permintaan ke URL bermula dengan blob: muncul dalam tab sebentar, dan itu menunjukkan pelayar menyelesaikan blob tempatan, bukan menghantar data ke pelayan. Pengesahan ini boleh dilakukan dalam Chrome, Firefox, Safari dan Edge.
