cropper.js 裁剪图片 中文文档api

发布时间:2022-01-16 02:31:00 作者:路人甲 阅读(89)

官网http://fengyuanchen.github.io/cropper/
文档https://github.com/fengyuanchen/cropper/blob/master/README.md –v3.x版本
引入+使用

  1. <link href="/path/to/cropper.css" rel="stylesheet">
  2. <script src="/path/to/cropper.js"></script>

HTML结构

  1. <!-- 用一个块元素(容器)包装图像或画布元素 -->
  2. <div class="box">
  3. <img id="image" src="picture.jpg">
  4. </div>
  1. 这里注意,直接设置img的宽高是没有效果的,但是可以在父盒子上(即.box)设置;

官网上的是以下面的一段代码进行引入的

  1. var cropper = new Cropper(image, {
  2. aspectRatio: 16 / 9,
  3. viewMode:1,
  4. crop: function (e) {
  5. console.log(e.detail.x);
  6. console.log(e.detail.y);
  7. console.log(e.detail.width);
  8. console.log(e.detail.height);
  9. console.log(e.detail.rotate);
  10. console.log(e.detail.scaleX);
  11. console.log(e.detail.scaleY);
  12. }
  13. });

这里有个问题如果使用本地的cropper.js和cropper.css;就会报错(绝对的版本号的问题v1.x版本),而使用cdn方法报错就可以解除;
cdn的链接;如果使用本地的文件(v3.x版本)则写法变为

  1. $('#image').cropper({
  2. aspectRatio: 16 / 9,
  3. viewMode:1,
  4. crop: function (e) {
  5. console.log(e);
  6. }
  7. });

