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，则应在完全显示模态后初始化农作物。否则，您将无法获得正确的农作物。
输出的裁剪数据基于原始图像大小，因此您可以使用它们直接裁剪图像。
如果您尝试在交叉原始图像上启动农作物，请确保您的浏览器支持HTML5 CORS设置属性，并且您的Image Server支持Access-Control-Allow-Origin选项（请参阅HTTP访问控制（CORS））。
已知的iOS资源限制：随着iOS设备限制内存，当您裁剪大图像（iPhone摄像头分辨率）时，浏览器可能会崩溃。为了避免这种情况，您可以在开始农作物之前先调整图像（最好低于1024像素）。
已知的图像大小增加：使用HTMLCanvasElement.toDataURL方法在浏览器侧导出裁剪的图像时，导出的图像的大小可能大于原始图像的大小。这是因为导出图像的类型与原始图像不同。因此，只需将原始图像的类型作为第一个参数传递给toDataURL即可解决此问题。例如，如果原始类型是jpeg，则使用cropper.getCroppedCanvas().toDataURL('image/jpeg')导出图像。
⬆回到顶部
您可以设置具有new Cropper(image, options)的农作物选项。如果要更改全局默认选项，则可以使用Cropper.setDefaults(options) 。
Number00 ：无限制1 ：限制农作物盒不超过画布的大小。2 ：限制最小画布大小以适合容器内。如果画布的比例和容器的比例不同，则最小画布将被其中一个尺寸的额外空间所包围。3 ：限制最小帆布尺寸以填充容器。如果画布和容器的比例不同，则容器将无法将整个画布安装在其中一个尺寸中。定义农作物的视图模式。如果将viewMode设置为0 ，则裁剪盒可以在画布外面延伸，而1或3 2值将裁剪盒限制为画布的大小。 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方向信息。
确切地说，读取旋转或翻转图像的方向值，然后用1 （默认值）覆盖方向值，以避免iOS设备上的某些问题（1，2）。
要求将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并重建农作物。
启用（解冻）农作物。
禁用（冻结）农作物。
破坏农作物并从图像中删除实例。
OffSetX ：
NumberOffsety （可选）：
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 ，它无济于事。比例尺（可选）：
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 ：填充输出画布中任何Alpha值的颜色，默认值是transparent 。imageSmoothingEnabled ：如果图像平滑（ true ，默认）（ false ），则设置为更改。imageSmoothingQuality ：设置图像平滑的质量，是“低”（默认），“中”或“高”之一。rounded ： true为使用圆形值（裁剪的区域位置和尺寸数据），默认值为false 。（返回值）：
HTMLCanvasElement笔记：
fillColor选项，如果不是，则默认情况下，JPEG图像中的透明部分将变为黑色。浏览器支持：
从裁剪图像（有损压缩）中获取画布。如果没有裁剪，则返回绘制整个图像的画布。
之后，您可以将画布直接显示为图像，也可以使用htmlcanvaselement.todataurl获取数据URL，或使用htmlcanvaselement.toblob获取blob并使用formdata上传，如果浏览器支持这些API，则使用formdata上传。
避免获得空白（或黑色）输出图像，您可能需要将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'更改阻力模式。
提示：您可以双击裁剪器来切换“作物”和“移动”模式。
⬆回到顶部
当已加载目标图像并准备好操作时，此事件会发射。
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 ）当农作物实例开始放大或缩放其画布（图像包装器）时，此事件会发射。
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 > 请阅读我们的贡献指南。
根据语义版本指南维护。
麻省理工学院©Chen Fengyuan
⬆回到顶部
