cropper.js裁剪图片的使用

官网 http://fengyuanchen.github.io/cropper/
文档 https://github.com/fengyuanchen/cropper/blob/master/README.md

引入js

1 <link  href="/path/to/cropper.css" rel="stylesheet">
2 <script src="/path/to/cropper.js"></script>
3 <!-- 建议把单独的img标签放在一个div中 包裹画布-->
4 <div class="box">
5   <img id="image" src="picture.jpg">
6 </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，可能报版本的错误，用下面的引入代码：

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

参数 options

1. viewMode：定义cropper的视图模式
  默认：0
  0：没有限制，3可以移动到2外。
  1 : 3只能在2内移动。
  2：2图片不全部铺满1 （即缩小时可以有一边出现空隙）
  3：2图片填充整个1

1. dragMode：定义cropper的拖拽模式
  默认: ‘crop’
  ‘crop’: 可以产生一个新的裁剪框3
  ‘move’: 只可以移动3
  ‘none’: 什么也不处理
1. aspectRatio：裁剪框的宽高比
  默认：NAN；
  在默认的时候可以随意改变裁剪框的大小，我这里的设置的值为 16/9。
1. preview：添加额外的元素(容器)以供预览
  默认：“ ”；
  注意这里是一个dom元素，必须可以被Document.querySelectorAll获取到。
  preview:".small",
  <div class="small"></div>
  一定要设置small的宽高，如果想显示出裁剪的区域需要加上样式 overflow: hidden;
1. data：如果已经存储了以前的数据，那么在构建时将会自动将其传递给setData方法。
  默认：null；
1. responsive：在调整窗口大小的时候重新渲染cropper
  默认：true；
1. restore：在调整窗口大小后恢复裁剪的区域
  默认：true；
1. checkCrossOrigin：检查当前图像是否为跨域图像
  默认：true；
1. checkOrientation：检查当前图像的Exif定向信息
  默认：true；
1. modal：显示图片上方的黑色模态并在裁剪框下面
  默认：true；
1. guides：显示在裁剪框上方的虚线
  默认：true；
1. center：裁剪框在图片正中心
  默认：true；
1. highlight：在裁剪框上方显示白色的区域(突出裁剪框)
  默认：true；
1. background：显示容器的网格背景
  就是后面的马赛克
  默认：true；
1. autoCrop：当初始化时，可以自动生成图像
  就是自动显示裁剪框，改成false裁剪框自动消失
  默认：true；
1. autoCropArea：定义自动裁剪面积大小(百分比)和图片进行对比
  默认：0.8；
  就是裁剪框显示的大小
1. movable：是否允许可以移动后面的图片
  默认：true；
1. rotatable：是否允许旋转图像
  默认：true；
1. scalable：是否允许缩放图像
  默认：true；
1. zoomable：是否允许放大图像
  默认：true；
1. zoomOnTouch：是否可以通过拖动触摸来放大图像
  默认：true；
1. zoomOnWheel：是否可以通过移动鼠标来放大图像
  默认：true；
1. wheelZoomRatio：用鼠标移动图像时，定义缩放比例
  默认：0.1；
1. cropBoxMovable：是否通过拖拽来移动剪裁框
  默认：true；
  改成false效果图为：剪裁框不可以拖动
1. cropBoxResizable：是否通过拖动来调整剪裁框的大小
  默认：true；
  改成false效果图为：剪裁框不可以调整大小
1. toggleDragModeOnDblclick：当点击两次时可以在“crop”和“move”之间切换拖拽模式
  默认：true；
1. minContainerWidth：容器的最小宽度
  默认：200；
1. minContainerHeight：容器的最小高度
  默认：100；
1. minCanvasWidth：canvas的最小宽度
  默认：0；
1. minCanvasHeight：canvas的最小高度
  默认：0；
1. minCropBoxWidth：裁剪层的最小宽度
  默认：0；
1. minCropBoxHeight：裁剪层的最小高度
  默认：0；
1. ready：插件准备完成执行的函数（只执行一次）
  类型：Function
  默认：null；
1. cropstart—剪裁框开始移动执行的函数
  类型：Function
  默认：null；
1. cropmove—剪裁框移动时执行的函数
  类型：Function
  默认：null；
1. cropend—剪裁框移动结束执行的函数
  类型：Function
  默认：null；
1. crop—剪裁框发生变化执行的函数
  类型：Function
  默认：null；
1. zoom—剪裁框缩放的时候执行的函数
  类型：Function
  默认：null；

Methods 方法

1. crop() 手动显示裁剪框

$("#image").cropper({
  autoCrop: false, //关闭自动显示裁剪框 ready: function () { $(this).cropper('crop'); } });

1. reset()：将图像和裁剪框重置为初始状态
1. clear()：清除裁切框
1. 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. enable()：解锁，锁定的裁切框（与disable相对应）
1. disable()：锁定的裁切框（裁切框不可移动）（与enable相对应）
1. destroy()：销毁cropper并从图像中删除整个cropper
1. move(offsetX[, offsetY])：使用相对偏移量移动图像(裁切框不移动)
1. moveTo(x[, y])：将画布(图像包装器)移动到一个绝对点
1. zoom(ratio)：放大图片，并使用相对比例（裁切框不变化）
1. zoomTo(ratio)：将画布(图像包装器)放大到一个绝对比例
1. rotate(degree)：旋转图像以一定的角度
1. rotateTo(degree)：旋转图像到固定的角度
1. scale(scaleX[, scaleY])：翻转图像
  scaleX：类型Number；水平方向翻转；默认为 1
  scaleY：类型Number；垂直方向翻转；如果不存在，其值和scaleX相同；

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

1. scaleX(scaleX)：缩放图像的横坐标
1. scaleY(scaleY)：缩放图像的纵坐标
1. 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. setData(data)：用新数据改变裁切区域的位置和大小(以原始图像为基础)
1. getContainerData()：输出container 容器大小数据
1. 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. getCanvasData()：输出画布Canvas(图像包装器)位置和大小数据
  返回的数据类型：Object；
  leftcanvas距离左边的距离
  topcanvas距离顶部的距离
  widthcanvas的宽度
  heightcanvas的高度
  naturalWidth canvas的原始宽度
  naturalHeight canvas的原始高度
  注意：getImageData() 和 getCanvasData()的naturalWidth、naturalHeight的值是一样的
1. setCanvasData(data)：使用数据更改画布Canvas(图像包装器)位置和大小
1. getCropBoxData()：输出剪切框的位置和大小数据
1. setCropBoxData(data)：改变剪切框的位置和大小数据
1. 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元素 })

$('#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. setAspectRatio(aspectRatio)：改变裁切框的宽高比
1. setDragMode([mode])：设置拖拽模式
  就是鼠标显示的是十字还是那种带箭头的十字
  mode 类型String
  取值：none、crop、move；
  默认none

Events事件

1. ready：当一个cropper实例完全构建时，这个事件就会发生
1. cropstart：当画布(图像包装器)或剪切框开始发生变化时，该事件就会发生
  返回的参数有：
  event.originalEvent 类型event；
  mousedown、touchstart 和 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. cropmove：当画布(图像包装器)或剪切框正在发生变化时，该事件就会发生
1. cropend：当画布(图像包装器)或剪切框正在发生变化结束时，该事件就会发生
1. crop：当画布(图像包装器)或农作物盒发生改变时，该事件就会发生
1. zoom：当一个cropper实例开始放大或缩小画布(图像包装器)时，这个事件就会发生

cropper.js裁剪图片的使用

引入js

官方引入方式

本地引入方式

参数 options

Methods 方法

Events事件

猜你喜欢