cropperjs
v1.6.2
Javascript Image Cropper. Esta é a filial para v1.x, para v2.x, confira a ramificação
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 cropperjsNo navegador:
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >O CDNJS fornece suporte ao CDN para CSS e JavaScript do Cropper.js. Você pode encontrar os links aqui.
new Cropper ( element [ , options ] )elemento
HTMLImageElement ou HTMLCanvasElementOpções (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 ) ;
} ,
} ) ; Como cortar uma nova área depois de aumentar o zoom ou zoom?
Basta clicar duas vezes em seu mouse para entrar no modo de corte.
Como mover a imagem depois de cortar uma área?
Basta clicar duas vezes no mouse para inserir o modo de movimentação.
Como corrigir a proporção no modo de proporção livre?
Basta segurar a tecla
Shiftquando redimensionar a caixa de corte.
Como cortar uma área quadrada no modo de proporção gratuita?
Basta segurar a tecla
Shiftquando você cortar a imagem.
O tamanho do Cropper herda do tamanho do elemento pai da imagem (invólucro), então certifique -se de envolver a imagem com um elemento de bloco visível .
Se você estiver usando o Cropper em um modal, inicializará o Cropper após o modal ser mostrado completamente. Caso contrário, você não receberá o Cropper correto.
Os dados cortados em saída são baseados no tamanho da imagem original, para que você possa usá -los diretamente para cortar a imagem.
Se você tentar iniciar o Cropper em uma imagem de origem cruzada, verifique se o seu navegador suporta atributos de configurações de CORS HTML5 e o servidor de imagens suporta a opção Access-Control-Allow-Origin (consulte o HTTP Access Control (CORS)).
Limites conhecidos de recursos do iOS: como os dispositivos iOS limitam a memória, o navegador pode travar quando você estiver cortando uma imagem grande (resolução da câmera do iPhone). Para evitar isso, você pode redimensionar a imagem primeiro (de preferência abaixo de 1024 pixels) antes de iniciar um Cropper.
Aumento do tamanho da imagem conhecido: Ao exportar a imagem cortada no lado do navegador com o método HTMLCanvasElement.toDataURL , o tamanho da imagem exportada pode ser maior que a imagem original. Isso ocorre porque o tipo de imagem exportada não é a mesma que a imagem original. Portanto, passe o tipo de imagem original como o primeiro parâmetro para toDataURL a corrigir isso. Por exemplo, se o tipo original for jpeg, use cropper.getCroppedCanvas().toDataURL('image/jpeg') para exportar a imagem.
⬆ de volta ao topo
Você pode definir opções Cropper com new Cropper(image, options) . Se você deseja alterar as opções padrão globais, poderá usar Cropper.setDefaults(options) .
Number00 : Sem restrições1 : restrinja a caixa de colheita a não exceder o tamanho da tela.2 : Restrinja o tamanho mínimo da tela para caber dentro do contêiner. Se as proporções da tela e do contêiner diferirem, a tela mínima será cercada por espaço extra em uma das dimensões.3 : Restrinja o tamanho mínimo da tela para preencher o ajuste do recipiente. Se as proporções da tela e do contêiner forem diferentes, o contêiner não poderá caber em toda a tela em uma das dimensões. Defina o modo de visualização do Cropper. Se você definir viewMode para 0 , a caixa de colheita poderá se estender para fora da tela, enquanto um valor de 1 , 2 ou 3 restringirá a caixa de corte ao tamanho da tela. viewMode de 2 ou 3 também restringirá a tela ao contêiner. Não há diferença entre 2 e 3 quando as proporções da tela e do contêiner são as mesmas.
String'crop''crop' : crie uma nova caixa de colheita'move' : mova a tela'none' : não faça nadaDefina o modo de arrasto do Cropper.
NumberNaNDefina a proporção inicial da caixa de colheita. Por padrão, é o mesmo que a proporção da tela (Image Wrapper).
Disponível apenas quando a opção
aspectRatioé definida comoNaN.
NumberNaNDefina a proporção fixa da caixa de colheita. Por padrão, a caixa de colheita tem uma proporção gratuita.
Objectnull Os dados cortados anteriores que você armazenou serão passados para o método setData automaticamente quando inicializado.
Disponível apenas quando a opção
autoCropdefiniu para otrue.
Element , Array (Elements), NodeList ou String (Seletor)''Adicione elementos extras (contêineres) para visualização.
Notas:
aspectRatio , defina a mesma proporção para o contêiner de visualização.overflow: hidden para o contêiner de visualização.BooleantrueRenderize o Cropper ao redimensionar a janela.
BooleantrueRestaure a área cortada após redimensionar a janela.
BooleantrueVerifique se a imagem atual é uma imagem de origem cruzada.
Nesse caso, um atributo crossOrigin será adicionado ao elemento de imagem clonado, e um parâmetro de registro de data e hora será adicionado ao atributo src para recarregar a imagem de origem para evitar o erro de cache do navegador.
Adicionar um atributo crossOrigin ao elemento da imagem parará de adicionar um registro de data e hora ao URL da imagem e parará de recarregar a imagem. Mas a solicitação (xmlHttPrequest) para ler os dados da imagem para a verificação de orientação exigirá que um registro de data e hora inteiro para evitar o erro de cache do navegador. Você pode definir a opção checkOrientation como false para cancelar essa solicitação.
Se o valor do atributo crossOrigin da imagem for "use-credentials" , o atributo withCredentials será definido como true quando lê os dados da imagem por XMLHTTPRequest.
BooleantrueVerifique as informações de orientação EXIF da imagem atual. Observe que apenas uma imagem JPEG pode conter informações de orientação EXIF.
Exatamente, leia o valor de orientação para girar ou inverter a imagem e substitua o valor de orientação por 1 (o valor padrão) para evitar alguns problemas (1, 2) nos dispositivos iOS.
Requer definir as opções rotatable e scalable como true ao mesmo tempo.
Nota: Não confie nisso o tempo todo, pois algumas imagens JPG podem ter valores de orientação incorretos (não padronizados)
Requer suporte de matrizes digitadas (ou seja, 10+).
BooleantrueMostre o modal preto acima da imagem e sob a caixa de colheita.
BooleantrueMostre as linhas tracejadas acima da caixa de corte.
BooleantrueMostre o indicador central acima da caixa de colheita.
BooleantrueMostre o modal branco acima da caixa de colheita (destaque a caixa de colheita).
BooleantrueMostre o fundo da grade do recipiente.
BooleantrueAtive para cortar a imagem automaticamente quando inicializada.
Number0.8 (80% da imagem)Deve ser um número entre 0 e 1. Defina o tamanho automático da área de corte (porcentagem).
BooleantrueAtivar mover a imagem.
BooleantrueAtivar girar a imagem.
BooleantrueAtivar escalar a imagem.
BooleantrueAtivar o zoom da imagem.
BooleantrueAtive o zoom da imagem arrastando o toque.
BooleantrueHabilite o zoom da imagem por rodas do mouse.
Number0.1Defina a proporção de zoom ao ampliar a imagem por rodas de mouse.
BooleantrueHabilite mover a caixa de colheita arrastando.
BooleantrueHabilite redimensionar a caixa de colheita arrastando.
Booleantrue Habilite alternar o modo de arrasto entre "crop" e "move" ao clicar duas vezes no Cropper.
Requer suporte ao evento
dblclick.
Number200A largura mínima do recipiente.
Number100A altura mínima do recipiente.
Number0A largura mínima da tela (Image Wrapper).
Number0A altura mínima da tela (invólucro de imagem).
Number0A largura mínima da caixa de colheita.
Nota: Esse tamanho é relativo à página, não à imagem.
Number0A altura mínima da caixa de colheita.
Nota: Esse tamanho é relativo à página, não à imagem.
Functionnull Um atalho para o evento ready .
Functionnull Um atalho para o evento cropstart .
Functionnull Um atalho para o evento cropmove .
Functionnull Um atalho para o evento cropend .
Functionnull Um atalho para o evento crop .
Functionnull Um atalho para o evento zoom .
⬆ de volta ao topo
Como existe um processo assíncrono ao carregar a imagem, você deve chamar a maioria dos métodos após o Ready , exceto setAspectRatio , replace e destroy .
Se um método não precisar retornar nenhum valor, ele retornará a instância do Cropper (
this) para a composição da cadeia.
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 ) ;
} ,
} ) ;Mostre a caixa de colheita manualmente.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;Redefina a imagem e a caixa de corte para seus estados iniciais.
Limpe a caixa de colheita.
URL :
StringHassamesize (opcional):
BooleanfalseSubstitua o SRC da imagem e reconstrua o Cropper.
Ativar (desconfortar) o cortador.
Desative (congele) o cortador.
Destrua o Cropper e remova a instância da imagem.
Offsetx :
NumberOffsety (Opcional):
NumberoffsetX .Mova a tela (invólucro de imagem) com compensações relativas.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;x :
Numberleft da telay (opcional):
Numbertop da telax .Mova a tela (invólucro de imagem) para um ponto absoluto.
NumberZoom a tela (invólucro de imagem) com uma proporção relativa.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;razão :
Numberpivô (opcional):
Object{ x: Number, y: Number }Zoom a tela (invólucro de imagem) para uma proporção 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 a imagem em um grau relativo.
Requer suporte de transformações 2D CSS3 (ou seja, 9+).
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;NumberGire a imagem em um grau absoluto.
Scalex :
Number11 não faz nada.Scaley (Opcional):
NumberscaleX .Escala a imagem.
Requer suporte de transformações 2D CSS3 (ou seja, 9+).
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 não faz nada.Escala a abscissa da imagem.
Number11 não faz nada.Escala a ordenada da imagem.
arredondado (opcional):
Booleanfalsetrue para obter valores arredondados.(Valor de retorno):
Objectx : o deslocamento à esquerda da área cortaday : O topo do deslocamento da área cortadawidth : a largura da área cortadaheight : a altura da área cortadarotate : os graus girados da imagemscaleX : o fator de escala a ser aplicado na abcissa da imagemscaleY : o fator de escala a ser aplicado na ordenada da imagemSaia a posição final da área cortada e os dados de tamanho (com base no tamanho natural da imagem original).
Você pode enviar os dados para o lado do servidor para cortar a imagem diretamente:
- Gire a imagem com a propriedade
rotate.- Escala a imagem com as propriedades
scaleXescaleY.- Corte a imagem com as propriedades
x,y,widtheheight.
ObjectgetData .Altere a posição e o tamanho da área cortada com novos dados (com base na imagem original).
NOTA: Este método disponível apenas quando o valor da opção
viewModefor maior ou igual a1.
Objectwidth : a largura atual do contêinerheight : a altura atual do contêinerSaia os dados do tamanho do contêiner.
Objectleft : o deslocamento à esquerda da imagemtop : o topo do deslocamento da imagemwidth : a largura da imagemheight : a altura da imagemnaturalWidth : a largura natural da imagemnaturalHeight : a altura natural da imagemaspectRatio : a proporção da imagemrotate : os graus girados da imagem se for giradascaleX : o fator de escala a ser aplicado na abscissa da imagem se escaladascaleY : o fator de escala a ser aplicado na ordenada da imagem se escaladaSaia da posição da imagem, tamanho e outros dados relacionados.
Objectleft : o deslocamento à esquerda da telatop : o topo do deslocamento da telawidth : a largura da telaheight : a altura da telanaturalWidth : a largura natural da tela (somente leitura)naturalHeight : A altura natural da tela (somente leitura)Saia da tela (invólucro de imagem) dados de posição e tamanho.
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : o novo deslocamento à esquerda da telatop : o novo topo de deslocamento da telawidth : a nova largura da telaheight : a nova altura da telaAltere a posição e o tamanho da tela (Wrapper) com novos dados.
Objectleft : o deslocamento à esquerda da caixa de colheitatop : o topo do deslocamento da caixa de colheitawidth : a largura da caixa de colheitaheight : a altura da caixa de colheitaSaia da caixa de corte e dados de tamanho.
Objectleft : o novo deslocamento à esquerda da caixa de colheitatop : o novo topo de deslocamento da caixa de colheitawidth : a nova largura da caixa de colheitaheight : a nova altura da caixa de colheitaAltere a posição e o tamanho da caixa de corte com novos dados.
Opções (opcional):
Objectwidth : a largura do destino da tela de saída.height : a altura do destino da tela de saída.minWidth : a largura mínima de destino da tela de saída, o valor padrão é 0 .minHeight : A altura mínima de destino da tela de saída, o valor padrão é 0 .maxWidth : a largura máxima de destino da tela de saída, o valor padrão é Infinity .maxHeight : A altura máxima de destino da tela de saída, o valor padrão é Infinity .fillColor : Uma cor para preencher quaisquer valores alfa na tela de saída, o valor padrão é o transparent .imageSmoothingEnabled : defina para alterar se as imagens forem suavizadas ( true , padrão) ou não ( false ).imageSmoothingQuality : Defina a qualidade da suavização de imagens, uma de "baixo" (padrão), "médio" ou "alta".rounded : defina true para usar valores arredondados (a posição da área cortada e os dados de tamanho), o valor padrão é false .(Valor de retorno):
HTMLCanvasElementNotas:
fillColor primeiro, se não, a parte transparente da imagem JPEG ficará preta por padrão.Suporte ao navegador:
Obtenha uma tela extraída da imagem cortada (compressão com perda). Se não for cortada, retornará uma tela desenhada a imagem inteira.
Depois disso, você pode exibir a tela como uma imagem diretamente ou usar htmlcanvaselement.todataurl para obter um URL de dados ou usar htmlcanvaselement.toblob para obter um blob e enviá -lo para servidor com o formData se o navegador suportar essas APIs.
Evite obter uma imagem de saída em branco (ou preta), pode ser necessário definir as propriedades maxWidth e maxHeight para números limitados, devido aos limites de tamanho de um elemento de tela. Além disso, você deve limitar a proporção máxima de zoom (no evento zoom ) pelo mesmo motivo.
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' */ ) ;NumberAltere a proporção da caixa de colheita.
String'none''none' , 'crop' , 'move'Altere o modo de arrasto.
Dicas: Você pode alternar o modo "Crop" e "Mover" clicando duas vezes no Cropper.
⬆ de volta ao topo
Este evento dispara quando a imagem de destino foi carregada e a instância do Cropper está pronta para operar.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;Event.Detail.originalevent :
Eventpointerdown , touchstart e mousedownevent.Detail.Action :
String'crop' : crie uma nova caixa de colheita'move' : Mova a tela (Image Wrapper)'zoom' : Zoom dentro / saída da tela (invólucro de imagem) por toque.'e' : redimensione o lado leste da caixa de colheita'w' : redimensione o lado oeste da caixa de colheita's' : redimensione o lado sul da caixa de colheita'n' : redimensione o lado norte da caixa de colheita'se' : redimensione o lado sudeste da caixa de colheita'sw' : redimensione o lado sudoeste da caixa de colheita'ne' : redimensione o lado nordeste da caixa de colheita'nw' : redimensione o lado noroeste da caixa de colheita'all' : mova a caixa de colheita (todas as direções)Este evento dispara quando a tela (invólucro de imagem) ou a caixa de corte começa a mudar.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;Event.Detail.originalevent :
Eventpointermove , touchmove e mousemove .Event.Detail.Action : O mesmo que "Cropstart".
Este evento dispara quando a tela (invólucro de imagem) ou a caixa de corte estão mudando.
Event.Detail.originalevent :
Eventpointerup , pointercancel , touchend , touchcancel e mouseup .Event.Detail.Action : O mesmo que "Cropstart".
Este evento dispara quando a tela (invólucro de imagem) ou a caixa de corte para de mudar.
Sobre essas propriedades, consulte o método
getData.
Este evento dispara quando a tela (invólucro de imagem) ou a caixa de colheita muda.
Notas:
autoCrop for definida como o true , um evento crop será acionado antes do evento ready .data for definida, outro evento crop será acionado antes do evento ready .Event.Detail.originalevent :
Eventwheel , pointermove , touchmove e mousemove .event.Detail.oldratio :
Numberevent.Detail.ratio :
NumbercanvasData.width / canvasData.naturalWidth )Este evento dispara quando uma instância do Cropper começa a aumentar o zoom ou ampliar sua tela (Image Wrapper).
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ de volta ao topo
Se você precisar usar outro cropper com o mesmo espaço para nome, basta chamar o 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 > Por favor, leia nossas diretrizes contribuintes.
Mantido sob as diretrizes de versão semântica.
MIT © Chen Fengyuan
⬆ de volta ao topo
