Use cropper.js cropped pictures

Official website  http://fengyuanchen.github.io/cropper/
document  https://github.com/fengyuanchen/cropper/blob/master/README.md

---

 

Js introduced

. 1  < Link   the href = "/ path / to / cropper.css" the rel = "this stylesheet" > 
2  < Script the src = "/ path / to / cropper.js" > </ Script > 
. 3  <-! Recommended to separate img label is placed in a wrapping canvas div -> 
. 4  < div class = "Box" > 
. 5    < img ID = "Image" the src = "picture.jpg" > 
. 6  </ div >

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

The official introduction of the way

 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 });

Introduced way locally

If you are using a local cropper.js and cropper.css, version may report errors introduced with the following codes:

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

 

---

Parameters options

• 1. viewMode: cropper view mode defined
     by default: 0
     0: No restrictions, 2 to 3 can be moved outside.
     1: 3 can only move in two.
     2: 2 image are not all covered 1 (while there may be voids i.e. reduced)
     3: 2 image fills the entire 1

• 2. dragMode: cropper drag mode defined
     by default: 'Crop Allows you'
     'Crop Allows you': can generate a new cropping frame. 3
     'Move': only move. 3
     'none': nothing Processing
• 3. aspectRatio: crop frame aspect ratio
     Default: NAN;
     can change the size of the crop box in the default time, I am here to set the value of 16/9.
• 4. preview: add additional elements (container) for preview
     by default: "";
     note that this is a dom element, it must be to get Document.querySelectorAll. Be sure to set up small width and height, if you want to show the area to trim need to add style overflow: hidden;
     preview:".small",
<div class="small"></div>
     
     
     
• 5. data: If the previous data has been stored, then the build will be automatically passed to the setData method.
     Default: null;
• 6. responsive: resize the window in time to re-render cropper
     Default: true;
• 7. restore: After resizing windows recovery cropped area
     Default: true;
• 8. checkCrossOrigin: check the current image is the image of a cross-domain
     Default: true;
• 9. checkOrientation: check the current orientation of the image Exif information
     Default: true;
• 10. modal: black display mode image above and below the crop frame
      default: true;
• 11. guides: the dashed line shown in the top of the cropping frame
      default: true;
• 12. center: crop box in the center of the picture
      default: true;
• 13. highlight: displaying white area (projection cropping frame) over the crop frame
      default: true;
• 14. background: background display grid container
      is later mosaic
      default: true;
• 15. autoCrop: When the initialization can be automatically generated image
      is displayed automatically cropping frame, into a false crop box disappears automatically
      default: true;
• 16. autoCropArea：定义自动裁剪面积大小(百分比)和图片进行对比
      默认：0.8；
      就是裁剪框显示的大小
• 17. movable：是否允许可以移动后面的图片
      默认：true；
• 18. rotatable：是否允许旋转图像
      默认：true；
• 19. scalable：是否允许缩放图像
      默认：true；
• 20. zoomable：是否允许放大图像
      默认：true；
• 21. zoomOnTouch：是否可以通过拖动触摸来放大图像
      默认：true；
• 22. zoomOnWheel：是否可以通过移动鼠标来放大图像
      默认：true；
• 23. wheelZoomRatio：用鼠标移动图像时，定义缩放比例
      默认：0.1；
• 24. cropBoxMovable：是否通过拖拽来移动剪裁框
      默认：true；
      改成false效果图为：剪裁框不可以拖动
• 25. cropBoxResizable：是否通过拖动来调整剪裁框的大小
      默认：true；
      改成false效果图为：剪裁框不可以调整大小
• 26. toggleDragModeOnDblclick：当点击两次时可以在“crop”和“move”之间切换拖拽模式
      默认：true；
• 27. minContainerWidth：容器的最小宽度
      默认：200；
• 28. minContainerHeight：容器的最小高度
      默认：100；
• 29. minCanvasWidth：canvas的最小宽度
      默认：0；
• 30. minCanvasHeight：canvas的最小高度
      默认：0；
• 31. minCropBoxWidth：裁剪层的最小宽度
      默认：0；
• 32. minCropBoxHeight：裁剪层的最小高度
      默认：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；

---

Methods 方法

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

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

• 2. reset()：将图像和裁剪框重置为初始状态
• 3. clear()：清除裁切框
• 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 ); }) 

• 5. enable()：解锁，锁定的裁切框（与disable相对应）
• 6. disable()：锁定的裁切框（裁切框不可移动）（与enable相对应）
• 7. destroy()：销毁cropper并从图像中删除整个cropper
• 8. move(offsetX[, offsetY])：使用相对偏移量移动图像(裁切框不移动)
• 9. moveTo(x[, y])：将画布(图像包装器)移动到一个绝对点
• 10. zoom(ratio)：放大图片，并使用相对比例（裁切框不变化）
• 11. zoomTo(ratio)：将画布(图像包装器)放大到一个绝对比例
• 12. rotate(degree)：旋转图像以一定的角度
• 13. rotateTo(degree)：旋转图像到固定的角度
• 14. scale(scaleX[, scaleY])：翻转图像
      scaleX：类型Number；水平方向翻转；默认为 1
      scaleY：类型Number；垂直方向翻转；如果不存在，其值和scaleX相同；

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

• 15. scaleX(scaleX)：缩放图像的横坐标
• 16. scaleY(scaleY)：缩放图像的纵坐标
• 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));; }) 

• 18. setData(data)：用新数据改变裁切区域的位置和大小(以原始图像为基础)
• 19. getContainerData()：输出container 容器大小数据
• 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', ));; }) 

• 21. getCanvasData()：输出画布Canvas(图像包装器)位置和大小数据
      返回的数据类型：Object；
      leftcanvas距离左边的距离
      topcanvas距离顶部的距离
      widthcanvas的宽度
      heightcanvas的高度
      naturalWidth canvas的原始宽度
      naturalHeight canvas的原始高度
      注意：getImageData() 和 getCanvasData()的naturalWidth、naturalHeight的值是一样的
• 22. setCanvasData(data)：使用数据更改画布Canvas(图像包装器)位置和大小
• 23. getCropBoxData()：输出剪切框的位置和大小数据
• 24. setCropBoxData(data)：改变剪切框的位置和大小数据
• 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元素 }) 

$('#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'); } }); }); 

• 26. setAspectRatio(aspectRatio)：改变裁切框的宽高比
• 27. setDragMode([mode])：设置拖拽模式
      就是鼠标显示的是十字还是那种带箭头的十字
      mode 类型String
      取值：none、crop、move；
      默认none

---

Events事件

• 1. ready：当一个cropper实例完全构建时，这个事件就会发生
• 2. 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(); } }); 

• 3. cropmove：当画布(图像包装器)或剪切框正在发生变化时，该事件就会发生
• 4. cropend：当画布(图像包装器)或剪切框正在发生变化结束时，该事件就会发生
• 5. crop：当画布(图像包装器)或农作物盒发生改变时，该事件就会发生
• 6. zoom：当一个cropper实例开始放大或缩小画布(图像包装器)时，这个事件就会发生