cropperjs
v1.6.2
Cropper d'image JavaScript. Il s'agit de la branche de v1.x, pour v2.x, consultez la branche
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 cropperjsDans le navigateur:
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJS fournit une prise en charge CDN pour CSS et JavaScript de Cropper.js. Vous pouvez trouver les liens ici.
new Cropper ( element [ , options ] )élément
HTMLImageElement ou HTMLCanvasElementOptions (en option)
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 ) ;
} ,
} ) ; Comment recadrer une nouvelle zone après avoir zoom ou zoom out?
Double-cliquez simplement sur votre souris pour entrer en mode Crop.
Comment déplacer l'image après avoir recadressé une zone?
Double-cliquez simplement sur votre souris pour entrer en mode Déplacement.
Comment fixer le rapport d'aspect en mode Ratio libre?
Tenez simplement la touche de
Shiftlorsque vous redimensionnez la boîte de recadrage.
Comment recadrer une zone carrée en mode ratio libre?
Tenez simplement la touche de
Shiftlorsque vous recadrez sur l'image.
La taille du cropper hérite de la taille de l'élément parent de l'image (wrapper), alors assurez-vous d'envelopper l'image avec un élément de bloc visible .
Si vous utilisez Cropper dans un modal, vous devez initialiser le recadrage une fois le modal complètement affiché. Sinon, vous n'obtiendrez pas le bon recadrage.
Les données recadrées sont basées sur la taille de l'image d'origine, vous pouvez donc les utiliser pour recadrer l'image directement.
Si vous essayez de démarrer Cropper sur une image d'origine transversale, assurez-vous que votre navigateur prend en charge les attributs de paramètres HTML5 CORS et que votre serveur d'image prend en charge l'option Access-Control-Allow-Origin (voir le contrôle d'accès HTTP (CORS)).
Limites de ressources iOS connues: à mesure que les périphériques iOS limitent la mémoire, le navigateur peut s'écraser lorsque vous recadrez une grande image (résolution de la caméra iPhone). Pour éviter cela, vous pouvez d'abord redimensionner l'image (de préférence inférieure à 1024 pixels) avant de commencer un recadrage.
Augmentation de la taille de l'image connue: lors de l'exportation de l'image recadrée du côté du navigateur avec la méthode HTMLCanvasElement.toDataURL , la taille de l'image exportée peut être supérieure à celle de l'image d'origine. En effet, le type de l'image exportée n'est pas la même que l'image d'origine. Donc, passez simplement le type de l'image d'origine comme le premier paramètre à toDataURL pour résoudre ce problème. Par exemple, si le type d'origine est jpeg, utilisez cropper.getCroppedCanvas().toDataURL('image/jpeg') pour exporter l'image.
⬆ Retour en haut
Vous pouvez définir des options de Cropper avec new Cropper(image, options) . Si vous souhaitez modifier les options par défaut globales, vous pouvez utiliser Cropper.setDefaults(options) .
Number00 : Aucune restriction1 : restreignez la boîte de culture pour ne pas dépasser la taille de la toile.2 : restreignez la taille minimale de la toile pour s'adapter dans le conteneur. Si les proportions de la toile et du conteneur diffèrent, la toile minimale sera entourée d'un espace supplémentaire dans l'une des dimensions.3 : restreignez la taille minimale de la toile pour remplir le récipient. Si les proportions de la toile et du conteneur sont différentes, le conteneur ne pourra pas installer la toile entière dans l'une des dimensions. Définissez le mode de vue de la culture. Si vous définissez viewMode sur 0 , la boîte de recadrage peut s'étendre à l'extérieur de la toile, tandis qu'une valeur de 1 , 2 ou 3 restreindra la boîte de recadrage à la taille de la toile. viewMode de 2 ou 3 restreindra en outre la toile au conteneur. Il n'y a pas de différence entre 2 et 3 lorsque les proportions de la toile et du conteneur sont les mêmes.
String'crop''crop' : Créez une nouvelle boîte à recadrage'move' : déplacer la toile'none' : ne faites rienDéfinissez le mode de traînée du recadrage.
NumberNaNDéfinissez le rapport d'aspect initial de la boîte de culture. Par défaut, c'est le même que le rapport d'aspect de la toile (wrapper d'image).
Uniquement disponible lorsque l'option
aspectRatioest définie surNaN.
NumberNaNDéfinissez le rapport d'aspect fixe de la boîte de culture. Par défaut, la boîte de culture a un ratio gratuit.
Objectnull Les données recadrées précédentes que vous avez stockées seront transmises automatiquement à la méthode setData lors de l'initialisation.
Disponible uniquement lorsque l'option
autoCropavait réglé sur letrue.
Element , Array (éléments), NodeList ou String (sélecteur)''Ajoutez des éléments supplémentaires (conteneurs) pour l'aperçu.
Notes:
aspectRatio , assurez-vous de définir le même rapport d'aspect sur le conteneur d'aperçu.overflow: hidden dans le conteneur d'aperçu.BooleantrueRenforcez le cropper lors de la redimensionnement de la fenêtre.
BooleantrueRestaurez la zone courte après avoir redimensionné la fenêtre.
BooleantrueVérifiez si l'image actuelle est une image d'origine transversale.
Si c'est le cas, un attribut crossOrigin sera ajouté à l'élément d'image cloné, et un paramètre d'horodatage sera ajouté à l'attribut src pour recharger l'image source pour éviter l'erreur de cache du navigateur.
L'ajout d'un attribut crossOrigin à l'élément d'image cessera d'ajouter un horodat à l'URL de l'image et arrête de recharger l'image. Mais la demande (XMLHTTPRequest) pour lire les données d'image pour la vérification d'orientation nécessitera un horodatage pour casser le cache pour éviter l'erreur de cache du navigateur. Vous pouvez définir l'option checkOrientation sur false pour annuler cette demande.
Si la valeur de l'attribut crossOrigin de l'image est "use-credentials" , alors l'attribut withCredentials sera défini sur true lors de la lecture des données d'image par XMLHTTPREQUESQUE.
BooleantrueVérifiez les informations d'orientation EXIF de l'image actuelle. Notez que seule une image JPEG peut contenir des informations d'orientation EXIF.
Exactement, lisez la valeur d'orientation pour la rotation ou le retournement de l'image, puis remplacez la valeur d'orientation avec 1 (la valeur par défaut) pour éviter certains problèmes (1, 2) sur les appareils iOS.
Nécessite de définir les options rotatable et scalable en même true .
Remarque: Ne faites pas confiance à cela tout le temps car certaines images JPG peuvent avoir des valeurs d'orientation incorrectes (non standard)
Nécessite une prise en charge des tableaux typés (c'est-à-dire 10+).
BooleantrueMontrez le modal noir au-dessus de l'image et sous la boîte à crop.
BooleantrueAffichez les lignes en pointillés au-dessus de la boîte à recadrage.
BooleantrueAffichez l'indicateur central au-dessus de la boîte de culture.
BooleantrueAfficher le modal blanc au-dessus de la boîte à cultures (mettez en surbrillance la boîte à recueil).
BooleantrueAfficher le fond de la grille du conteneur.
BooleantrueActiver de recadrer l'image automatiquement lorsqu'il est initialisé.
Number0.8 (80% de l'image)Il devrait être un nombre entre 0 et 1. Définissez la taille automatique de la zone de culture (pourcentage).
BooleantruePermettre de déplacer l'image.
BooleantruePermettre de faire pivoter l'image.
BooleantruePermettre de mettre à l'échelle l'image.
BooleantrueActiver pour zoomer l'image.
BooleantrueActivez à zoomer l'image en faisant glisser le toucher.
BooleantrueActiver à zoomer l'image par roulement de souris.
Number0.1Définissez le rapport zoom lors du zoom de l'image par roulement de souris.
BooleantrueActiver de déplacer la boîte à recadrage en faisant glisser.
BooleantrueActiver de redimensionner la boîte à recadrage en faisant glisser.
Booleantrue Activer le mode de traînée entre "crop" et "move" lorsque vous cliquez deux fois sur le recadrage.
Nécessite une prise en charge de l'événement
dblclick.
Number200La largeur minimale du conteneur.
Number100La hauteur minimale du conteneur.
Number0La largeur minimale de la toile (wrapper d'image).
Number0La hauteur minimale de la toile (wrapper d'image).
Number0La largeur minimale de la boîte de culture.
Remarque: cette taille est relative à la page, pas à l'image.
Number0La hauteur minimale de la boîte de culture.
Remarque: cette taille est relative à la page, pas à l'image.
Functionnull Un raccourci vers l'événement ready .
Functionnull Un raccourci vers l'événement cropstart .
Functionnull Un raccourci vers l'événement cropmove .
Functionnull Un raccourci vers l'événement cropend .
Functionnull Un raccourci vers l'événement crop .
Functionnull Un raccourci vers l'événement zoom .
⬆ Retour en haut
Comme il y a un processus asynchrone lors du chargement de l'image, vous devez appeler la plupart des méthodes après Ready , sauf setAspectRatio , replace et destroy .
Si une méthode n'a pas besoin de renvoyer une valeur, elle renverra l'instance de Cropper (
this) pour la composition de la chaîne.
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 ) ;
} ,
} ) ;Montrez la boîte à crop manuellement.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;Réinitialisez l'image et la boîte de recadrage à ses états initiaux.
Effacer la boîte de culture.
URL :
StringHASTAMESISIZE (FACPATIONNEL):
BooleanfalseRemplacez le SRC de l'image et reconstruisez le cropper.
Activer (dégeler) le cropper.
Désactiver (congeler) le cropper.
Détruisez le recadrage et retirez l'instance de l'image.
Offsetx :
NumberOffsey (facultatif):
NumberoffsetX .Déplacez la toile (emballage d'image) avec des décalages relatifs.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;x :
Numberleft de la toiley (facultatif):
Numbertop de la toilex .Déplacez la toile (emballage d'image) vers un point absolu.
NumberZoom de la toile (wrapper d'image) avec un rapport relatif.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;rapport :
Numberpivot (facultatif):
Object{ x: Number, y: Number }Zoomez la toile (emballage d'image) sur un rapport absolu.
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 ,
} ) ;NumberFaites pivoter l'image à un degré relatif.
Nécessite CSS3 2D transforme le support (c'est-à-dire 9+).
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;NumberFaites pivoter l'image à un degré absolu.
Scalex :
Number11 il ne fait rien.Scaley (facultatif):
NumberscaleX .Mettez l'image.
Nécessite CSS3 2D transforme le support (c'est-à-dire 9+).
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 il ne fait rien.Échelle l'abscisse de l'image.
Number11 il ne fait rien.Mettez l'ordonnée de l'image.
Arrondi (facultatif):
Booleanfalsetrue pour obtenir des valeurs arrondies.(valeur de retour):
Objectx : le décalage à gauche de la zone courtey : le sommet décalé de la zone recadréewidth : la largeur de la zone recadréeheight : la hauteur de la zone courterotate : les degrés tournés de l'imagescaleX : le facteur de mise à l'échelle à appliquer sur l'abscisse de l'imagescaleY : le facteur de mise à l'échelle à appliquer sur l'ordonnée de l'imageSélectionnez la position de zone recadrée finale et les données de taille (basées sur la taille naturelle de l'image d'origine).
Vous pouvez envoyer les données à côté du serveur pour recadrer directement l'image:
- Faites pivoter l'image avec la propriété
rotate.- Échec de l'image avec les propriétés
scaleXetscaleY.- Cramez l'image avec les propriétés
x,y,widthetheight.
ObjectgetData .Modifiez la position et la taille de la zone courte avec de nouvelles données (basées sur l'image d'origine).
Remarque: Cette méthode n'est disponible que lorsque la valeur de l'option
viewModeest supérieure ou égale à1.
Objectwidth : la largeur actuelle du conteneurheight : la hauteur actuelle du conteneurSortez les données de taille de conteneur.
Objectleft : le décalage à gauche de l'imagetop : le décalage en haut de l'imagewidth : la largeur de l'imageheight : la hauteur de l'imagenaturalWidth : la largeur naturelle de l'imagenaturalHeight : la hauteur naturelle de l'imageaspectRatio : le rapport d'aspect de l'imagerotate : les degrés tournés de l'image s'il est tournéscaleX : le facteur de mise à l'échelle à appliquer sur l'abscisse de l'image si elle est mise à l'échellescaleY : le facteur de mise à l'échelle à appliquer sur l'ordonnée de l'image si elle est mise à l'échelleSortez la position de l'image, la taille et d'autres données connexes.
Objectleft : le décalage à gauche de la toiletop : le sommet décalé de la toilewidth : la largeur de la toileheight : la hauteur de la toilenaturalWidth : la largeur naturelle de la toile (lire uniquement)naturalHeight : La hauteur naturelle de la toile (lire uniquement)Sortez la position de la toile (wrapper d'image) et des données de taille.
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : le nouveau décalage à gauche de la toiletop : le nouveau décalage en haut de la toilewidth : la nouvelle largeur de la toileheight : la nouvelle hauteur de la toileModifiez la position et la taille de la toile (wrapper d'image) avec de nouvelles données.
Objectleft : le décalage à gauche de la boîte de culturetop : le dessus décalé de la boîte à recadragewidth : la largeur de la boîte de cultureheight : la hauteur de la boîte de cultureSélectionnez la position de la boîte de recadrage et les données de taille.
Objectleft : le nouveau décalage à gauche de la boîte de culturetop : le nouveau décalage du haut de la boîte à recadragewidth : la nouvelle largeur de la boîte de cultureheight : la nouvelle hauteur de la boîte de cultureModifiez la position et la taille de la boîte de recadrage avec de nouvelles données.
Options (facultative):
Objectwidth : la largeur de destination du canevas de sortie.height : la hauteur de destination de la toile de sortie.minWidth : La largeur de destination minimale de la toile de sortie, la valeur par défaut est 0 .minHeight : La hauteur de destination minimale de la toile de sortie, la valeur par défaut est 0 .maxWidth : La largeur de destination maximale de la toile de sortie, la valeur par défaut est Infinity .maxHeight : la hauteur de destination maximale du canevas de sortie, la valeur par défaut est Infinity .fillColor : une couleur pour remplir toutes les valeurs alpha dans la toile de sortie, la valeur par défaut est la transparent .imageSmoothingEnabled : Set to Change Si les images sont lissées ( true , par défaut) ou non ( false ).imageSmoothingQuality : Définissez la qualité du lissage de l'image, l'une des "faibles" (par défaut), "Medium" ou "High".rounded : Set true to Use Utilised Valed (la position de zone recadrée et les données de taille), la valeur par défaut est false .(valeur de retour):
HTMLCanvasElementNotes:
fillColor , sinon, la partie transparente de l'image JPEG deviendra noire par défaut.Prise en charge du navigateur:
Obtenez une toile tirée de l'image recadrée (compression avec perte). S'il n'est pas recadré, il retourne une toile dessinée toute l'image.
Après alors, vous pouvez afficher directement le canevas comme image, ou utiliser htmlcanvaselement.todataurl pour obtenir une URL de données, ou utiliser htmlcanvasement.toblob pour obtenir un blob et le télécharger sur serveur avec FormData si le navigateur prend en charge ces API.
Évitez d'obtenir une image de sortie vide (ou noire), vous devrez peut-être définir les propriétés maxWidth et maxHeight à des nombres limités, en raison des limites de taille d'un élément de toile. En outre, vous devez limiter le rapport de zoom maximum (dans l'événement zoom ) pour la même raison.
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' */ ) ;NumberModifier le rapport d'aspect de la boîte de culture.
String'none''none' , 'crop' , 'move'Modifiez le mode de glisser.
Conseils: vous pouvez basculer le mode "Crop" et "Move" en double-cliquant sur le recadrage.
⬆ Retour en haut
Cet événement se déclenche lorsque l'image cible a été chargée et que l'instance de recadrage est prête à fonctionner.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;event.detail.originalevent :
Eventpointerdown , touchstart et mousedownevent.detail.action :
String'crop' : Créez une nouvelle boîte à recadrage'move' : Déplacez la toile (wrapper d'image)'zoom' : Zoom in / out la toile (wrapper d'image) par toucher.'e' : redimensionner le côté est de la boîte de cultures'w' : redimensionner le côté ouest de la boîte de culture's' : redimensionner le côté sud de la boîte de cultures'n' : redimensionner le côté nord de la boîte de cultures'se' : redimensionner le côté sud-est de la boîte de cultures'sw' : redimensionner le côté sud-ouest de la boîte de cultures'ne' : redimensionner le côté nord-est de la boîte de cultures'nw' : redimensionner le côté nord-ouest de la boîte de cultures'all' : déplacez la boîte à recadrage (toutes les directions)Cet événement se déclenche lorsque la toile (emballage d'image) ou que la boîte à crop commence à changer.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;event.detail.originalevent :
Eventpointermove , touchmove et mousemove .event.detail.action : le même que "CropStart".
Cet événement se déclenche lorsque la toile (emballage d'image) ou que la boîte à crop change.
event.detail.originalevent :
Eventpointerup , pointercancel , touchend , touchcancel et mouseup .event.detail.action : le même que "CropStart".
Cet événement se déclenche lorsque la toile (emballage d'image) ou que la boîte à recadrage cesse de changer.
À propos de ces propriétés, consultez la méthode
getData.
Cet événement se déclenche lorsque la toile (emballage d'image) ou la boîte à recadrage change.
Notes:
autoCrop est définie sur le true , un événement crop sera déclenché avant l'événement ready .data est définie, un autre événement crop sera déclenché avant l'événement ready .event.detail.originalevent :
Eventwheel , pointermove , touchmove et mousemove .event.detail.oldratio :
Numberevent.detail.ratio :
NumbercanvasData.width / canvasData.naturalWidth )Cet événement se déclenche lorsqu'une instance de recadrage commence à zoomer ou à zoomer sa toile (emballage d'image).
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ Retour en haut
Si vous devez utiliser un autre Cropper avec le même espace de noms, appelez simplement la méthode statique Cropper.noConflict pour y revenir.
< script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
Cropper . noConflict ( ) ;
// Code that uses other `Cropper` can follow here.
</ script > Veuillez lire nos directives contributives.
Entretenu sous les directives de version sémantique.
MIT © Chen Fengyuan
⬆ Retour en haut
