cropper.js裁剪

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

引入+使用


  • 1
  • 2

HTML结构


  • 1
  • 2
  • 3
  • 4

这里注意,直接设置img的宽高是没有效果的,但是可以在父盒子上(即.box)设置;

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

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

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

$('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e);
        }
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 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结构:

    ;注意一定要设置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

 $('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        dragMode:'none',
        preview:".small",
        responsive:false,
        restore:false,
//        modal:false,
//        guides:false,
//        background:false,
//        autoCrop:false,
//        autoCropArea:0.1,
//        movable:false,
//        scalable:false,
//        zoomable:false,
//        wheelZoomRatio:false,
//        cropBoxMovable:false,
//        cropBoxResizable:false,
        ready:function () {
            console.log("ready");
        },
        cropstart: function (e) {
            console.log("cropstart");
        },
        cropmove: function (e) {
            console.log("cropmove");
        },
        cropend: function (e) {
            console.log("cropend");
        },
        crop: function (e) {
            console.log("crop");
        },
        zoom: function (e) {
            console.log("zoom");
        },
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

这里写图片描述

Methods 方法

使用方法示例:

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

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


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

3 . clear()—清除裁切框

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

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

url :–类型String;—新图片的url; 
onlyColorChanged (optional):–类型:Boolean默认:false;—-如果只是改变颜色,而不是大小,那么cropper只需要改变所有相关图像的src,不需要重新构建cropper。这可以用于应用过滤器。(意思是:改成true,图像的比例会发生变化自适应父盒子的大小;会失真的)

$("#replace").on("click", function () {
        $('#image').cropper('replace',"./images/111.jpeg",true );
    })
  • 1
  • 2
  • 3

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

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

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

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

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

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

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

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

offsetX–类型:Number;在水平方向上移动(px) 
offsetY –类型:Number;在垂直方向上移动(px);如果不存在,其值和offsetX相同;

    $("#move1").on("click", function () {
        $('#image').cropper('move', 1, 0);
    })
    $("#move2").on("click", function () {
        $('#image').cropper('move', 0, -1);
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

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

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

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

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

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

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

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

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

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

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

degree—类型: Number

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

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

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

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

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

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

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

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

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

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

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

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

data–类型:Object

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

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

返回的数据类型:Object

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

这里写图片描述

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

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

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

$("#getImageData").on("click", function () {
        console.log($('#image').cropper('getImageData', ));;
    })
  • 1
  • 2
  • 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的高度

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

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

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

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

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

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

$("#setCropBoxData").on("click", function () {
        $('#image').cropper('setCropBoxData',{width:200,height:100});
    })
  • 1
  • 2
  • 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设置为有限的数字,从而来画布元素的大小限制。

$("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的图片格式
        })
        console.log(base64url); //生成base64图片的格式
        $('.cavans').html(cas)  //在body显示出canvas元素
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

$('#image').cropper('getCroppedCanvas', {
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

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

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

aspectRatio:类型number;是一个正数

$("#setAspectRatio").on("click", function () {
        $('#image').cropper('setAspectRatio',1/1);
    })
  • 1
  • 2
  • 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:所有方向
$('#image').on('cropstart', function (e) {
  console.log(e.type); // cropstart
  console.log(e.namespace); // cropper
  console.log(e.action); // ...
  console.log(e.originalEvent.pageX);

  // Prevent to start cropping, moving, etc if necessary
  if (e.action === 'crop') {
    e.preventDefault();
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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)

$().on('zoom', function (e) {

  // Zoom in
  if (e.ratio > e.oldRatio) {

    // Prevent zoom in
    e.preventDefault();
  }

  // Zoom out
  // ...
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

你可能感兴趣的:(vue,裁剪)