Gambar & foto · Editor Gambar & Gambar Browser
Cara kerja pemotongan di editor gambar browser: kanvas dan piksel
· Cara kerjanya
pengeditan gambar kanvas pemrosesan browser
Memangkas terlihat sepele, tetapi editor browser harus memecahkan kode file, menyalin piksel persegi panjang ke kanvas, dan menyandikan file baru. Posting ini menjelaskan setiap langkah dan menjelaskan apa saja yang berubah dan apa yang tetap sama.
Mengapa foto yang dipotong merupakan file baru, bukan file lama yang telah dipotong — pemotongan tidak dapat begitu saja menghapus byte dari JPEG atau PNG, sehingga editor mendekode dan mengkode ulang
JPEG menyimpan data gambar terkompresi, bukan satu rentang byte yang dapat dihapus secara independen per baris yang terlihat. Memotong byte pada ujungnya akan merusak file, bukan memotong foto. Oleh karena itu, editor browser menerjemahkan gambar tersebut, memilih persegi panjang dan membuat file baru yang disandikan. Dokumen asli tetap ada di disk Anda. Jika Anda memerlukan pengeditan yang dapat dibalik, pertahankan sumber dan koordinat pemilihan: potongan yang diekspor tidak mengandung piksel yang hilang.
Mendekode gambar menjadi bitmap — cara browser mengubah byte terkompresi menjadi kisi lebar × tinggi RGBA piksel sebelum apa pun dapat dipilih
Browser mengubah JPEG, PNG atau WebP yang dikompresi menjadi bitmap dengan sampel lebar × tinggi. Gambar 4000×3000 mewakili dua belas juta piksel sebelum dipotong, dan beberapa byte per piksel dapat membuat jejak di dalam memori jauh lebih besar daripada file di disk. ToolAcre memeriksa batas gambar dan kanvas sebelum mengalokasikan ruang kerja yang sangat besar. Apa yang Anda lihat di layar mungkin diperbesar agar sesuai dengan area pandang; persegi panjang yang dipotong masih harus dipetakan kembali ke koordinat gambar sebelum piksel disalin.
Memilih persegi panjang: koordinat sumber dan tujuan — cara drawImage menyalin wilayah yang dipilih ke kanvas dengan ukuran target, dan arti pembulatan ke piksel utuh
Persegi panjang adalah titik asal (x,y) ditambah lebar dan tinggi, diukur dalam piksel sumber. ToolAcre membatasi persegi panjang tersebut ke batas dokumen dan memotong setiap lapisan yang terlihat, bukan hanya tangkapan layar dari pratinjau gabungan. Untuk setiap lapisan, ia membuat kanvas target dan memanggil drawImage dengan sembilan argumen: kanvas sumber, persegi panjang sumber, asal tujuan, dan ukuran tujuan. Dengan dimensi sumber dan tujuan yang sama, piksel dipilih tanpa langkah pengubahan ukuran. Posisi penunjuk pecahan dibulatkan atau dijepit ke piksel kanvas yang dapat direpresentasikan.
Mengkodekan hasilnya kembali ke file — mengapa langkah ekspor menentukan format dan kualitas, dan mengapa pemotongan itu sendiri tepat sedangkan pengkodeannya mungkin tidak
Ekspor adalah operasi terpisah dari tanaman. Kanvas yang diedit dapat dikodekan sebagai PNG, JPEG atau WebP bergantung pada opsi dan dukungan browser. PNG dapat mempertahankan piksel yang dipasok ke pembuat enkode lossless; JPEG menghilangkan beberapa detail meskipun persegi panjang dipilih dengan tepat, dan transparansi memerlukan latar belakang yang disengaja saat menggunakan format tanpa alfa. File baru juga dapat menghilangkan metadata sumber atau informasi warna, jadi jangan pernah mendeskripsikannya sebagai subset byte demi byte dari file asli.
Contoh praktis: memotong foto 4000×3000 ke spanduk 1600×900 — mengikuti jumlah piksel melalui dekode, salin, dan ekspor
Untuk blogger dengan foto 4000×3000, spanduk 1600×900 di tengah dimulai pada x=1200 dan y=1050. drawImage menyalin kolom 1200 hingga 2799 dan baris 1050 hingga 1949 ke keluaran 1600×900: 1.44 juta piksel, bukan dua belas juta. Jika Anda malah meminta editor untuk mengecilkan seluruh foto menjadi 1600×900, Anda mengubah rasio aspeknya dan mengambil sampel ulang daripada melakukan pemangkasan ini. Pada ponsel dengan memori terbatas, editor mungkin mengurangi masukan yang sangat besar terlebih dahulu, jadi periksalah dimensi yang ditampilkan sebelum mengulangi koordinat ini.
Hasil panen yang diekspor tidak dapat diperoleh kembali dari gambar aslinya
Ini bukan pemangkasan blok JPEG yang lossless: aplikasi menggambar piksel dan mengekspor kontainer baru. File 1600×900 yang diekspor juga tidak dapat memulihkan margin yang dibuang setelah Anda menutup file asli. Dokumen pengeditan berlapis berbeda lagi: pemotongan dilakukan pada lapisan dokumen, sementara ekspor menggabungkannya ke dalam gambar yang diunduh. Untuk materi sensitif, memotong margin lebih aman daripada sekadar menggambar hamparan buram, namun periksa piksel yang diekspor dan jaga privasi aslinya.
Kesimpulan: piksel yang tepat, wadah baru — mengapa pemotongan browser dilakukan dengan tepat dan bagaimana Editor Gambar & Gambar Browser melakukannya tanpa mengunggah file
Pemotongan browser menentukan secara tepat piksel mana yang didekodekan yang harus disimpan, sementara pembuat enkode yang dipilih mengontrol file yang diunduh. Editor Gambar & Gambar Browser melakukan kedua langkah di perangkat Anda: memuat gambar, memilih persegi panjang, menerapkan pemotongan, dan mengekspor. Jaringan tidak memerlukan byte foto untuk langkah mana pun, namun aset situs dan permintaan AdSense/analytics yang diungkapkan tidak sama dengan unggahan file di DevTools.