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

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

Cropper.js 的基本使用方法

1、引入 Cropper.js

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

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

JavaScript

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

2、HTML结构

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

Markup

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

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

CSS

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

3、实例化 Cropper

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

JavaScript

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

4、获取裁切后的图片

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

JavaScript

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

5、示例代码

完整示例如下：

Markup

 <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 的配置选项

Cropper.js 的事件与回调函数

常见问题解答（FAQ）

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

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

JavaScript

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

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

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

JavaScript

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

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

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

JavaScript

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

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

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