Cara kerja pemotongan gambar berbasis browser
Proses pemotongan berjalan sepenuhnya di dalam tab browser Anda menggunakan Canvas API. Tidak ada pemrosesan sisi server, tidak ada unggahan, tidak ada layanan pihak ketiga. Setiap langkah terjadi di perangkat Anda.
- Muat gambar ke elemen
<img>sehingga browser mendekodekannya secara lokal. Hamparan canvas merender gambar yang diskalakan agar sesuai dengan viewport sementara persegi panjang seleksi yang dapat diseret menunjukkan area potong saat ini. - Seret persegi panjang melalui tepi atau sudutnya untuk menyesuaikan area potong. Persegi panjang tetap terkurung dalam batas gambar sehingga Anda tidak dapat memilih area di luar gambar. Saat rasio aspek tetap aktif (1:1, 16:9, 4:3), perubahan ukuran mempertahankan rasio tersebut secara otomatis.
- Pembacaan piksel diperbarui secara langsung saat Anda menyeret, menampilkan lebar, tinggi, posisi X dan Y potongan saat ini dalam koordinat piksel gambar. Ini memungkinkan Anda menargetkan dimensi yang tepat tanpa tebak-tebakan.
- Saat Anda mengklik Potong & Unduh, halaman menggambar hanya wilayah yang dipilih dari gambar sumber ke canvas offscreen pada resolusi piksel asli, lalu mengekspor hasilnya melalui
canvas.toBlob()dalam format yang sama dengan file sumber. URL Blob dibuat untuk unduhan.
Mengapa memotong gambar online?
- Pemotongan menghilangkan tepi yang tidak diinginkan, ruang kosong, atau kekacauan visual. Satu kali pemotongan sering meningkatkan komposisi foto lebih dari filter atau penyesuaian warna apa pun.
- Kontrol rasio aspek sangat penting untuk platform penerbitan. Umpan media sosial mengharapkan 1:1 untuk profil, 16:9 untuk thumbnail video, dan 4:3 untuk fotografi standar. Memotong ke rasio yang tepat menghindari letterboxing atau pemotongan yang canggung saat mengunggah.
- Pemotongan sisi klien adalah satu-satunya opsi di perangkat perusahaan terbatas yang tidak memiliki editor foto. Karena tidak ada yang diunggah, tidak ada risiko kebocoran data dan tidak perlu tinjauan kepatuhan untuk gambar sensitif.
- Pembacaan dimensi langsung menghilangkan tebak-tebakan. Anda melihat koordinat piksel dan ukuran seleksi saat menyeret, sehingga Anda dapat memotong ke lebar dan tinggi yang tepat tanpa beralih ke alat pengukuran piksel.
Aplikasi pemotongan umum
Pemotongan adalah salah satu suntingan gambar paling umum di penerbitan web, media sosial, dan pengembangan perangkat lunak. Berikut tiga pola di mana pemotong berbasis browser menghemat waktu.
- Menyiapkan foto produk untuk toko online. Potong ke rasio aspek 1:1 atau 4:5 yang konsisten sehingga setiap thumbnail listing sejajar di grid. Ekspor mempertahankan format asli, jadi foto produk JPEG tetap sebagai JPEG.
- Memangkas tangkapan layar untuk dokumentasi atau laporan bug. Potong bilah alat browser, bilah tugas Windows, atau notifikasi sensitif sebelum melampirkan gambar ke tiket atau pull request.
- Membingkai gambar hero atau banner untuk halaman arahan. Kunci prasetel 16:9, posisikan bagian terpenting foto di tengah persegi panjang potong, dan ekspor pada resolusi asli untuk kualitas terbaik di layar retina.
Contoh kerja: memotong foto 4000×3000 menjadi 1200×675 untuk banner hero
Foto 4000×3000 piksel dari kamera digital terlalu besar untuk banner hero web biasa. Ruang banner mungkin 1200×675 (bingkai 16:9).
Jatuhkan foto ke zona unggah. Gambar dimuat pada resolusi penuh tetapi diskalakan agar sesuai dengan viewport untuk interaksi seret yang nyaman. Pilih prasetel rasio aspek 16:9. Persegi panjang potong langsung menempel ke wilayah 16:9 terlebar yang muat di gambar. Seret persegi panjang untuk memposisikan titik fokus — puncak gunung, produk, wajah seseorang — dalam bingkai. Pembacaan langsung menunjukkan seleksi saat ini pada 4000×2250 (jendela 16:9 gambar penuh). Ambil gagang sudut dan seret ke dalam hingga pembacaan lebar mencapai 1200 px. Tinggi mengikuti secara otomatis karena rasio terkunci. Klik Potong & Unduh. Halaman mengekstrak wilayah 1200×675 yang dipilih dari piksel asli dan memberikan file yang dipotong dalam format sumber. Seluruh proses memakan waktu satu atau dua detik dan tidak menggunakan bandwidth jaringan selain pemuatan halaman awal.
Format gambar apa yang didukung untuk pemotongan?
Alat ini menerima format apa pun yang dapat didekodekan browser: PNG, JPEG, dan WebP mencakup hampir semua kasus penggunaan nyata. Output yang dipotong disimpan dalam format yang sama dengan file sumber. PNG tetap lossless, JPEG mempertahankan tingkat kualitas aslinya, dan WebP tetap sebagai WebP. Format dideteksi dari tipe MIME file sumber.
Apakah pemotongan mengurangi ukuran file gambar?
Pemotongan menghilangkan piksel, sehingga ukuran file output biasanya lebih kecil dari sumber, terutama saat Anda memotong batas besar atau area kosong. Ekspor menggunakan format file asli dan parameter pengkodeannya — PNG tetap lossless, JPEG mempertahankan pengaturan kualitas aslinya — sehingga penghematan hanya berasal dari jumlah piksel yang berkurang, bukan dari kompresi ulang.
Apa yang dilakukan prasetel rasio aspek?
Prasetel (1:1, 16:9, 4:3, 3:2, 9:16) mengunci rasio lebar-ke-tinggi persegi panjang potong. Saat prasetel aktif, menyeret gagang sudut atau tepi akan menyesuaikan ukuran seleksi sambil menjaga rasio tetap konstan. Beralih ke mode Bebas menghapus batasan sehingga Anda dapat mengubah ukuran persegi panjang secara bebas. Rasio diterapkan pada koordinat piksel gambar, sehingga output yang diekspor memiliki rasio aspek yang persis Anda pilih.
Apakah gambar diunggah ke server?
Tidak. Gambar tidak pernah meninggalkan perangkat Anda. Halaman menggunakan File API browser untuk membaca gambar ke memori dan Canvas API untuk memotong dan mengekspor hasilnya. Anda dapat memverifikasi ini dengan membuka panel Network DevTools browser Anda — satu-satunya permintaan keluar selama pemotongan adalah pemuatan halaman awal dan panggilan iklan. Tidak ada data gambar yang dikirimkan.
Bisakah saya memotong area tertentu dengan memasukkan koordinat piksel yang tepat?
Versi saat ini menyesuaikan persegi panjang potong melalui interaksi seret pada pratinjau gambar. Anda dapat membaca koordinat piksel langsung untuk X, Y, lebar, dan tinggi seleksi. Input numerik langsung untuk persegi panjang potong tidak tersedia di v1 tetapi merupakan peningkatan yang direncanakan untuk pembaruan mendatang.
Apa yang terjadi pada gambar asli?
File asli tetap ada di perangkat Anda. Halaman membacanya ke memori browser untuk ditampilkan dan dipotong, tetapi tidak pernah memodifikasi file sumber di disk. Output yang dipotong adalah file baru yang Anda unduh secara terpisah. File asli tetap tidak tersentuh di lokasi aslinya di komputer atau ponsel Anda.
Apakah ada batas ukuran file untuk pemotongan?
Alat ini mematuhi batas 30 MB per file di zona unggah untuk menjaga memori browser tetap terkendali di perangkat kelas bawah. Jika gambar Anda lebih besar dari 30 MB, Anda dapat mengubah ukurannya terlebih dahulu menggunakan alat pengubah ukuran gambar khusus sebelum memuatnya di sini untuk dipotong.
Apakah pemotongan berfungsi di ponsel dan tablet?
Ya. Gagang potong diukur dengan mempertimbangkan target sentuh, dan interaksi menggunakan peristiwa penunjuk yang berfungsi dengan klik mouse dan ketukan jari. Di layar ponsel, pratinjau gambar beradaptasi dengan lebar yang tersedia, dan kontrol ditumpuk secara vertikal untuk kemudahan penggunaan satu tangan.