https://blog.csdn.net/weixin_38023551/article/details/78792400

官网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>

这里注意,直接设置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的视图模式

    类型:number;默认:0;可以使用0,1,2,3; 
    这里写图片描述 
    0:没有限制,3可以移动到2外。 
    1 : 3只能在2内移动。 
    2:2图片 不全部铺满1 (即缩小时可以有一边出现空隙) 
    3:2图片填充整个1

  2. dragMode —-定义cropper的拖拽模式。

    类型: String 
    默认: ‘crop’ 
    选项: 
    ‘crop’: 可以产生一个新的裁剪框3 
    ‘move’: 只可以移动3 
    ‘none’: 什么也不处理

  3. aspectRatio—-裁剪框的宽高比

    类型:number;默认:NAN; 
    在默认的时候。可以随意改变裁剪框的大小;我这里的设置的值为 16/9;

  4. data—如果您已经存储了以前的数据,那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)

    类型:object;默认:null;

  5. preview—-添加额外的元素(容器)以供预览

    类型:Element / String 默认:“ ”; 
    注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到; 
    preview:".small", 
    HTML结构:<div class="small"></div>;注意一定要设置small的宽高;最好和裁剪比例一致;还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden; 
    这里写图片描述 
    去掉overflow: hidden;效果图如下: 
    这里写图片描述
    感觉成了一个放大镜;

  6. responsive—在调整窗口大小的时候重新渲染cropper

    类型:Boolean 默认:true;

  7. restore—在调整窗口大小后恢复裁剪的区域。

    类型:Boolean 默认:true;

  8. checkCrossOrigin—-检查当前图像是否为跨域图像。

    类型:Boolean 默认:true;

  9. checkOrientation—-检查当前图像的Exif定向信息。(不知道干什么用的)

    类型:Boolean 默认:true; 
    好像是移动端选择发生旋转变化的时候,触发的事件。

  10. modal—显示图片上方的黑色模态并在裁剪框下面。

    类型:Boolean 默认:true; 
    改成false效果图为: 
    这里写图片描述

  11. guides—显示在裁剪框上方的虚线。

    类型:Boolean 默认:true; 
    改成false效果图为: 
    这里写图片描述

  12. center—裁剪框在图片正中心。

    类型:Boolean 默认:true;

  13. highlight–在裁剪框上方显示白色的区域(突出裁剪框)。

    类型:Boolean 默认:true;

  14. background–显示容器的网格背景。(就是后面的马赛克)

    类型:Boolean 默认:true;

  15. autoCrop–当初始化时,可以自动生成图像。(就是自动显示裁剪框,改成false裁剪框自动消失)

    类型:Boolean 默认:true; 
    改成false效果图为: 
    这里写图片描述

  16. autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。

    类型:number 默认:0.8; 
    就是裁剪框显示的大小

  17. movable–是否允许可以移动后面的图片

    类型:Boolean 默认:true;

  18. rotatable–是否允许旋转图像。

    类型:Boolean 默认:true;

  19. scalable–是否允许缩放图像。

    类型:Boolean 默认:true;

  20. zoomable–是否允许放大图像。

    类型:Boolean 默认:true;

  21. zoomOnTouch–是否可以通过拖动触摸来放大图像。

    类型:Boolean 默认:true;

  22. zoomOnWheel–是否可以通过移动鼠标来放大图像。

    类型:Boolean 默认:true;

  23. wheelZoomRatio–用鼠标移动图像时,定义缩放比例。

    类型:Number 默认:0.1;

  24. cropBoxMovable—是否通过拖拽来移动剪裁框。

    类型:Boolean 默认:true; 
    改成false效果图为:剪裁框不可以拖动。

  25. cropBoxResizable—是否通过拖动来调整剪裁框的大小。

    类型:Boolean 默认:true; 
    改成false效果图为:剪裁框不可以调整大小。

  26. toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式,

    类型:Boolean 默认:true;

  27. minContainerWidth—容器的最小宽度。

    类型:Number 默认:200;

  28. minContainerHeight—容器的最小高度。

    类型:Number 默认:100;

  29. minCanvasWidth—canvas的最小宽度。

    类型:Number 默认:0;

  30. minCanvasHeight—canvas的最小高度。

    类型:Number 默认:0;

  31. minCropBoxWidth—裁剪层的最小宽度。

    类型:Number 默认:0;

  32. minCropBoxHeight—裁剪层的最小高度。

    类型:Number 默认:0;

  33. ready—插件准备完成执行的函数(只执行一次)。

    类型:Function 默认:null

  34. cropstart—剪裁框开始移动执行的函数。

    类型:Function 默认:null

  35. cropmove—剪裁框移动时执行的函数。

    类型:Function 默认:null

  36. cropend—剪裁框移动结束执行的函数。

    类型:Function 默认:null

  37. crop—剪裁框发生变化执行的函数。

    类型:Function 默认:null

  38. zoom—剪裁框缩放的时候执行的函数。

    类型: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. $().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

url :–类型String;—新图片的url; 
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])—使用相对偏移量移动图像(裁切框不移动)。

offsetX–类型:Number;在水平方向上移动(px) 
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])—-将画布(图像包装器)移动到一个绝对点

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

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

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

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

