cropperjs
v1.6.2
JavaScript Image Cropper. Esta es la rama para v1.x, para v2.x, consulte la rama
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 cropperjsEn el navegador:
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJS proporciona soporte de CDN para CSS y JavaScript de Cropper.js. Puede encontrar los enlaces aquí.
new Cropper ( element [ , options ] )elemento
HTMLImageElement o HTMLCanvasElementOpciones (opcional)
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 ) ;
} ,
} ) ; ¿Cómo recortar una nueva área después de acercarse o acercarse?
Simplemente haga doble clic en su mouse para ingresar al modo de cultivo.
¿Cómo mover la imagen después de recortar un área?
Simplemente haga doble clic en su mouse para ingresar al modo Move.
¿Cómo solucionar la relación de aspecto en el modo de relación libre?
Simplemente mantenga presionada la tecla
Shiftcuando cambie el tamaño del cuadro de recorte.
¿Cómo recortar un área cuadrada en modo de relación libre?
Simplemente sostenga la tecla
Shiftcuando recorte en la imagen.
El tamaño del cultivo hereda del tamaño del elemento principal de la imagen (envoltorio), así que asegúrese de envolver la imagen con un elemento de bloque visible .
Si está utilizando Cropper en un modal, debe inicializar el Cropper después de que el modal se muestra por completo. De lo contrario, no obtendrá el Cropper correcto.
Los datos recortados salidas se basan en el tamaño de la imagen original, por lo que puede usarlos para recortar la imagen directamente.
Si intenta iniciar Cropper en una imagen de origen cruzado, asegúrese de que su navegador admita los atributos de configuración de HTML5 CORS, y su servidor de imágenes admite la opción Access-Control-Allow-Origin (consulte el control de acceso HTTP (CORS)).
Límites de recursos de iOS conocidos: a medida que los dispositivos iOS limitan la memoria, el navegador puede bloquearse cuando está recortando una imagen grande (resolución de la cámara del iPhone). Para evitar esto, puede cambiar el tamaño de la imagen primero (preferiblemente por debajo de 1024 píxeles) antes de comenzar un cultivo.
Aumento del tamaño de la imagen conocido: al exportar la imagen recortada en el lado del navegador con el método HTMLCanvasElement.toDataURL , el tamaño de la imagen exportada puede ser mayor que la imagen original. Esto se debe a que el tipo de imagen exportada no es lo mismo que la imagen original. Así que simplemente pase el tipo de imagen original como el primer parámetro en toDataURL para solucionar esto. Por ejemplo, si el tipo original es JPEG, use cropper.getCroppedCanvas().toDataURL('image/jpeg') para exportar la imagen.
⬆ De vuelta a la cima
Puede establecer opciones de Cropper con new Cropper(image, options) . Si desea cambiar las opciones predeterminadas globales, puede usar Cropper.setDefaults(options) .
Number00 : No hay restricciones1 : restringir la caja de recorte para que no exceda el tamaño del lienzo.2 : restringir el tamaño mínimo de lienzo para que se ajuste dentro del contenedor. Si las proporciones del lienzo y el contenedor difieren, el lienzo mínimo estará rodeado por un espacio adicional en una de las dimensiones.3 : restringir el tamaño mínimo de lienzo para llenar el contenedor. Si las proporciones del lienzo y el contenedor son diferentes, el contenedor no podrá adaptarse a todo el lienzo en una de las dimensiones. Defina el modo de vista del cultivo. Si establece viewMode en 0 , el cuadro de cultivo puede extenderse fuera del lienzo, mientras que un valor de 1 , 2 o 3 restringirá el cuadro de cultivo al tamaño del lienzo. viewMode de 2 o 3 restringirá además el lienzo al contenedor. No hay diferencia entre 2 y 3 cuando las proporciones del lienzo y el contenedor son las mismas.
String'crop''crop' : crea una nueva caja de cultivo'move' : mueva el lienzo'none' : no hacer nadaDefina el modo de arrastre del cultivo.
NumberNaNDefina la relación de aspecto inicial de la caja de recorte. Por defecto, es la misma que la relación de aspecto del lienzo (envoltura de imágenes).
Solo disponible cuando la opción
aspectRatioestá configurada enNaN.
NumberNaNDefina la relación de aspecto fija de la caja de recorte. Por defecto, el cuadro de cultivo tiene una relación libre.
Objectnull Los datos recortados anteriores que almacenó se pasarán al método setData automáticamente cuando se inicializan.
Solo disponible cuando la opción
autoCropse había establecido en latrue.
Element , Array (Elementos), NodeList o String (Selector)''Agregue elementos adicionales (contenedores) para la vista previa.
Notas:
aspectRatio , asegúrese de establecer la misma relación de aspecto en el contenedor de vista previa.overflow: hidden en el contenedor de vista previa.BooleantrueVuelva a renderizar al cultivo al cambiar el tamaño de la ventana.
BooleantrueRestaurar el área recortada después de cambiar el tamaño de la ventana.
BooleantrueCompruebe si la imagen actual es una imagen de origen cruzado.
Si es así, se agregará un atributo crossOrigin al elemento de imagen clonado, y se agregará un parámetro de marca de tiempo al atributo src para recargar la imagen de origen para evitar el error de caché del navegador.
Agregar un atributo crossOrigin al elemento de imagen dejará de agregar una marca de tiempo a la URL de la imagen y dejará de recargar la imagen. Pero la solicitud (xmlhttprequest) para leer los datos de la imagen para la verificación de orientación requerirá una marca de tiempo para reventar el caché para evitar el error de caché del navegador. Puede establecer la opción checkOrientation en false para cancelar esta solicitud.
Si el valor del atributo de crossOrigin de la imagen es "use-credentials" , entonces el atributo withCredentials se establecerá en true cuando lea los datos de la imagen por XMLHTTPRequest.
BooleantrueVerifique la información de orientación exif de la imagen actual. Tenga en cuenta que solo una imagen JPEG puede contener información de orientación exif.
Exactamente, lea el valor de orientación para girar o voltear la imagen, y luego anular el valor de orientación con 1 (el valor predeterminado) para evitar algunos problemas (1, 2) en dispositivos iOS.
Requiere establecer las opciones rotatable y scalable en true al mismo tiempo.
Nota: No confíe en esto todo el tiempo, ya que algunas imágenes JPG pueden tener valores de orientación incorrectos (no estándar)
Requiere soporte de matrices tipificadas (es decir, 10+).
BooleantrueMuestre el modal negro sobre la imagen y debajo de la caja de recorte.
BooleantrueMuestre las líneas discontinuas sobre la caja de recorte.
BooleantrueMuestre el indicador central sobre la caja de recorte.
BooleantrueMuestre el modal blanco sobre la caja de recorte (resalte la caja de recorte).
BooleantrueMuestre el fondo de la cuadrícula del contenedor.
BooleantrueHabilite recortar la imagen automáticamente cuando se inicializa.
Number0.8 (80% de la imagen)Debe ser un número entre 0 y 1. Defina el tamaño del área de cultivo automático (porcentaje).
BooleantrueHabilitar para mover la imagen.
BooleantrueHabilitar para rotar la imagen.
BooleantrueHabilitar escalar la imagen.
BooleantrueHabilitar para acercar la imagen.
BooleantrueHabilitar para ampliar la imagen arrastrando el tacto.
BooleantrueHabilite acercar la imagen por el mouse de mouse.
Number0.1Defina la relación de zoom al zoom de la imagen por el ratón.
BooleantrueHabilite mover el cuadro de recorte arrastrando.
BooleantrueHabilite cambiar el tamaño de la caja de cultivo arrastrando.
Booleantrue Habilite para alternar el modo de arrastre entre "crop" y "move" al hacer clic dos veces en el cultivo.
Requiere soporte de eventos
dblclick.
Number200El ancho mínimo del contenedor.
Number100La altura mínima del contenedor.
Number0El ancho mínimo del lienzo (envoltura de imágenes).
Number0La altura mínima del lienzo (envoltura de imágenes).
Number0El ancho mínimo de la caja de cultivo.
Nota: Este tamaño es relativo a la página, no con la imagen.
Number0La altura mínima de la caja de recorte.
Nota: Este tamaño es relativo a la página, no con la imagen.
Functionnull Un atajo al evento ready .
Functionnull Un atajo para el evento cropstart .
Functionnull Un atajo para el evento cropmove .
Functionnull Un atajo para el evento cropend .
Functionnull Un atajo al evento crop .
Functionnull Un atajo para el evento zoom .
⬆ De vuelta a la cima
Como hay un proceso asincrónico al cargar la imagen, debe llamar a la mayoría de los métodos después de listos , excepto setAspectRatio , replace y destroy .
Si un método no necesita devolver ningún valor, devolverá la instancia de Cropper (
this) para la composición de la cadena.
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 ) ;
} ,
} ) ;Muestre la caja de cultivo manualmente.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;Restablezca la imagen y el cuadro de cultivo a sus estados iniciales.
Limpie la caja de recorte.
URL :
StringHassamesize (opcional):
BooleanfalseReemplace el SRC de la imagen y reconstruya el Cropper.
Habilitar (Desengar) el Cropper.
Desactive (congele) el cultivador.
Destruye el cultivador y elimina la instancia de la imagen.
offsetX :
Numberoffsety (opcional):
NumberoffsetX .Mueva el lienzo (envoltura de imágenes) con compensaciones relativas.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;X :
Numberleft del lienzoy (opcional):
Numbertop del lienzox .Mueva el lienzo (envoltura de imágenes) a un punto absoluto.
NumberZoom del lienzo (envoltura de imágenes) con una relación relativa.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;relación :
NumberPivot (opcional):
Object{ x: Number, y: Number }Zoom del lienzo (envoltura de imágenes) a una relación absoluta.
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 ,
} ) ;NumberGire la imagen en un grado relativo.
Requiere soporte de transformación 2D CSS3 (es decir, 9+).
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;NumberGire la imagen en un grado absoluto.
Scalex :
Number11 no hace nada.Scaley (opcional):
NumberscaleX .Escalar la imagen.
Requiere soporte de transformación 2D CSS3 (es decir, 9+).
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 no hace nada.Escala la abscisa de la imagen.
Number11 no hace nada.Escala la ordenada de la imagen.
redondeado (opcional):
Booleanfalsetrue para obtener valores redondeados.(Valor de retorno):
Objectx : El desplazamiento a la izquierda del área recortaday : La parte superior compensada del área recortadawidth : el ancho del área recortadaheight : la altura del área recortadarotate : los grados girados de la imagenscaleX : El factor de escala se aplicará en la abscisa de la imagenscaleY : El factor de escala para aplicarse en la ordenación de la imagenSalga los datos finales de la posición del área recortada y el tamaño (según el tamaño natural de la imagen original).
Puede enviar los datos al lado del servidor para recortar la imagen directamente:
- Gire la imagen con la propiedad
rotate.- Escala la imagen con las propiedades
scaleXyscaleY.- Recorte la imagen con las propiedades
x,y,widthyheight.
ObjectgetData .Cambie la posición y el tamaño del área recortada con nuevos datos (según la imagen original).
Nota: Este método solo disponible cuando el valor de la opción
viewModees mayor o igual a1.
Objectwidth : el ancho actual del contenedorheight : la altura actual del contenedorEmitir los datos del tamaño del contenedor.
Objectleft : el desplazamiento a la izquierda de la imagentop : la parte superior compensada de la imagenwidth : el ancho de la imagenheight : la altura de la imagennaturalWidth : el ancho natural de la imagennaturalHeight : la altura natural de la imagenaspectRatio : la relación de aspecto de la imagenrotate : los grados girados de la imagen si se girascaleX : El factor de escala se aplicará en la abscisa de la imagen si se escalascaleY : el factor de escala que se aplica en la ordenación de la imagen si se escalaENCONTRA LA POSICIÓN DE IMAGEN, TAMAÑO Y OTROS DATOS RELACIONADOS.
Objectleft : el desplazamiento a la izquierda del lienzotop : la parte superior compensada del lienzowidth : el ancho del lienzoheight : la altura del lienzonaturalWidth : el ancho natural del lienzo (solo lea)naturalHeight : la altura natural del lienzo (solo lea)Salga los datos de posición y tamaño del lienzo (envoltura de imágenes).
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : el nuevo desplazamiento a la izquierda del lienzotop : la nueva parte superior de compensación del lienzowidth : el nuevo ancho del lienzoheight : la nueva altura del lienzoCambie la posición y el tamaño del lienzo (envoltura de imágenes) con nuevos datos.
Objectleft : el desplazamiento a la izquierda de la caja de recortetop : la parte superior compensada de la caja de recortewidth : el ancho de la caja de cultivoheight : la altura de la caja de recorteSalga la posición de la caja de recorte y los datos de tamaño.
Objectleft : el nuevo desplazamiento a la izquierda de la caja de recortetop : la nueva parte superior compensada de la caja de recortewidth : el nuevo ancho de la caja de cultivoheight : la nueva altura de la caja de recorteCambie la posición y el tamaño de la caja de recorte con nuevos datos.
Opciones (opcional):
Objectwidth : el ancho de destino del lienzo de salida.height : la altura de destino del lienzo de salida.minWidth : el ancho de destino mínimo del lienzo de salida, el valor predeterminado es 0 .minHeight : la altura mínima de destino del lienzo de salida, el valor predeterminado es 0 .maxWidth : el ancho de destino máximo del lienzo de salida, el valor predeterminado es Infinity .maxHeight : la altura máxima de destino del lienzo de salida, el valor predeterminado es Infinity .fillColor : un color para llenar los valores alfa en el lienzo de salida, el valor predeterminado es transparent .imageSmoothingEnabled : Establecer para cambiar si las imágenes se suavizan ( true , predeterminada) o no ( false ).imageSmoothingQuality : establezca la calidad del suavizado de la imagen, uno de "bajo" (predeterminado), "medio" o "alto".rounded : configure true para usar valores redondeados (la posición de área recortada y los datos de tamaño), el valor predeterminado es false .(Valor de retorno):
HTMLCanvasElementNotas:
fillColor primero, si no, la parte transparente en la imagen JPEG se volverá negra de forma predeterminada.Soporte del navegador:
Obtenga un lienzo extraído de la imagen recortada (compresión con pérdida). Si no se recorta, devuelve un lienzo dibujado toda la imagen.
Después de entonces, puede mostrar el lienzo como una imagen directamente, o usar htmlcanvaselement.todataurl para obtener una URL de datos, o usar htmlcanvaselement.toblob para obtener un blob y cargarlo en servidor con formios de formato si el navegador admite estas API.
Evite obtener una imagen de salida en blanco (o negro), es posible que deba establecer las propiedades maxWidth y maxHeight en números limitados, debido a los límites de tamaño de un elemento de lona. Además, debe limitar la relación zoom máxima (en el evento zoom ) por la misma razón.
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' */ ) ;NumberCambie la relación de aspecto de la caja de cultivo.
String'none''none' , 'crop' , 'move'Cambie el modo de arrastre.
Consejos: puede alternar el modo "Cultivo" y "Mover" haciendo doble clic en el Cropper.
⬆ De vuelta a la cima
Este evento se dispara cuando la imagen de destino se ha cargado y la instancia de Cropper está lista para operar.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;event.detail.originalevent :
Eventpointerdown , touchstart y mousedownevent.detail.action :
String'crop' : crea una nueva caja de cultivo'move' : mueva el lienzo (envoltura de imágenes)'zoom' : zoom en / fuera el lienzo (envoltura de imágenes) por touch.'e' : cambiar el tamaño del lado este de la caja de cultivo'w' : cambiar el tamaño del lado oeste de la caja de cultivo's' : cambiar el tamaño del lado sur de la caja de cultivo'n' : cambiar el tamaño del lado norte de la caja de cultivo'se' : cambiar el tamaño del lado sureste de la caja de cultivo'sw' : cambiar el tamaño del lado suroeste de la caja de cultivo'ne' : cambiar el tamaño del lado noreste de la caja de cultivo'nw' : cambiar el tamaño del lado noroeste de la caja de cultivo'all' : mueva la caja de recorte (todas las direcciones)Este evento se dispara cuando el lienzo (envoltura de imágenes) o la caja de recorte comienza a cambiar.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;event.detail.originalevent :
Eventpointermove , touchmove y mousemove .event.detail.action : lo mismo que "CropStart".
Este evento se dispara cuando el lienzo (envoltura de imágenes) o la caja de recorte está cambiando.
event.detail.originalevent :
Eventpointerup , pointercancel , touchend , touchcancel y mouseup .event.detail.action : lo mismo que "CropStart".
Este evento se dispara cuando el lienzo (envoltura de imágenes) o la caja de recorte deja de cambiar.
Sobre estas propiedades, consulte el método
getData.
Este evento se dispara cuando cambia el lienzo (envoltura de imágenes) o la caja de recorte.
Notas:
autoCrop se establece en el true , se activará un evento crop antes del evento ready .data , se activará otro evento crop antes del evento ready .event.detail.originalevent :
Eventwheel , pointermove , touchmove y mousemove .event.detail.oldratio :
Numberevent.detail.ratio :
NumbercanvasData.width / canvasData.naturalWidth )Este evento se dispara cuando una instancia de Cropper comienza a acercarse o alejar su lienzo (envoltura de imágenes).
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ De vuelta a la cima
Si tiene que usar otro Cropper con el mismo espacio de nombres, simplemente llame al método estático Cropper.noConflict .
< script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
Cropper . noConflict ( ) ;
// Code that uses other `Cropper` can follow here.
</ script > Lea nuestras pautas contribuyentes.
Mantenido bajo las pautas de versiones semánticas.
MIT © Chen Fengyuan
⬆ De vuelta a la cima
