cropperjs
v1.6.2
JavaScript gambar cropper. Ini adalah cabang untuk v1.x, untuk v2.x, lihat cabang
v2.
dist/
├── cropper.css
├── cropper.min.css (compressed)
├── cropper.js (UMD)
├── cropper.min.js (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js (ES Module)
npm install cropperjsDi browser:
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJS menyediakan dukungan CDN untuk CSS dan JavaScript CROSS.JS. Anda dapat menemukan tautan di sini.
new Cropper ( element [ , options ] )elemen
HTMLImageElement atau HTMLCanvasElementopsi (opsional)
Object <!-- Wrap the image or canvas element with a block element (container) -->
< div >
< img id =" image " src =" picture.jpg " >
</ div > /* Make sure the size of the image fits perfectly into the container */
img {
display : block;
/* This rule is very important, please don't ignore this */
max-width : 100 % ;
} // import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs' ;
const image = document . getElementById ( 'image' ) ;
const cropper = new Cropper ( image , {
aspectRatio : 16 / 9 ,
crop ( event ) {
console . log ( event . detail . x ) ;
console . log ( event . detail . y ) ;
console . log ( event . detail . width ) ;
console . log ( event . detail . height ) ;
console . log ( event . detail . rotate ) ;
console . log ( event . detail . scaleX ) ;
console . log ( event . detail . scaleY ) ;
} ,
} ) ; Bagaimana cara memotong area baru setelah memperbesar atau memperbesar?
Klik dua kali mouse Anda untuk memasuki mode tanaman.
Bagaimana cara memindahkan gambar setelah memangkas suatu daerah?
Klik dua kali mouse Anda untuk memasuki Mode Pindah.
Bagaimana cara memperbaiki rasio aspek dalam mode rasio gratis?
Tahan saja tombol
Shiftsaat Anda mengubah ukuran kotak crop.
Bagaimana cara memotong area persegi dalam mode rasio gratis?
Tahan saja tombol
Shiftsaat Anda memotong gambar.
Ukuran cropper mewarisi dari ukuran elemen induk gambar (pembungkus), jadi pastikan untuk membungkus gambar dengan elemen blok yang terlihat .
Jika Anda menggunakan cropper dalam modal, Anda harus menginisialisasi cropper setelah modal ditampilkan sepenuhnya. Jika tidak, Anda tidak akan mendapatkan cropper yang benar.
Data cropped yang dikeluarkan didasarkan pada ukuran gambar asli, sehingga Anda dapat menggunakannya untuk memotong gambar secara langsung.
Jika Anda mencoba untuk memulai Cropper pada gambar silang-asal, pastikan browser Anda mendukung atribut Pengaturan HTML5 CORS, dan server gambar Anda mendukung opsi Access-Control-Allow-Origin (lihat HTTP Access Control (CORS)).
Batas Sumber Daya IOS yang Dikenal: Karena perangkat iOS membatasi memori, browser mungkin macet saat Anda memotong gambar besar (resolusi kamera iPhone). Untuk menghindari hal ini, Anda dapat mengubah ukuran gambar terlebih dahulu (lebih disukai di bawah 1024 piksel) sebelum memulai cropper.
Ukuran gambar yang diketahui meningkat: Saat mengekspor gambar yang dipangkas di sisi browser dengan metode HTMLCanvasElement.toDataURL , ukuran gambar yang diekspor mungkin lebih besar dari gambar asli. Ini karena jenis gambar yang diekspor tidak sama dengan gambar asli. Jadi cukup berikan tipe gambar asli sebagai parameter pertama ke toDataURL untuk memperbaikinya. Misalnya, jika jenis aslinya adalah JPEG, maka gunakan cropper.getCroppedCanvas().toDataURL('image/jpeg') untuk mengekspor gambar.
⬆ Kembali ke atas
Anda dapat mengatur opsi cropper dengan new Cropper(image, options) . Jika Anda ingin mengubah opsi default global, Anda dapat menggunakan Cropper.setDefaults(options) .
Number00 : Tidak ada batasan1 : Batasi kotak tanaman untuk tidak melebihi ukuran kanvas.2 : Batasi ukuran kanvas minimum agar pas di dalam wadah. Jika proporsi kanvas dan wadah berbeda, kanvas minimum akan dikelilingi oleh ruang ekstra di salah satu dimensi.3 : Batasi ukuran kanvas minimum untuk mengisi sesuai dengan wadah. Jika proporsi kanvas dan wadah berbeda, wadah tidak akan dapat menyesuaikan seluruh kanvas di salah satu dimensi. Tentukan mode tampilan cropper. Jika Anda mengatur viewMode ke 0 , kotak crop dapat meluas di luar kanvas, sedangkan nilai 1 , 2 , atau 3 akan membatasi kotak tanaman dengan ukuran kanvas. viewMode 2 atau 3 juga akan membatasi kanvas ke wadah. Tidak ada perbedaan antara 2 dan 3 ketika proporsi kanvas dan wadahnya sama.
String'crop''crop' : Buat kotak tanaman baru'move' : Pindahkan kanvas'none' : tidak melakukan apa -apaTentukan mode seret dari cropper.
NumberNaNTentukan rasio aspek awal kotak tanaman. Secara default, itu sama dengan rasio aspek kanvas (pembungkus gambar).
Hanya tersedia saat opsi
aspectRatiodiatur keNaN.
NumberNaNTentukan rasio aspek tetap dari kotak tanaman. Secara default, kotak crop memiliki rasio gratis.
Objectnull Data cropped sebelumnya yang Anda simpan akan diteruskan ke metode setData secara otomatis saat diinisialisasi.
Hanya tersedia ketika opsi
autoCroptelah diatur ke yangtrue.
Element , Array (Elemen), NodeList atau String (Selector)''Tambahkan elemen tambahan (wadah) untuk pratinjau.
Catatan:
aspectRatio , pastikan untuk mengatur rasio aspek yang sama ke wadah pratinjau.overflow: hidden ke wadah pratinjau.BooleantrueMulailah kembali cropper saat mengubah ukuran jendela.
BooleantrueKembalikan area yang dipotong setelah mengubah ukuran jendela.
BooleantruePeriksa apakah gambar saat ini adalah gambar lintas-asal.
Jika demikian, atribut crossOrigin akan ditambahkan ke elemen gambar yang dikloning, dan parameter cap waktu akan ditambahkan ke atribut src untuk memuat ulang gambar sumber untuk menghindari kesalahan cache browser.
Menambahkan atribut crossOrigin ke elemen gambar akan berhenti menambahkan cap waktu ke URL gambar dan berhenti memuat ulang gambar. Tetapi permintaan (XMLHTTPREQUEST) untuk membaca data gambar untuk pemeriksaan orientasi akan memerlukan cap waktu untuk merusak cache untuk menghindari kesalahan cache browser. Anda dapat mengatur opsi checkOrientation ke false untuk membatalkan permintaan ini.
Jika nilai atribut crossOrigin gambar adalah "use-credentials" , maka atribut withCredentials akan diatur ke true ketika membaca data gambar oleh XmlHttpRequest.
BooleantruePeriksa informasi orientasi exif gambar saat ini. Perhatikan bahwa hanya gambar JPEG yang dapat berisi informasi orientasi exif.
Tepatnya, baca nilai orientasi untuk memutar atau membalik gambar, dan kemudian angkanya nilai orientasi dengan 1 (nilai default) untuk menghindari beberapa masalah (1, 2) pada perangkat iOS.
Perlu mengatur opsi rotatable dan scalable ke true secara bersamaan.
Catatan: Jangan percaya ini sepanjang waktu karena beberapa gambar JPG mungkin memiliki nilai orientasi yang salah (non-standar)
Membutuhkan dukungan array yang diketik (yaitu 10+).
BooleantrueTunjukkan modal hitam di atas gambar dan di bawah kotak crop.
BooleantrueTunjukkan garis putus -putus di atas kotak crop.
BooleantrueTunjukkan indikator tengah di atas kotak tanaman.
BooleantrueTunjukkan modal putih di atas kotak crop (sorot kotak crop).
BooleantrueTunjukkan latar belakang kisi wadah.
BooleantrueAktifkan untuk memotong gambar secara otomatis saat diinisialisasi.
Number0.8 (80% dari gambar)Itu harus menjadi angka antara 0 dan 1. Tentukan ukuran area penanaman otomatis (persentase).
BooleantrueMemungkinkan untuk memindahkan gambar.
BooleantrueAktifkan untuk memutar gambar.
BooleantrueAktifkan untuk skala gambar.
BooleantrueAktifkan untuk memperbesar gambar.
BooleantrueAktifkan untuk memperbesar gambar dengan menyeret sentuhan.
BooleantrueAktifkan untuk memperbesar gambar dengan roda mouse.
Number0.1Tentukan rasio zoom saat memperbesar gambar dengan roda tikus.
BooleantrueAktifkan untuk memindahkan kotak crop dengan menyeret.
BooleantrueAktifkan untuk mengubah ukuran kotak crop dengan menyeret.
Booleantrue Aktifkan untuk beralih mode seret antara "crop" dan "move" saat mengklik dua kali pada cropper.
Membutuhkan Dukungan Acara
dblclick.
Number200Lebar minimum wadah.
Number100Tinggi minimum wadah.
Number0Lebar minimum kanvas (pembungkus gambar).
Number0Tinggi minimum kanvas (pembungkus gambar).
Number0Lebar minimum kotak tanaman.
Catatan: Ukuran ini relatif terhadap halaman, bukan gambar.
Number0Tinggi minimum kotak tanaman.
Catatan: Ukuran ini relatif terhadap halaman, bukan gambar.
Functionnull Jalan pintas ke acara ready .
Functionnull Jalan pintas ke acara cropstart .
Functionnull Jalan pintas ke acara cropmove .
Functionnull Pintasan ke acara cropend .
Functionnull Jalan pintas ke acara crop .
Functionnull Pintasan ke acara zoom .
⬆ Kembali ke atas
Karena ada proses asinkron saat memuat gambar, Anda harus memanggil sebagian besar metode setelah siap , kecuali setAspectRatio , replace dan destroy .
Jika suatu metode tidak perlu mengembalikan nilai apa pun, ia akan mengembalikan instance cropper (
this) untuk komposisi rantai.
new Cropper ( image , {
ready ( ) {
// this.cropper[method](argument1, , argument2, ..., argumentN);
this . cropper . move ( 1 , - 1 ) ;
// Allows chain composition
this . cropper . move ( 1 , - 1 ) . rotate ( 45 ) . scale ( 1 , - 1 ) ;
} ,
} ) ;Tunjukkan kotak crop secara manual.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;Setel ulang gambar dan kotak tanaman ke keadaan awalnya.
Bersihkan kotak tanaman.
URL :
Stringhassamesize (opsional):
BooleanfalseGanti SRC gambar dan membangun kembali cropper.
Aktifkan (membekukan) cropper.
Nonaktifkan (bekukan) cropper.
Hancurkan cropper dan lepaskan instance dari gambar.
Offsetx :
Numberoffsety (opsional):
NumberoffsetX .Pindahkan kanvas (pembungkus gambar) dengan offset relatif.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;X :
Numberleft kanvasy (opsional):
Numbertop dari kanvasx .Pindahkan kanvas (pembungkus gambar) ke titik absolut.
NumberZoom kanvas (pembungkus gambar) dengan rasio relatif.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;Rasio :
Numberpivot (opsional):
Object{ x: Number, y: Number }Zoom kanvas (pembungkus gambar) ke rasio absolut.
cropper . zoomTo ( 1 ) ; // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper . getContainerData ( ) ;
// Zoom to 50% from the center of the container.
cropper . zoomTo ( .5 , {
x : containerData . width / 2 ,
y : containerData . height / 2 ,
} ) ;NumberPutar gambar ke tingkat relatif.
Membutuhkan Dukungan Transformasi CSS3 2D (yaitu 9+).
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;NumberPutar gambar ke tingkat absolut.
SCALEX :
Number11 itu tidak melakukan apa -apa.scaley (opsional):
NumberscaleX .Skala gambar.
Membutuhkan Dukungan Transformasi CSS3 2D (yaitu 9+).
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 itu tidak melakukan apa -apa.Skala absis gambar.
Number11 itu tidak melakukan apa -apa.Skala ordinat gambar.
Bulat (opsional):
Booleanfalsetrue untuk mendapatkan nilai bulat.(nilai pengembalian):
Objectx : Kiri offset dari area yang dipotongy : Offset atas area yang dipotongwidth : Lebar area yang dipotongheight : ketinggian area yang dipotongrotate : derajat gambar yang diputarscaleX : Faktor penskalaan untuk diterapkan pada absis gambarscaleY : Faktor penskalaan untuk diterapkan pada ordinat gambarOutput Posisi area yang dipotong akhir dan data ukuran (berdasarkan ukuran alami gambar asli).
Anda dapat mengirim data ke sisi server untuk memotong gambar secara langsung:
- Putar gambar dengan properti
rotate.- Skala gambar dengan
scaleXdan propertiscaleY.- Tanam gambar dengan sifat
x,y,width, danheight.
ObjectgetData .Ubah posisi dan ukuran area yang dipotong dengan data baru (berdasarkan gambar asli).
Catatan: Metode ini hanya tersedia ketika nilai opsi
viewModelebih besar dari atau sama dengan1.
Objectwidth : Lebar wadah saat iniheight : Tinggi wadah saat iniOutput data ukuran kontainer.
Objectleft : Kiri offset gambartop : Offset atas gambarwidth : Lebar gambarheight : Tinggi gambarnaturalWidth : Lebar alami dari gambarnaturalHeight : Tinggi alami gambaraspectRatio : rasio aspek gambarrotate : derajat gambar yang diputar jika diputarscaleX : Faktor penskalaan yang akan diterapkan pada absis gambar jika diskalakanscaleY : Faktor penskalaan untuk diterapkan pada ordinat gambar jika diskalakanOutput posisi gambar, ukuran, dan data terkait lainnya.
Objectleft : Kiri offset dari kanvastop : Offset atas kanvaswidth : Lebar kanvasheight : Tinggi kanvasnaturalWidth : Lebar alami kanvas (hanya baca)naturalHeight : Tinggi alami kanvas (hanya baca)Output Posisi dan Data Posisi dan Ukuran Canvas (Pembungkus Gambar).
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : Kiri offset baru dari kanvastop : Offset baru di atas kanvaswidth : Lebar baru kanvasheight : ketinggian kanvas baruUbah posisi dan ukuran kanvas (pembungkus gambar) dengan data baru.
Objectleft : Kiri offset dari kotak tanamantop : Offset atas kotak tanamanwidth : Lebar kotak tanamanheight : Tinggi kotak tanamanOutput Posisi kotak tanaman dan data ukuran.
Objectleft : Kiri offset baru dari kotak tanamantop : Atas offset baru dari kotak cropwidth : Lebar baru dari kotak tanamanheight : Tinggi baru kotak tanamanUbah posisi dan ukuran kotak tanaman dengan data baru.
Opsi (opsional):
Objectwidth : Lebar tujuan kanvas output.height : Tinggi tujuan kanvas output.minWidth : Lebar tujuan minimum dari kanvas output, nilai defaultnya adalah 0 .minHeight : Tinggi tujuan minimum kanvas output, nilai default adalah 0 .maxWidth : Lebar tujuan maksimum dari kanvas output, nilai defaultnya Infinity .maxHeight : Tinggi tujuan maksimum kanvas output, nilai defaultnya Infinity .fillColor : Warna untuk mengisi nilai alfa apa pun di kanvas output, nilai default adalah transparent .imageSmoothingEnabled : Set untuk mengubah jika gambar dihaluskan ( true , default) atau tidak ( false ).imageSmoothingQuality : Tetapkan kualitas perataan gambar, salah satu dari "rendah" (default), "medium", atau "tinggi".rounded : true untuk menggunakan nilai bulat (posisi area dan data ukuran yang dipotong), nilai defaultnya false .(nilai pengembalian):
HTMLCanvasElementCatatan:
fillColor terlebih dahulu, jika tidak, bagian transparan dalam gambar JPEG akan menjadi hitam secara default.Dukungan Browser:
Dapatkan kanvas yang diambil dari gambar yang dipotong (kompresi lossy). Jika tidak dipotong, maka kembalikan kanvas yang menggambar seluruh gambar.
Setelah itu, Anda dapat menampilkan kanvas sebagai gambar secara langsung, atau menggunakan htmlcanvaselement.todataurl untuk mendapatkan URL data, atau menggunakan htmlcanvaselement.toBlob untuk mendapatkan gumpalan dan mengunggahnya ke server dengan formdata jika browser mendukung API ini.
Hindari mendapatkan gambar output kosong (atau hitam), Anda mungkin perlu mengatur properti maxWidth dan maxHeight ke angka terbatas, karena batas ukuran elemen kanvas. Juga, Anda harus membatasi rasio zoom maksimum (dalam acara zoom ) untuk alasan yang sama.
cropper . getCroppedCanvas ( ) ;
cropper . getCroppedCanvas ( {
width : 160 ,
height : 90 ,
} ) ;
cropper . getCroppedCanvas ( {
minWidth : 256 ,
minHeight : 256 ,
maxWidth : 4096 ,
maxHeight : 4096 ,
} ) ;
cropper . getCroppedCanvas ( {
fillColor : '#fff' ,
imageSmoothingEnabled : false ,
imageSmoothingQuality : 'high' ,
} ) ;
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
// The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.
cropper . getCroppedCanvas ( ) . toBlob ( ( blob ) => {
const formData = new FormData ( ) ;
// Pass the image file name as the third parameter if necessary.
formData . append ( 'croppedImage' , blob /*, 'example.png' */ ) ;
// Use `jQuery.ajax` method for example
$ . ajax ( '/path/to/upload' , {
method : 'POST' ,
data : formData ,
processData : false ,
contentType : false ,
success ( ) {
console . log ( 'Upload success' ) ;
} ,
error ( ) {
console . log ( 'Upload error' ) ;
} ,
} ) ;
} /*, 'image/png' */ ) ;NumberUbah rasio aspek kotak tanaman.
String'none''none' , 'crop' , 'move'Ubah mode seret.
Tips: Anda dapat beralih mode "tanaman" dan "pindahkan" dengan mengklik dua kali cropper.
⬆ Kembali ke atas
Acara ini menyala ketika gambar target telah dimuat dan instance cropper siap beroperasi.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;event.detail.originalEvent :
Eventpointerdown , touchstart , dan mousedownevent.detail.action :
String'crop' : Buat kotak tanaman baru'move' : Pindahkan kanvas (pembungkus gambar)'zoom' : Zoom masuk / keluar kanvas (pembungkus gambar) dengan sentuhan.'e' : Ubah Ukuran sisi timur dari kotak tanaman'w' : Ubah Ukuran Sisi Barat dari CROP BOX's' : mengubah ukuran sisi selatan dari kotak tanaman'n' : mengubah ukuran sisi utara dari kotak tanaman'se' : mengubah ukuran sisi tenggara kotak tanaman'sw' : mengubah ukuran sisi barat daya dari kotak tanaman'ne' : mengubah ukuran sisi timur laut dari kotak tanaman'nw' : Ubah Ukuran Sisi Barat Laut dari CROP BOX'all' : pindahkan kotak crop (semua arah)Acara ini menyala ketika kanvas (pembungkus gambar) atau kotak crop mulai berubah.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;event.detail.originalEvent :
Eventpointermove , touchmove , dan mousemove .event.detail.action : sama dengan "cropstart".
Acara ini menyala ketika kanvas (pembungkus gambar) atau kotak crop berubah.
event.detail.originalEvent :
Eventpointerup , pointercancel , touchend , touchcancel , dan mouseup .event.detail.action : sama dengan "cropstart".
Acara ini menyala ketika kanvas (pembungkus gambar) atau kotak crop berhenti berubah.
Tentang properti ini, lihat metode
getData.
Acara ini menyala ketika kanvas (pembungkus gambar) atau kotak crop berubah.
Catatan:
autoCrop diatur ke true , acara crop akan dipicu sebelum acara ready .data ditetapkan, acara crop lain akan dipicu sebelum acara ready .event.detail.originalEvent :
Eventwheel , pointermove , touchmove , dan mousemove .event.detail.oldratio :
NumberEvent.Detail.Ratio :
NumbercanvasData.width / canvasData.naturalWidth )Acara ini menyala ketika instance cropper mulai memperbesar atau memperbesar kanvasnya (pembungkus gambar).
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ Kembali ke atas
Jika Anda harus menggunakan cropper lain dengan namespace yang sama, hubungi cukup Cropper.noConflict Metode statis untuk kembali ke sana.
< script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
Cropper . noConflict ( ) ;
// Code that uses other `Cropper` can follow here.
</ script > Silakan baca pedoman yang berkontribusi.
Dipelihara di bawah pedoman versi semantik.
MIT © Chen Fengyuan
⬆ Kembali ke atas