一个简单的demo就出现了;效果图
这里写图片描述;
参数options

  1. viewMode—定义cropper的视图模式
  2. 类型:number;默认:0;可以使用0,1,2,3
  3. 这里写图片描述
  4. 0:没有限制,3可以移动到2外。
  5. 1 : 3只能在2内移动。
  6. 22图片 不全部铺满1 (即缩小时可以有一边出现空隙)
  7. 32图片填充整个1
  8. dragMode —-定义cropper的拖拽模式。
  9. 类型: String
  10. 默认: crop
  11. 选项:
  12. crop’: 可以产生一个新的裁剪框3
  13. move’: 只可以移动3
  14. none’: 什么也不处理
  15. aspectRatio—-裁剪框的宽高比
  16. 类型:number;默认:NAN
  17. 在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9;
  18. data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)
  19. 类型:object;默认:null
  20. preview—-添加额外的元素(容器)以供预览
  21. 类型:Element / String 默认:“ ”;
  22. 注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到;
  23. preview:".small",
  24. HTML结构:<div class="small"></div>;注意一定要设置small的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
  25. 这里写图片描述
  26. 去掉overflow: hidden;效果图如下:
  27. 这里写图片描述
  28. 感觉成了一个放大镜;
  29. responsive—在调整窗口大小的时候重新渲染cropper
  30. 类型:Boolean 默认:true
  31. restore—在调整窗口大小后恢复裁剪的区域。
  32. 类型:Boolean 默认:true
  33. checkCrossOrigin—-检查当前图像是否为跨域图像。
  34. 类型:Boolean 默认:true
  35. checkOrientation—-检查当前图像的Exif定向信息。(不知道干什么用的)
  36. 类型:Boolean 默认:true
  37. 好像是移动端选择发生旋转变化的时候,触发的事件。
  38. modal—显示图片上方的黑色模态并在裁剪框下面。
  39. 类型:Boolean 默认:true
  40. 改成false效果图为:
  41. 这里写图片描述
  42. guides—显示在裁剪框上方的虚线。
  43. 类型:Boolean 默认:true
  44. 改成false效果图为:
  45. 这里写图片描述
  46. center—裁剪框在图片正中心。
  47. 类型:Boolean 默认:true
  48. highlight–在裁剪框上方显示白色的区域(突出裁剪框)。
  49. 类型:Boolean 默认:true
  50. background–显示容器的网格背景。(就是后面的马赛克)
  51. 类型:Boolean 默认:true
  52. autoCrop–当初始化时,可以自动生成图像。(就是自动显示裁剪框,改成false裁剪框自动消失)
  53. 类型:Boolean 默认:true
  54. 改成false效果图为:
  55. 这里写图片描述
  56. autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。
  57. 类型:number 默认:0.8
  58. 就是裁剪框显示的大小
  59. movable–是否允许可以移动后面的图片
  60. 类型:Boolean 默认:true
  61. rotatable–是否允许旋转图像。
  62. 类型:Boolean 默认:true
  63. scalable–是否允许缩放图像。
  64. 类型:Boolean 默认:true
  65. zoomable–是否允许放大图像。
  66. 类型:Boolean 默认:true
  67. zoomOnTouch–是否可以通过拖动触摸来放大图像。
  68. 类型:Boolean 默认:true
  69. zoomOnWheel–是否可以通过移动鼠标来放大图像。
  70. 类型:Boolean 默认:true
  71. wheelZoomRatio–用鼠标移动图像时,定义缩放比例。
  72. 类型:Number 默认:0.1
  73. cropBoxMovable—是否通过拖拽来移动剪裁框。
  74. 类型:Boolean 默认:true
  75. 改成false效果图为:剪裁框不可以拖动。
  76. cropBoxResizable—是否通过拖动来调整剪裁框的大小。
  77. 类型:Boolean 默认:true
  78. 改成false效果图为:剪裁框不可以调整大小。
  79. toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,
  80. 类型:Boolean 默认:true
  81. minContainerWidth—容器的最小宽度。
  82. 类型:Number 默认:200
  83. minContainerHeight—容器的最小高度。
  84. 类型:Number 默认:100
  85. minCanvasWidthcanvas的最小宽度。
  86. 类型:Number 默认:0
  87. minCanvasHeightcanvas的最小高度。
  88. 类型:Number 默认:0
  89. minCropBoxWidth—裁剪层的最小宽度。
  90. 类型:Number 默认:0
  91. minCropBoxHeight—裁剪层的最小高度。
  92. 类型:Number 默认:0
  93. ready—插件准备完成执行的函数(只执行一次)。
  94. 类型:Function 默认:null
  95. cropstart—剪裁框开始移动执行的函数。
  96. 类型:Function 默认:null
  97. cropmove—剪裁框移动时执行的函数。
  98. 类型:Function 默认:null
  99. cropend—剪裁框移动结束执行的函数。
  100. 类型:Function 默认:null
  101. crop—剪裁框发生变化执行的函数。
  102. 类型:Function 默认:null
  103. zoom—剪裁框缩放的时候执行的函数。
  104. 类型:Function 默认:null
  1. $('#image').cropper({
  2. aspectRatio: 16 / 9,
  3. viewMode:1,
  4. dragMode:'none',
  5. preview:".small",
  6. responsive:false,
  7. restore:false,
  8. // modal:false,
  9. // guides:false,
  10. // background:false,
  11. // autoCrop:false,
  12. // autoCropArea:0.1,
  13. // movable:false,
  14. // scalable:false,
  15. // zoomable:false,
  16. // wheelZoomRatio:false,
  17. // cropBoxMovable:false,
  18. // cropBoxResizable:false,
  19. ready:function () {
  20. console.log("ready");
  21. },
  22. cropstart: function (e) {
  23. console.log("cropstart");
  24. },
  25. cropmove: function (e) {
  26. console.log("cropmove");
  27. },
  28. cropend: function (e) {
  29. console.log("cropend");
  30. },
  31. crop: function (e) {
  32. console.log("crop");
  33. },
  34. zoom: function (e) {
  35. console.log("zoom");
  36. },
  37. });

这里写图片描述
Methods 方法

  1. 使用方法示例:
  1. $().cropper({
  2. ready: function () {
  3. $().cropper('method', argument1, , argument2, ..., argumentN);
  4. }
  5. });
  1. crop() 手动显示裁剪框
  1. $("#image").cropper({
  2. autoCrop: false, //关闭自动显示裁剪框
  3. ready: function () {
  4. $(this).cropper('crop');
  5. }
  6. });

2 . reset()—-将图像和裁剪框重置为初始状态

  1. <button id="reset">reset</button>
  2. //-----------------------------
  3. $("#reset").on("click", function () {
  4. $('#image').cropper('reset');
  5. })

