Cara pemotongan gambar berasaskan pelayar berfungsi
Proses pemotongan berjalan sepenuhnya dalam tab pelayar anda menggunakan Canvas API. Tiada pemprosesan sisi pelayan, tiada muat naik, tiada perkhidmatan pihak ketiga. Setiap langkah berlaku pada peranti anda.
- Muatkan gambar ke dalam elemen
<img>supaya pelayar menyahkodnya secara setempat. Sebuah kanvas tindan merender gambar yang diskalakan agar muat dalam viewport sementara segi empat tepat pemilihan boleh seret menunjukkan kawasan potong semasa. - Seret segi empat tepat melalui tepi atau sudutnya untuk menyesuaikan kawasan potong. Segi empat tepat kekal terkurung dalam sempadan gambar supaya anda tidak boleh memilih kawasan di luar gambar. Apabila nisbah bidang tetap aktif (1:1, 16:9, 4:3), pengubahan saiz mengekalkan nisbah tersebut secara automatik.
- Bacaan piksel dikemas kini secara langsung semasa anda menyeret, menunjukkan lebar, tinggi, kedudukan X dan Y potongan semasa dalam koordinat piksel gambar. Ini membolehkan anda menyasarkan dimensi tepat tanpa perlu meneka.
- Apabila anda klik Potong & Muat Turun, halaman melukis hanya kawasan terpilih dari gambar sumber ke atas kanvas luar skrin pada resolusi piksel asal, kemudian mengeksport hasil melalui
canvas.toBlob()dalam format yang sama dengan fail sumber. URL Blob dijana untuk muat turun.
Mengapa memotong gambar dalam talian?
- Pemotongan menghilangkan tepi yang tidak diingini, ruang kosong, atau kekacauan visual. Satu potongan sering memperbaiki komposisi foto lebih daripada mana-mana penapis atau pelarasan warna.
- Kawalan nisbah bidang adalah penting untuk platform penerbitan. Suapan media sosial menjangkakan 1:1 untuk profil, 16:9 untuk thumbnail video, dan 4:3 untuk fotografi standard. Memotong kepada nisbah yang betul mengelakkan letterboxing atau pemotongan yang janggal apabila memuat naik.
- Pemotongan sisi klien adalah satu-satunya pilihan pada peranti korporat terhadap yang tidak mempunyai editor foto. Kerana tiada yang dimuat naik, tiada risiko kebocoran data dan tiada semakan pematuhan diperlukan untuk gambar sensitif.
- Bacaan dimensi langsung menghilangkan tekaan. Anda melihat koordinat piksel dan saiz pemilihan semasa menyeret, jadi anda boleh memotong kepada lebar dan tinggi tepat tanpa beralih ke alat ukuran piksel.
Aplikasi pemotongan biasa
Pemotongan adalah salah satu suntingan gambar paling biasa dalam penerbitan web, media sosial, dan pembangunan perisian. Berikut adalah tiga corak di mana pemangkas berasaskan pelayar menjimatkan masa.
- Menyediakan foto produk untuk kedai dalam talian. Potong kepada nisbah bidang 1:1 atau 4:5 yang konsisten supaya setiap thumbnail senarai sejajar dalam grid. Eksport mengekalkan format asal, jadi gambar produk JPEG kekal sebagai JPEG.
- Memangkas tangkapan skrin untuk dokumentasi atau laporan pepijat. Potong bar alat pelayar, bar tugas Windows, atau pemberitahuan sensitif sebelum melampirkan gambar pada tiket atau pull request.
- Membingkai gambar hero atau banner untuk halaman pendaratan. Kunci pratetap 16:9, letakkan bahagian paling penting gambar di tengah segi empat tepat potong, dan eksport pada resolusi asal untuk kualiti terbaik pada paparan retina.
Contoh kerja: memotong foto 4000×3000 kepada 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).
Letak foto ke dalam zon muat naik. Gambar dimuatkan pada resolusi penuh tetapi diskalakan agar muat dalam viewport untuk interaksi seret yang selesa. Pilih pratetap nisbah bidang 16:9. Segi empat tepat potong terus melekat pada kawasan 16:9 terlebar yang muat dalam gambar. Seret segi empat tepat untuk meletakkan titik fokus — puncak gunung, produk, muka seseorang — dalam bingkai. Bacaan langsung menunjukkan pemilihan semasa pada 4000×2250 (tetingkap 16:9 gambar penuh). Ambil pemegang sudut dan seret ke dalam sehingga bacaan lebar mencapai 1200 px. Tinggi mengikut secara automatik kerana nisbah dikunci. Klik Potong & Muat Turun. Halaman mengekstrak kawasan 1200×675 yang dipilih dari piksel asal dan menghantar fail yang dipotong dalam format sumber. Seluruh perjalanan pergi balik mengambil masa satu atau dua saat dan tidak menggunakan lebar jalur rangkaian selain pemuatan halaman awal.
Apakah format gambar yang disokong untuk pemotongan?
Alat ini menerima mana-mana format yang boleh dinyahkod oleh pelayar: PNG, JPEG, dan WebP meliputi hampir semua kes penggunaan dunia sebenar. Output yang dipotong disimpan dalam format yang sama dengan fail sumber. PNG kekal lossless, JPEG mengekalkan tahap kualiti asalnya, dan WebP kekal sebagai WebP. Format dikesan dari jenis MIME fail sumber.
Adakah pemotongan mengurangkan saiz fail gambar?
Pemotongan membuang piksel, jadi saiz fail output biasanya lebih kecil daripada sumber, terutamanya apabila anda memotong sempadan besar atau kawasan kosong. Eksport menggunakan format fail asal dan parameter pengekodannya — PNG kekal lossless, JPEG mengekalkan tetapan kualiti asalnya — jadi penjimatan hanya datang dari jumlah piksel yang berkurang, bukan dari pemampatan semula.
Apakah yang dilakukan oleh pratetap nisbah bidang?
Pratetap (1:1, 16:9, 4:3, 3:2, 9:16) mengunci nisbah lebar-ke-tinggi segi empat tepat potong. Apabila pratetap aktif, menyeret mana-mana pemegang sudut atau tepi akan menyesuaikan saiz pemilihan sambil mengekalkan nisbah tetap. Bertukar ke mod Bebas mengeluarkan kekangan supaya anda boleh mengubah saiz segi empat tepat secara sewenang-wenangnya. Nisbah dikuatkuasakan pada koordinat piksel gambar, jadi output yang dieksport mempunyai nisbah bidang yang tepat anda pilih.
Adakah gambar dimuat naik ke pelayan?
Tidak. Gambar tidak pernah meninggalkan peranti anda. Halaman menggunakan API Fail pelayar untuk membaca gambar ke dalam ingatan dan API Canvas untuk memotong dan mengeksport hasilnya. Anda boleh mengesahkan ini dengan membuka panel Rangkaian DevTools pelayar anda — satu-satunya permintaan keluar semasa pemotongan adalah pemuatan halaman awal dan panggilan iklan. Tiada data gambar dihantar.
Bolehkah saya memotong kawasan tertentu dengan memasukkan koordinat piksel tepat?
Versi semasa melaraskan segi empat tepat potong melalui interaksi seret pada pratonton gambar. Anda boleh membaca koordinat piksel langsung untuk X, Y, lebar, dan tinggi pemilihan. Input numerik langsung untuk segi empat tepat potong tidak tersedia dalam v1 tetapi merupakan peningkatan yang dirancang untuk kemas kini akan datang.
Apa yang berlaku pada gambar asal?
Fail asal kekal pada peranti anda. Halaman membacanya ke dalam ingatan pelayar untuk paparan dan pemotongan, tetapi tidak pernah mengubah suai fail sumber pada cakera. Output yang dipotong adalah fail baharu yang anda muat turun secara berasingan. Yang asal kekal tidak disentuh di lokasi asalnya pada komputer atau telefon anda.
Adakah terdapat had saiz fail untuk pemotongan?
Alat ini mematuhi had 30 MB setiap fail di zon muat naik untuk mengawal ingatan pelayar pada peranti rendah. Jika gambar anda lebih besar daripada 30 MB, anda boleh mengubah saiznya terlebih dahulu menggunakan alat pengubah saiz gambar khusus sebelum memuatkannya di sini untuk dipotong.
Adakah pemotongan berfungsi pada telefon mudah alih dan tablet?
Ya. Pemegang potong bersaiz dengan mengambil kira sasaran sentuhan, dan interaksi menggunakan peristiwa penunjuk yang berfungsi dengan kedua-dua klik tetikus dan ketukan jari. Pada skrin telefon, pratonton gambar menyesuaikan dengan lebar tersedia, dan kawalan bertindan secara menegak untuk penggunaan satu tangan yang mudah.