cropperjs
v1.6.2
JavaScript 이미지 작물. V1.x의 지점, v2.x의 경우
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 cropperjs브라우저에서 :
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJS는 Cropper.js의 CSS 및 JavaScript에 대한 CDN 지원을 제공합니다. 여기에서 링크를 찾을 수 있습니다.
new Cropper ( element [ , options ] )요소
HTMLImageElement 또는 HTMLCanvasElement옵션 (선택 사항)
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 ) ;
} ,
} ) ; 확대하거나 확대 한 후 새 지역을 자르는 방법은 무엇입니까?
마우스를 두 번 클릭하여 작물 모드로 들어갑니다.
영역을 자르고 이미지를 움직이는 방법?
마우스를 두 번 클릭하여 이동 모드로 들어갑니다.
자유 비율 모드에서 종횡비를 수정하는 방법은 무엇입니까?
작물 상자 크기를 조정할 때
Shift키를 유지하십시오.
자유 비율 모드로 제곱 면적을 자르는 방법은 무엇입니까?
이미지를 자르면
Shift키를 유지하십시오.
Cropper의 크기는 이미지의 상위 요소 (래퍼)의 크기에서 상속되므로 눈에 보이는 블록 요소 로 이미지를 감싸십시오.
모달에서 Cropper를 사용하는 경우 모달이 완전히 표시된 후 크롭 퍼를 초기화해야합니다. 그렇지 않으면 올바른 작물을 얻지 못할 것입니다.
출력 된 자른 데이터는 원래 이미지 크기를 기반으로하므로 이미지를 직접 자르는 데 사용할 수 있습니다.
크로스-오리핀 이미지에서 Cropper를 시작하려면 브라우저가 HTML5 CORS 설정 속성을 지원하고 이미지 서버가 Access-Control-Allow-Origin 옵션을 지원하는지 확인하십시오 (HTTP Access Control (CORS) 참조).
알려진 iOS 리소스 제한 : iOS 장치가 메모리를 제한함에 따라 큰 이미지 (iPhone 카메라 해상도)를 자르면 브라우저가 충돌 할 수 있습니다. 이를 피하기 위해 크롭퍼를 시작하기 전에 이미지를 먼저 (바람직하게는 1024 픽셀 미만) 크기를 조정할 수 있습니다.
알려진 이미지 크기 증가 : HTMLCanvasElement.toDataURL 메소드로 브라우저 쪽의 자른 이미지를 내보낼 때 내보내는 이미지의 크기가 원래 이미지보다 클 수 있습니다. 내보내는 이미지의 유형이 원래 이미지와 같지 않기 때문입니다. 따라서 원래 이미지의 유형을 toDataURL 의 첫 번째 매개 변수로 전달 하여이 문제를 해결하십시오. 예를 들어, 원래 유형이 JPEG 인 경우 cropper.getCroppedCanvas().toDataURL('image/jpeg') 사용하여 이미지를 내보내십시오.
⬆ 위로 돌아갑니다
new Cropper(image, options) 으로 Cropper 옵션을 설정할 수 있습니다. 글로벌 기본 옵션을 변경하려면 Cropper.setDefaults(options) 사용할 수 있습니다.
Number00 : 제한이 없습니다1 : 캔버스의 크기를 초과하지 않도록 작물 상자를 제한하십시오.2 : 최소 캔버스 크기를 컨테이너 안에 맞출 수 있도록 제한하십시오. 캔버스와 컨테이너의 비율이 다르면 최소 캔버스는 차원 중 하나의 추가 공간으로 둘러싸여 있습니다.3 : 최소 캔버스 크기를 제한하여 용기에 맞추십시오. 캔버스와 컨테이너의 비율이 다르면 컨테이너는 전체 캔버스를 치수 중 하나로 맞출 수 없습니다. 작물의보기 모드를 정의하십시오. viewMode 0 으로 설정하면 작물 상자는 캔버스 외부에서 확장 될 수 있으며 1 , 2 또는 3 의 값은 작물 상자를 캔버스 크기로 제한합니다. 2 또는 3 의 viewMode 캔버스를 컨테이너로 추가로 제한합니다. 캔버스와 컨테이너의 비율이 동일 할 때 2 와 3 사이에는 차이가 없습니다.
String'crop''crop' : 새 작물 상자를 만듭니다'move' : 캔버스를 움직입니다'none' : 아무것도하지 않습니다작물의 드래그 모드를 정의하십시오.
NumberNaN작물 상자의 초기 종횡비를 정의하십시오. 기본적으로 캔버스의 종횡비 (이미지 래퍼)와 동일합니다.
aspectRatio옵션이NaN으로 설정된 경우에만 사용할 수 있습니다.
NumberNaN작물 상자의 고정 종횡비를 정의하십시오. 기본적으로 작물 상자에는 자유 비율이 있습니다.
Objectnull 저장된 이전 자른 데이터는 초기화되면 setData 메소드로 자동 전달됩니다.
autoCrop옵션이true로 설정된 경우에만 사용할 수 있습니다.
Element , Array (요소), NodeList 또는 String (선택기)''미리보기를 위해 추가 요소 (컨테이너)를 추가하십시오.
참고 :
aspectRatio 옵션을 설정하는 경우 미리보기 컨테이너와 동일한 종횡비를 설정하십시오.overflow: hidden 스타일을 미리보기 컨테이너로 설정하십시오.Booleantrue창을 크기를 조정할 때 작물을 다시 렌더링하십시오.
Booleantrue창을 조정 한 후 자른 부위를 복원하십시오.
Booleantrue현재 이미지가 크로스 오리핀 이미지인지 확인하십시오.
그렇다면 crossOrigin 속성이 복제 된 이미지 요소에 추가되고 src 속성에 타임 스탬프 매개 변수가 추가되어 소스 이미지를 다시로드하여 브라우저 캐시 오류를 피합니다.
이미지 요소에 crossOrigin 속성을 추가하면 이미지 URL에 타임 스탬프가 추가되고 이미지 재 장전이 중지됩니다. 그러나 방향 확인을위한 이미지 데이터를 읽으려는 요청 (xmlhttprequest)은 브라우저 캐시 오류를 피하기 위해 캐시를 파열시키기 위해 타임 스탬프가 필요합니다. 이 요청을 취소하려면 checkOrientation 옵션을 false 로 설정할 수 있습니다.
이미지의 crossOrigin 속성의 값이 "use-credentials" 인 경우 xmlhttprequest로 이미지 데이터를 읽을 때 withCredentials 속성이 true 로 설정됩니다.
Booleantrue현재 이미지의 exif 방향 정보를 확인하십시오. JPEG 이미지 만 exif 방향 정보를 포함 할 수 있습니다.
정확히 이미지를 돌리거나 뒤집는 방향 값을 읽은 다음 iOS 장치에서 일부 문제 (1, 2)를 피하기 위해 1 (기본값)으로 방향 값을 대체하십시오.
rotatable 및 scalable 옵션을 동시에 true 로 설정해야합니다.
참고 : 일부 JPG 이미지가 부정확 한 (비표준) 방향 값을 가질 수 있으므로 항상 신뢰하지 마십시오.
타이핑 된 배열 지원 (예 : 10+)이 필요합니다.
Booleantrue이미지 위와 작물 상자 아래에 검은 색 모달을 표시하십시오.
Booleantrue작물 상자 위에 점선을 표시하십시오.
Booleantrue작물 상자 위의 중앙 표시기를 표시하십시오.
Booleantrue작물 상자 위에 흰색 모달을 보여줍니다 (작물 상자를 강조 표시).
Booleantrue컨테이너의 그리드 배경을 표시하십시오.
Booleantrue초기화되면 이미지를 자동으로 자르십시오.
Number0.8 (이미지의 80%)0과 1 사이의 숫자 여야합니다. 자동 자르기 영역 크기 (백분율)를 정의하십시오.
Booleantrue이미지를 움직일 수 있습니다.
Booleantrue이미지를 회전시킬 수 있습니다.
Booleantrue이미지를 확장 할 수 있습니다.
Booleantrue이미지를 확대 할 수 있습니다.
Booleantrue터치를 드래그하여 이미지를 확대 할 수 있습니다.
Booleantrue마우스 휠링으로 이미지를 확대 할 수 있습니다.
Number0.1마우스 휠링으로 이미지를 확대 할 때 줌 비율을 정의하십시오.
Booleantrue드래그하여 작물 상자를 움직일 수 있습니다.
Booleantrue드래그하여 작물 상자를 크기를 조정할 수 있습니다.
Booleantrue 작물에서 두 번 클릭 할 때 "crop" 과 "move" 사이의 드래그 모드를 토글 할 수 있습니다.
dblclick이벤트 지원이 필요합니다.
Number200컨테이너의 최소 너비.
Number100용기의 최소 높이.
Number0캔버스의 최소 너비 (이미지 포장지).
Number0캔버스의 최소 높이 (이미지 래퍼).
Number0작물 상자의 최소 너비.
참고 : 이 크기는 이미지가 아닌 페이지와 관련이 있습니다.
Number0작물 상자의 최소 높이.
참고 : 이 크기는 이미지가 아닌 페이지와 관련이 있습니다.
Functionnull ready 이벤트의 바로 가기.
Functionnull cropstart 이벤트의 바로 가기.
Functionnull cropmove 이벤트의 바로 가기.
Functionnull cropend 이벤트의 바로 가기.
Functionnull crop 행사의 바로 가기.
Functionnull zoom 이벤트의 바로 가기.
⬆ 위로 돌아갑니다
이미지를로드 할 때 비동기 프로세스가 있으므로 setAspectRatio 제외한 대부분의 메소드를 대체 replace destroy 해야합니다.
메소드가 값을 반환 할 필요가 없으면 체인 구성에 대해 Cropper 인스턴스 (
this)를 반환합니다.
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 ) ;
} ,
} ) ;자르기 상자를 수동으로 보여줍니다.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;이미지 및 자르기 상자를 초기 상태로 재설정하십시오.
작물 상자를 지 웁니다.
URL :
StringHassamesize (선택 사항) :
Booleanfalse이미지의 SRC를 교체하고 작물을 재건하십시오.
작물을 활성화 (풀림).
작물을 비활성화 (동결).
작물을 파괴하고 이미지에서 인스턴스를 제거하십시오.
오프셋 :
Number오프셋 (선택 사항) :
NumberoffsetX 입니다.상대 오프셋으로 캔버스 (이미지 래퍼)를 이동하십시오.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;X :
Numberleft 값Y (선택 사항) :
Numbertop 가치x 입니다.캔버스 (이미지 래퍼)를 절대 지점으로 이동하십시오.
Number상대 비율로 캔버스 (이미지 포장지)를 확대하십시오.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;비율 :
Number피벗 (선택 사항) :
Object{ x: Number, y: Number }캔버스 (이미지 래퍼)를 절대 비율로 확대하십시오.
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 ,
} ) ;Number이미지를 상대적인 정도로 회전시킵니다.
CSS3 2D 변환 지원 (예 : 9+)이 필요합니다.
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;Number이미지를 절대 정도로 회전시킵니다.
scalex :
Number11 과 같으면 아무것도하지 않습니다.Scaley (선택 사항) :
NumberscaleX 입니다.이미지를 확장하십시오.
CSS3 2D 변환 지원 (예 : 9+)이 필요합니다.
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 과 같으면 아무것도하지 않습니다.이미지의 가축성을 확장하십시오.
Number11 과 같으면 아무것도하지 않습니다.이미지의 정렬을 확장하십시오.
반올림 (선택 사항) :
Booleanfalsetrue 하십시오.(반환 값) :
Objectx : 자른 지역의 왼쪽 오프셋y : 자른 지역의 오프셋 상단width : 자른 영역의 너비height : 자른 지역의 높이rotate : 이미지의 회전 정도scaleX : 이미지의 가축성에 적용 할 스케일링 계수scaleY : 이미지의 세로 적용 할 스케일링 계수최종 자른 영역 위치 및 크기 데이터를 출력하십시오 (원본 이미지의 자연 크기에 따라).
데이터를 서버 측에 보내면 이미지를 직접 자르면 다음과 같습니다.
rotate속성으로 이미지를 회전시킵니다.scaleX및scaleY속성으로 이미지를 스케일링하십시오.x,y,width및height특성으로 이미지를 자릅니다.
ObjectgetData 메소드를 참조하십시오.새 데이터로 자른 영역 위치와 크기를 변경하십시오 (원본 이미지를 기준으로).
참고 : 이 메소드는
viewMode옵션의 값이1보다 크거나 같을 때만 사용할 수 있습니다.
Objectwidth : 컨테이너의 현재 너비height : 컨테이너의 현재 높이컨테이너 크기 데이터를 출력하십시오.
Objectleft : 이미지의 왼쪽 오프셋top : 이미지의 오프셋 상단width : 이미지의 너비height : 이미지의 높이naturalWidth : 이미지의 자연 폭naturalHeight : 이미지의 자연스러운 높이aspectRatio : 이미지의 종횡비rotate : 이미지가 회전하면 회전하는 정도scaleX : 스케일링 된 경우 이미지의 가축성에 적용 할 스케일링 계수scaleY : 스케일링 된 경우 이미지의 싱글에 적용 할 스케일링 계수이미지 위치, 크기 및 기타 관련 데이터를 출력합니다.
Objectleft : 캔버스의 왼쪽 오프셋top : 캔버스의 오프셋 상단width : 캔버스의 너비height : 캔버스의 높이naturalWidth : 캔버스의 자연 폭 (읽기 만 읽기)naturalHeight : 캔버스의 자연 높이 (읽기 만 읽기)캔버스 (이미지 포장지) 위치 및 크기 데이터를 출력하십시오.
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : 캔버스의 왼쪽 새 오프셋top : 캔버스의 새로운 오프셋 상단width : 캔버스의 새로운 너비height : 캔버스의 새로운 높이새로운 데이터로 캔버스 (이미지 포장지) 위치와 크기를 변경하십시오.
Objectleft : 작물 상자의 왼쪽 오프셋top : 작물 상자의 오프셋 상단width : 작물 상자의 너비height : 작물 상자의 높이작물 상자 위치 및 크기 데이터를 출력하십시오.
Objectleft : 작물 상자의 새 오프셋 왼쪽top : 작물 상자의 새로운 오프셋 상단width : 작물 상자의 새로운 너비height : 작물 상자의 새로운 높이새 데이터로 작물 상자 위치와 크기를 변경하십시오.
옵션 (선택 사항) :
Objectwidth : 출력 캔버스의 대상 너비.height : 출력 캔버스의 대상 높이.minWidth : 출력 캔버스의 최소 대상 너비, 기본값은 0 입니다.minHeight : 출력 캔버스의 최소 대상 높이, 기본값은 0 입니다.maxWidth : 출력 캔버스의 최대 대상 너비, 기본값은 Infinity 입니다.maxHeight : 출력 캔버스의 최대 대상 높이, 기본값은 Infinity 입니다.fillColor : 출력 캔버스의 모든 알파 값을 채우는 색상, 기본값은 transparent .imageSmoothingEnabled : 이미지가 부드럽게되면 ( true , default) 또는 ( false )가 변경되도록 설정합니다.imageSmoothingQuality : "낮은"(기본값), "매체"또는 "높은"이미지 스무딩 품질을 설정하십시오.rounded : 둥근 값 (자른 영역 위치 및 크기 데이터)을 사용하도록 true 하면 기본값은 false 입니다.(반환 값) :
HTMLCanvasElement참고 :
fillColor 옵션을 설정하지 않으면 JPEG 이미지의 투명 부분이 기본적으로 검은 색이됩니다.브라우저 지원 :
자른 이미지 (손실 압축)에서 캔버스를 그립니다. 자르지 않으면 전체 이미지를 그린 캔버스를 반환합니다.
그 후, 캔버스를 이미지로 직접 표시하거나 htmlcanvaselement.todataurl을 사용하여 데이터 URL을 가져 오거나 htmlcanvaselement.toblob을 사용하여 Blob을 가져 와서 브라우저가 이러한 API를 지원하는 경우 FormData로 서버에 업로드 할 수 있습니다.
빈 (또는 검은 색) 출력 이미지를받지 않으면 Canvas 요소의 크기 제한이 있기 때문에 maxWidth 및 maxHeight 속성을 제한된 숫자로 설정해야 할 수도 있습니다. 또한 같은 이유로 최대 줌 비율 ( zoom 이벤트)을 제한해야합니다.
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' */ ) ;Number작물 상자의 종횡비를 변경하십시오.
String'none''none' , 'crop' , 'move'드래그 모드를 변경하십시오.
팁 : 작물을 두 번 클릭하여 "작물"및 "이동"모드를 전환 할 수 있습니다.
⬆ 위로 돌아갑니다
이 이벤트는 대상 이미지가로드되고 Cropper 인스턴스가 작동 할 준비가되면 발사됩니다.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;event.detail.originalevent :
Eventpointerdown , touchstart 및 mousedownevent.detail.action :
String'crop' : 새 작물 상자를 만듭니다'move' : 캔버스 이동 (이미지 래퍼)'zoom' : 터치로 캔버스 (이미지 래퍼)를 확대 / 축소하십시오.'e' : 작물 상자의 동쪽 크기 조정'w' : 작물 상자의 서쪽 크기's' : 작물 상자의 남쪽 크기 조정'n' : 작물 상자의 북쪽 크기'se' : 작물 상자의 남동쪽 크기 조정'sw' : 작물 상자의 남서쪽 크기 조정'ne' : 작물 상자의 북동쪽 크기 조정'nw' : 작물 상자의 북서쪽 크기'all' : 작물 상자를 이동 (모든 방향)이 이벤트는 캔버스 (이미지 포장지) 또는 작물 상자가 변경되기 시작하면 발사됩니다.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;event.detail.originalevent :
Eventpointermove , touchmove 및 mousemove .event.detail.action : "Cropstart"와 동일합니다.
이 이벤트는 캔버스 (이미지 포장지) 또는 작물 상자가 변경되면 발사됩니다.
event.detail.originalevent :
Eventpointerup , pointercancel , touchend , touchcancel 및 mouseup .event.detail.action : "Cropstart"와 동일합니다.
이 이벤트는 캔버스 (이미지 포장지) 또는 작물 상자가 변경을 멈출 때 발생합니다.
이 속성에 대해서는
getData메소드를 참조하십시오.
이 이벤트는 캔버스 (이미지 포장지) 또는 작물 상자가 변경되면 발사됩니다.
참고 :
autoCrop 옵션이 true 로 설정되면 ready 이벤트 전에 crop 이벤트가 트리거됩니다.data 옵션이 설정되면 ready 이벤트 전에 다른 crop 이벤트가 트리거됩니다.event.detail.originalevent :
Eventwheel , pointermove , touchmove 및 mousemove .event.detail.oldratio :
Numberevent.detail.ratio :
NumbercanvasData.width / canvasData.naturalWidth )Cropper 인스턴스가 캔버스 (이미지 래퍼)를 확대하거나 축소하기 시작하면이 이벤트가 발생합니다.
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ 위로 돌아갑니다
동일한 네임 스페이스와 함께 다른 크롭퍼를 사용해야하는 경우 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 > 기고 가이드 라인을 읽으십시오.
시맨틱 버전 지침에 따라 유지됩니다.
MIT © Chen Fengyuan
⬆ 위로 돌아갑니다