3 . clear()—清除裁切框

  1. $("#clear").on("click", function () {
  2. $('#image').cropper('clear');
  3. })

4 . replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper

  1. url :–类型String;—新图片的url
  2. onlyColorChanged (optional):–类型:Boolean默认:false;—-如果只是改变颜色,而不是大小,那么cropper只需要改变所有相关图像的src,不需要重新构建cropper。这可以用于应用过滤器。(意思是:改成true,图像的比例会发生变化自适应父盒子的大小;会失真的)
  1. $("#replace").on("click", function () {
  2. $('#image').cropper('replace',"./images/111.jpeg",true );
  3. })

这里写图片描述 这里写图片描述

5 . enable()—解锁,锁定的裁切框(与disable相对应)

  1. $("#enable").on("click", function () {
  2. $('#image').cropper('enable');
  3. })

6 . disable()—锁定的裁切框(裁切框不可移动)(与enable相对应)

  1. $("#disable").on("click", function () {
  2. $('#image').cropper('disable');
  3. })

7 . destroy()—销毁cropper并从图像中删除整个cropper。

  1. $("#destroy").on("click", function () {
  2. $('#image').cropper('destroy');
  3. })

8 . move(offsetX[, offsetY])—使用相对偏移量移动图像(裁切框不移动)。

  1. offsetX–类型:Number;在水平方向上移动(px
  2. offsetY –类型:Number;在垂直方向上移动(px);如果不存在,其值和offsetX相同;
  1. $("#move1").on("click", function () {
  2. $('#image').cropper('move', 1, 0);
  3. })
  4. $("#move2").on("click", function () {
  5. $('#image').cropper('move', 0, -1);
  6. })

9 . moveTo(x[, y])—-将画布(图像包装器)移动到一个绝对点

  1. X–类型:Number;画布canvas距离left的值;
  2. Y –类型:Number;画布canvas距离top的值;如果不存在,其值和X相同;

10 . zoom(ratio)—放大图片,并使用相对比例。(裁切框不变化)

  1. $('#image').cropper('zoom', 0.1);
  2. $('#image').cropper('zoom', -0.1);

11 . zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例

  1. ratio:类型Number—要放大的比例
  1. $('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)

12 . rotate(degree)—旋转图像以一定的角度

  1. degree—类型: Number
  2. 向右旋转 (degree > 0);向左旋转 (degree < 0);
  1. $('#image').cropper('rotate', 90);
  2. $('#image').cropper('rotate', -90);

13 . rotateTo(degree)—旋转图像到固定的角度

  1. degree—类型: Number

14 . scale(scaleX[, scaleY])—-翻转图像

  1. scaleX–类型:Number;水平方向翻转;默认为 1
  2. scaleY–类型:Number;垂直方向翻转;如果不存在,其值和scaleX相同;
  1. $('#image').cropper('scale', -1); // 水平、垂直方向翻转
  2. $('#image').cropper('scale', -1, 1); // 水平方向翻转
  3. $('#image').cropper('scale', 1, -1); // 垂直方向翻转

15 . scaleX(scaleX)—-缩放图像的横坐标。

  1. 类型:Number;水平方向翻转;默认为 1

16 . scaleY(scaleY)—-缩放图像的纵坐标。

  1. 类型:Number;垂直方向翻转;默认为 1
  1. $('#image').cropper('scaleX', 1);

17 . getData([rounded])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小

  1. rounded 类型:Boolean 默认:false;设置true可以获取其所有数据;
  2. 返回的数据类型:Object
  3. - x裁切框距离左边的距离
  4. - y裁切框距离顶部的距离
  5. - width裁切框的宽度
  6. - height裁切框的高度
  7. - rotate裁切框的旋转的角度
  8. - scaleX缩放图像的横坐标
  9. - scaleY缩放图像的纵坐标
  10. 这里写图片描述
  1. $("#getData").on("click", function () {
  2. console.log($('#image').cropper('getData', true));;
  3. })

这里写图片描述
18 . setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)。

  1. data–类型:Object
  1. $("#setData").on("click", function () {
  2. $('#image').cropper('setData',{width:200,height:100});
  3. })

19 . getContainerData()—输出container 容器大小数据。

  1. 返回的数据类型:Object
  2. width当前容器的宽
  3. height当前容器的高

这里写图片描述

  1. $("#getContainerData").on("click", function () {
  2. console.log($('#image').cropper('getContainerData', ));;
  3. })

这里写图片描述
20 . getImageData()—-输出图像image位置、大小和其他相关数据。

  1. 返回的数据类型:Object
  2. - leftimage距离左边的距离
  3. - topimage距离顶部的距离
  4. - widthimage的宽度
  5. - heightimage的高度
  6. - naturalWidth image的原始宽度
  7. - naturalHeight image的原始高度
  8. - aspectRatio image的纵横比
  9. - rotateimage的旋转的角度
  10. - scaleX缩放图像的横坐标
  11. - scaleY缩放图像的纵坐标
  1. $("#getImageData").on("click", function () {
  2. console.log($('#image').cropper('getImageData', ));;
  3. })

这里写图片描述
21 . getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据。

  1. 返回的数据类型:Object
  2. - leftcanvas距离左边的距离
  3. - topcanvas距离顶部的距离
  4. - widthcanvas的宽度
  5. - heightcanvas的高度
  6. - naturalWidth canvas的原始宽度
  7. - naturalHeight canvas的原始高度

这里写图片描述;
注意getImageData()和getCanvasData()的naturalWidth、naturalHeight的值是一样的;
22 . setCanvasData(data)—:使用数据更改画布Canvas(图像包装器)位置和大小。

  1. 返回的数据类型:Object
  2. - leftcanvas距离左边的距离
  3. - topcanvas距离顶部的距离
  4. - widthcanvas的宽度
  5. - heightcanvas的高度
  1. $("#setCanvasData").on("click", function () {
  2. $('#image').cropper('setCanvasData',{width:200,height:100});
  3. })

23 .getCropBoxData()—输出剪切框的位置和大小数据。

  1. 返回的数据类型:Object
  2. - left剪切框距离左边的距离
  3. - top剪切框距离顶部的距离
  4. - width剪切框的宽度
  5. - height剪切框的高度
  1. $("#getCropBoxData").on("click", function () {
  2. console.log($('#image').cropper('getCropBoxData'));;
  3. })

这里写图片描述
24 . setCropBoxData(data)—–改变剪切框的位置和大小数据。

  1. data的数据类型:Object
  2. - left剪切框距离左边的距离
  3. - top剪切框距离顶部的距离
  4. - width剪切框的宽度
  5. - height剪切框的高度
  1. $("#setCropBoxData").on("click", function () {
  2. $('#image').cropper('setCropBoxData',{width:200,height:100});
  3. })

25 . getCroppedCanvas([options])—画一张剪裁的图片。如果没有剪裁,则返回一个绘制整个im的画布(这个感觉很有用)

  1. options 类型Object
  2. - width输出Canvas的宽度
  3. - height输出Canvas的高度
  4. - minWidth输出Canvas的最小宽度;默认值是0
  5. - minHeight输出Canvas的最小高度;默认值是0
  6. - maxWidth输出Canvas的最大宽度;默认值是Infinity(无穷大)
  7. - maxHeight输出Canvas的最大高度;默认值是Infinity(无穷大)
  8. - fillColor在输出画布Canvas中填充任何alpha的颜色,默认值是透明的
  9. - imageSmoothingEnabled如果图像被设置为平滑(true,默认)或不设置(false)。
  10. - imageSmoothingQuality设置图像的质量,一个“low”(默认)、“medium”或“high”。
  11. 返回值:类型:HTMLCanvasElement画布绘制出了剪裁过的图像
  12. 注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。
  13. 如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。
  14. 为了避免获得空白的输出图像,您可能需要将maxWidthmaxHeightproperties设置为有限的数字,从而来画布元素的大小限制。
  1. $("#getCroppedCanvas").on("click", function () {
  2. console.log($('#image').cropper('getCroppedCanvas'));;
  3. var cas=$('#image').cropper('getCroppedCanvas');
  4. var base64url=cas.toDataURL('image/jpeg');
  5. cas.toBlob(function (e) {
  6. console.log(e); //生成Blob的图片格式
  7. })
  8. console.log(base64url); //生成base64图片的格式
  9. $('.cavans').html(cas) //在body显示出canvas元素
  10. })

这里写图片描述 这里写图片描述

  1. $('#image').cropper('getCroppedCanvas', {
  2. width: 160,
  3. height: 90,
  4. minWidth: 256,
  5. minHeight: 256,
  6. maxWidth: 4096,
  7. maxHeight: 4096,
  8. fillColor: '#fff',
  9. imageSmoothingEnabled: false,
  10. imageSmoothingQuality: 'high',
  11. });
  12. // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
  13. $('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
  14. var formData = new FormData();
  15. formData.append('croppedImage', blob);
  16. $.ajax('/path/to/upload', {
  17. method: "POST",
  18. data: formData,
  19. processData: false,
  20. contentType: false,
  21. success: function () {
  22. console.log('Upload success');
  23. },
  24. error: function () {
  25. console.log('Upload error');
  26. }
  27. });
  28. });