ratio:类型Number—要放大的比例

$('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)

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

degree—类型: Number 
向右旋转 (degree > 0);向左旋转 (degree < 0);

  1. $('#image').cropper('rotate', 90);
  2. $('#image').cropper('rotate', -90);

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

degree—类型: Number

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

scaleX–类型:Number;水平方向翻转;默认为 1 
scaleY–类型:Number;垂直方向翻转;如果不存在,其值和scaleX相同;

  1. $('#image').cropper('scale', -1); // 水平、垂直方向翻转
  2. $('#image').cropper('scale', -1, 1); // 水平方向翻转
  3. $('#image').cropper('scale', 1, -1); // 垂直方向翻转

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

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

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

类型:Number;垂直方向翻转;默认为 1

$('#image').cropper('scaleX', 1); 
  •  

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

rounded 类型:Boolean 默认:false;设置true可以获取其所有数据; 
返回的数据类型:Object; 
x裁切框距离左边的距离 
y裁切框距离顶部的距离 
width裁切框的宽度 
height裁切框的高度 
rotate裁切框的旋转的角度 
scaleX缩放图像的横坐标 
scaleY缩放图像的纵坐标 
这里写图片描述

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

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

data–类型:Object

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

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

返回的数据类型:Object

  • width当前容器的宽
  • height当前容器的高

这里写图片描述

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

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

返回的数据类型:Object; 
leftimage距离左边的距离 
topimage距离顶部的距离 
widthimage的宽度 
heightimage的高度 
naturalWidth image的原始宽度 
naturalHeight image的原始高度 
aspectRatio image的纵横比 
rotateimage的旋转的角度 
scaleX缩放图像的横坐标 
scaleY缩放图像的纵坐标

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

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

返回的数据类型:Object; 
leftcanvas距离左边的距离 
topcanvas距离顶部的距离 
widthcanvas的宽度 
heightcanvas的高度 
naturalWidth canvas的原始宽度 
naturalHeight canvas的原始高度

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

返回的数据类型:Object; 
leftcanvas距离左边的距离 
topcanvas距离顶部的距离 
widthcanvas的宽度 
heightcanvas的高度

  1. $("#setCanvasData").on("click", function () {
  2. $('#image').cropper('setCanvasData',{width:200,height:100});
  3. })

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

返回的数据类型:Object; 
left剪切框距离左边的距离 
top剪切框距离顶部的距离 
width剪切框的宽度 
height剪切框的高度

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

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

data的数据类型:Object; 
left剪切框距离左边的距离 
top剪切框距离顶部的距离 
width剪切框的宽度 
height剪切框的高度

  1. $("#setCropBoxData").on("click", function () {
  2. $('#image').cropper('setCropBoxData',{width:200,height:100});
  3. })

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

options 类型Object 
width输出Canvas的宽度 
height输出Canvas的高度 
minWidth输出Canvas的最小宽度;默认值是0 
minHeight输出Canvas的最小高度;默认值是0 
maxWidth输出Canvas的最大宽度;默认值是Infinity(无穷大) 
maxHeight输出Canvas的最大高度;默认值是Infinity(无穷大) 
fillColor在输出画布Canvas中填充任何alpha的颜色,默认值是透明的 
imageSmoothingEnabled如果图像被设置为平滑(true,默认)或不设置(false)。 
imageSmoothingQuality设置图像的质量,一个“low”(默认)、“medium”或“high”。 
返回值:类型:HTMLCanvasElement画布绘制出了剪裁过的图像 
注意:输出canvas画布的宽高比将自动适应剪切框的纵横比。 
如果您打算从输出画布canvas中获得一个JPEG图像,您应该首先设置填色选项,否则,JPEG图像中的透明部分将在缺少情况下变为黑色。 
为了避免获得空白的输出图像,您可能需要将maxWidth和maxHeightproperties设置为有限的数字,从而来画布元素的大小限制。

  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)—改变裁切框的宽高比。

aspectRatio:类型number;是一个正数

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

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

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

Events 事件

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

返回的参数有event.originalEvent:;类型event;参数: mousedowntouchstart 和 pointerdown ;即触发的事件源 
event.action::发生事件的行为(移动的方向)

  • crop:创建一个剪切框的时候
  • move:移动图片的时
  • zoom:放大缩小canvas的时候
  • e:调整剪切框东侧的大小
  • w:调整剪切框西侧的大小
  • s:调整剪切框南侧的大小
  • n:调整剪切框北侧的大小
  • se:东南
  • sw:西南
  • ne:东北
  • nw:西北
  • 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—当画布(图像包装器)或剪切框正在发生变化时,该事件就会发生;

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

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

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

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

  • event.x
  • event.y
  • event.width
  • event.height
  • event.rotate
  • event.scaleX
  • event.scaleY 
    这些参数的含义去参照getData

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

返回的参数有 
event.originalEvent:;类型event;参数: wheeltouchmove ;即触发的事件源 
event.oldRatio:类型number;当前canvas的裁切比例 
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. });

最后女神镇楼 
这里写图片描述 
自己写的比较好理解; 
究极的demo 
这里写图片描述
代码下载地址http://download.csdn.net/download/weixin_38023551/10158550

所有评论
加载评论 ...
发表评论