cropper.js裁剪图片的使用

Posted 2022-11-24 cnlisiyiii-stu

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

• 2. dragMode：定义cropper的拖拽模式
     默认: ‘crop’
     ‘crop’: 可以产生一个新的裁剪框3
     ‘move’: 只可以移动3
     ‘none’: 什么也不处理
• 3. aspectRatio：裁剪框的宽高比
     默认：NAN；
     在默认的时候可以随意改变裁剪框的大小，我这里的设置的值为 16/9。
• 4. preview：添加额外的元素(容器)以供预览
     默认：“ ”；
     注意这里是一个dom元素，必须可以被Document.querySelectorAll获取到。
     preview:".small",
<div class="small"></div>
     一定要设置small的宽高，如果想显示出裁剪的区域需要加上样式 overflow: hidden;
     
     
• 5. data：如果已经存储了以前的数据，那么在构建时将会自动将其传递给setData方法。
     默认：null；
• 6. responsive：在调整窗口大小的时候重新渲染cropper
     默认：true；
• 7. restore：在调整窗口大小后恢复裁剪的区域
     默认：true；
• 8. checkCrossOrigin：检查当前图像是否为跨域图像
     默认：true；
• 9. checkOrientation：检查当前图像的Exif定向信息
     默认：true；
• 10. modal：显示图片上方的黑色模态并在裁剪框下面
      默认：true；
• 11. guides：显示在裁剪框上方的虚线
      默认：true；
• 12. center：裁剪框在图片正中心
      默认：true；
• 13. highlight：在裁剪框上方显示白色的区域(突出裁剪框)
      默认：true；
• 14. background：显示容器的网格背景
      就是后面的马赛克
      默认：true；
• 15. autoCrop：当初始化时，可以自动生成图像
      就是自动显示裁剪框，改成false裁剪框自动消失
      默认：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实例开始放大或缩小画布(图像包装器)时，这个事件就会发生