26 . setAspectRatio(aspectRatio)—改变裁切框的宽高比。

  1. aspectRatio:类型number;是一个正数
  1. $("#setAspectRatio").on("click", function () {
  2. $('#image').cropper('setAspectRatio',1/1);
  3. })

27 . setDragMode([mode])—-设置拖拽模式(就是鼠标显示的是十字还是那种带箭头的十字)

  1. mode 类型String ;取值:nonecropmove;默认是none

Events 事件

ready—当一个cropper实例完全构建时,这个事件就会发生。
cropstart—当画布(图像包装器)或剪切框开始发生变化时,该事件就会发生。

  1. 返回的参数有event.originalEvent:;类型event;参数: mousedown, touchstart pointerdown ;即触发的事件源
  2. event.action::发生事件的行为(移动的方向)
  3. crop:创建一个剪切框的时候
  4. move:移动图片的时
  5. zoom:放大缩小canvas的时候
  6. e:调整剪切框东侧的大小
  7. w:调整剪切框西侧的大小
  8. s:调整剪切框南侧的大小
  9. n:调整剪切框北侧的大小
  10. se:东南
  11. sw:西南
  12. ne:东北
  13. nw:西北
  14. all:所有方向
  1. $('#image').on('cropstart', function (e) {
  2. console.log(e.type); // cropstart
  3. console.log(e.namespace); // cropper
  4. console.log(e.action); // ...
  5. console.log(e.originalEvent.pageX);
  6. // Prevent to start cropping, moving, etc if necessary
  7. if (e.action === 'crop') {
  8. e.preventDefault();
  9. }
  10. });

