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

6. 實際應用場景

在我們的"AI生成視頻"項目中，VueCropper 主要用于：

1. 用戶頭像裁剪 ：確保上傳的頭像符合比例要求
2. 圖片預處理 ：在上傳前對圖片進行裁剪優化
3. 質量控制 ：通過配置輸出質量減少圖片體積

7. 問題記錄

問題 如果插件嵌套在彈窗中使用時 拖拽會出現很明顯的卡頓
解決 在彈窗組件上面增加 :lock-scroll="false" 即可解決

8. 總結

VueCropper 是一個功能強大且易于集成的圖片裁剪組件，通過合理的配置和樣式優化，可以很好地滿足項目中的圖片處理需求。在我們的項目中，它為用戶提供了良好的圖片裁剪體驗，同時也為后端處理減輕了壓力。

希望本文對你在Vue項目中使用VueCropper有所幫助！感謝閱讀！