如何使用CropperJS进行图片裁剪？

Cropper.js是一个强大且灵活的JavaScript图片裁剪工具，广泛应用于各种网页和移动应用中，它支持多种配置选项和功能，能够满足开发者在不同场景下的需求，以下是对Cropper.js使用的一些详细介绍：

Cropper.js 的基本使用方法

1、引入 Cropper.js

可以通过npm安装Cropper.js：npm install cropperjs

在项目中引入CSS和JS文件：

     import 'cropperjs/dist/cropper.css';
     import Cropper from 'cropperjs';

2、HTML结构

需要用块元素（如div）包裹图像或画布元素：

     <div>
       <img id="image" src="picture.jpg">
     </div>

确保图像大小完全适合容器：

     img {
       display: block; /* 这个规则很重要，请不要忽略 */
       max-width: 100%;
     }

3、实例化 Cropper

获取DOM对象并调用Cropper构造函数：

     const image = document.getElementById('image');
     const cropper = new Cropper(image, {
       aspectRatio: 1, // 裁剪框尺寸
       viewMode: 1, // 限制裁剪框不超过画布的大小
       dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布
       cropBoxResizable: false, // 通过拖动来调整裁剪框的大小
       cropBoxMovable: false, // 通过拖动移动裁剪框。
       background: false // 显示容器的网格背景
     });

4、获取裁切后的图片

使用getCroppedCanvas方法获取裁切后的图片信息：

     getCroppedCanvas() {
       return new Promise(resolve => {
         this.cropper.getCroppedCanvas().toBlob(blob => {
           resolve(blob);
         });
       });
     }

5、示例代码

完整示例如下：

     <template>
       <div class="updata-photo">
         <img :src="image" alt="" ref="img">
         <van-nav-bar left-text="取消" right-text="确认" @click-left="$emit('close')" @click-right="onClickRight"></van-nav-bar>
       </div>
     </template>
     <script>
     import { setPhotofile } from '@/api/user.js';
     import 'cropperjs/dist/cropper.css';
     import Cropper from 'cropperjs';
     export default {
       name: 'UpdataPhoto',
       props: {
         value: { type: String, require: true },
         file: { type: File, require: true }
       },
       data() {
         return {
           image: window.URL.createObjectURL(this.file),
           cropper: null
         };
       },
       methods: {
         getCroppedCanvas() {
           return new Promise(resolve => {
             this.cropper.getCroppedCanvas().toBlob(blob => {
               resolve(blob);
             });
           });
         },
         async onClickRight() {
           this.$toast.loading({ message: '修改中...', forbidClick: true });
           const file = await this.getCroppedCanvas();
           const fd = new FormData();
           fd.append('photo', file);
           const res = await setPhotofile(fd).catch(err => err);
           if (res.status !== 201) {
             this.$toast.fail('修改失败');
             return;
           }
           this.$toast.success('修改成功');
           this.$emit('input', res.data.data.photo);
           this.$emit('close');
         }
       },
       mounted() {
         const image = this.$refs.img;
         this.cropper = new Cropper(image, {
           aspectRatio: 1, // 裁剪框尺寸
           viewMode: 1, // 限制裁剪框不超过画布的大小
           dragMode: 'move', // 定义裁剪器的拖动模式。 移动画布
           cropBoxResizable: false, // 通过拖动来调整裁剪框的大小
           cropBoxMovable: false, // 通过拖动移动裁剪框。
           background: false // 显示容器的网格背景
         });
       }
     };
     </script>

Cropper.js 的配置选项

配置项	描述	默认值
aspectRatio	裁剪框的宽高比	NaN
viewMode	视图模式，决定裁剪框是否超出画布范围	0
dragMode	拖动模式，可以是’crop’、’move’或’none’	‘crop’
background	是否显示网格背景	true
autoCropArea	自动裁剪区域占图片的比例	0.8
cropBoxMovable	是否可以移动裁剪框	true
cropBoxResizable	是否可以调整裁剪框的大小	true
rotatable	是否允许旋转图片	true
scalable	是否允许缩放图片	true
zoomable	是否允许缩放图片	true
zoomOnTouch	是否允许触摸缩放	true
zoomOnWheel	是否允许鼠标滚轮缩放	true
wheelZoomRatio	鼠标滚轮缩放灵敏度	0.1
restore	窗口尺寸变化时是否恢复被裁剪的区域	true
checkCrossOrigin	是否检查跨域图片	true
checkOrientation	是否检查图片方向信息	true
modal	是否显示黑色蒙版	true
guides	是否显示虚线指示器	true
center	是否显示中心点	true
highlight	是否显示白色蒙版	true
responsive	是否响应式设计	true
preview	预览元素，可以是Element、Array、NodeList或选择器字符串	”
minContainerWidth	容器最小宽度	200
minContainerHeight	容器最小高度	100
minCanvasWidth	画布最小宽度	0
minCanvasHeight	画布最小高度	0
minCropBoxWidth	裁剪框最小宽度	0
minCropBoxHeight	裁剪框最小高度	0
toggleDragModeOnDblclick	双击切换拖动模式	true

Cropper.js 的事件与回调函数

事件名	触发时机
cropstart	开始裁剪时触发
cropmove	裁剪框移动时触发
cropend	结束裁剪时触发
crop	完成裁剪时触发
zoom	缩放时触发
zoomstart	开始缩放时触发
zoomend	结束缩放时触发
rotate	旋转时触发
rotatestart	开始旋转时触发
rotateend	结束旋转时触发
move	移动时触发
movestart	开始移动时触发
moveend	结束移动时触发
clear	清除裁剪框时触发
replace	替换图片时触发
destroy	销毁裁剪实例时触发

常见问题解答（FAQ）

1、如何设置裁剪框的初始宽高比？

可以在初始化Cropper实例时，通过initialAspectRatio选项来设置：

   const cropper = new Cropper(image, { initialAspectRatio: 16 / 9 });

2、如何处理跨域图片问题？

确保在初始化Cropper实例时，设置checkCrossOrigin为true，这样Cropper会处理跨域图片的问题：

   const cropper = new Cropper(image, { checkCrossOrigin: true });

3、如何在用户双击时切换拖动模式？

可以通过设置toggleDragModeOnDblclick选项来实现：

   const cropper = new Cropper(image, { toggleDragModeOnDblclick: true });

当用户双击图片时，会在move和crop模式之间切换。

Cropper.js是一款功能强大且易于使用的JavaScript图片裁剪工具，适用于各种前端开发需求，通过灵活的配置选项和丰富的API接口，开发者可以轻松实现图片裁剪功能，提升用户体验。