cropmove—当画布(图像包装器)或剪切框正在发生变化时,该事件就会发生;

  1. 返回的参数有event.originalEvent:;类型event;参数: mousemove, touchmove pointermove ;即触发的事件源
  2. event.action::发生事件的行为(移动的方向) cropstart的相同

cropend—当画布(图像包装器)或剪切框正在发生变化结束时,该事件就会发生;

  1. 返回的参数有event.originalEvent:;类型event;参数: mouseup, touchendpointerup pointercancel touchcancel ;即触发的事件源
  2. event.action::发生事件的行为(移动的方向) cropstart的相同

crop—当画布(图像包装器)或农作物盒发生改变时,该事件就会发生。

  1. event.x
  2. event.y
  3. event.width
  4. event.height
  5. event.rotate
  6. event.scaleX
  7. event.scaleY
  8. 这些参数的含义去参照getData

zoom—当一个cropper实例开始放大或缩小画布(图像包装器)时,这个事件就会发生。

  1. 返回的参数有
  2. event.originalEvent:;类型event;参数: wheel, touchmove ;即触发的事件源
  3. event.oldRatio:类型number;当前canvas的裁切比例
  4. event.ratio:类型number;新的canvas的裁切比例(canvasData.width / canvasData.naturalWidth)
  1. $().on('zoom', function (e) {
  2. // Zoom in
  3. if (e.ratio > e.oldRatio) {
  4. // Prevent zoom in
  5. e.preventDefault();
  6. }
  7. // Zoom out
  8. // ...
  9. });

代码下载地址http://download.csdn.net/download/weixin_38023551/10158550

关键字前端