VueCropper 图片裁剪组件在Vue项目中的实践应用

1. 组件介绍

VueCropper 是一个基于 Vue.js 的图片裁剪组件，它提供了丰富的图片裁剪功能，包括：

图片缩放、旋转、移动
固定比例裁剪
高质量图片输出
多种裁剪模式选择

2. 安装与引入

首先需要安装 vue-cropper 依赖：

npm install vue-cropper --save

然后在 Vue 组件中引入：

import { VueCropper } from "vue-cropper";

3. 基本使用

3.1 组件注册

components: {VueCropper,
},

3.2 模板中使用

<vue-cropper ref="cropper":img="cropImg":outputSize="option.outputSize":outputType="option.outputType":info="option.info":full="option.full":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox":high="option.high":mode="option.mode">
</vue-cropper>

4. 配置选项详解

在我们的项目中，使用了以下配置：

cropImg:"https://xxx.xxx.com/174539931549590675.png", // 这是需要裁剪的图片的地址
option: {outputSize: 0.8, // 裁剪生成图片的质量info: false, // 裁剪框的大小信息outputType: 'jpeg', // 裁剪生成图片的格式canScale: true, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度high: true, // 是否按照设备的dpr 输出等比例图片fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [1, 1], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高mode: '100% auto' // 图片默认渲染方式
}

5. 核心功能实现

5.1 确认裁剪

    confirmCrop() {this.$refs.cropper.getCropData(async (data) => {// 将 base64 转换为文件// 更新裁剪后的图片this.cropImg = data;const file = this.dataURLtoFile(data, "cropped.jpg");// 更新上传框的图片this.fileList = [{file: file,content: data}];// 上传处理await this.uploadBase64({ file: file });this.showCropper = false;});},

5.2 Base64转文件

dataURLtoFile(dataurl, filename) {const arr = dataurl.split(",");const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });
},// 上传Base64数据async uploadBase64(file) {this.$toast.loading({message: '上传中...',forbidClick: true,duration: 0});try {const formData = new FormData();formData.append("file", file.file);const res = await axios.post(global.SERVER_URL + "/base/common/file/upload",formData,{headers: {"Content-Type": "multipart/form-data",},});console.log(res.data.data);} catch (error) {this.$toast("上传失败，请重试");console.error(error);}},