今天做項目遇到了這樣一個需求：對于要上傳的圖片進行裁剪，于是發現了一個好的工具----vue-cropper

首先下載vue-cropper

npm install vue-cropper

引入vue-cropper

import { VueCropper } from 'vue-cropper' export default {components: {VueCropper},}

封裝成組件uploadPattern.vue

<template><div class="app-container"><el-dialog :title="dialogTitle" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"><div class="cropper-content"><div class="cropper-box"><div class="cropper"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"></vue-cropper></div><!-- 底部操作工具按鈕 --><div class="footer-btn"><div class="scope-btn"><label class="btn" for="uploads">選擇圖片</label><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)"><el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button><el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">縮小</el-button><el-button size="mini" type="danger" plain @click="rotateLeft">? 左旋轉</el-button><el-button size="mini" type="danger" plain @click="rotateRight">? 右旋轉</el-button></div><div class="upload-btn"><el-button size="mini" type="success" @click="uploadImg('blob')">上傳圖片 <i class="el-icon-upload"></i></el-button></div></div></div><!--預覽效果圖--><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div></div></el-dialog></div> </template> <script> // 這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等） import { VueCropper } from 'vue-cropper' export default {components: {VueCropper},props:{showModal:Boolean,//標題title:{type:String,default:''}},// 定義屬性data() {return {dialogTitle:'',open:false,//上傳標簽圖片對話框// 是否顯示croppervisible: false,options: {img: '', //裁剪圖片的地址autoCrop: true, // 是否默認生成截圖框autoCropWidth: 200, // 默認生成截圖框寬度autoCropHeight: 200, // 默認生成截圖框高度fixedBox: true // 固定截圖框大小 不允許改變},previews:{} //預覽圖片}},watch:{showModal(newVal){this.open=newVal;this.dialogTitle=this.title;}},// 方法集合methods: {//實時預覽函數realTime(data){this.previews=data;},//打開彈窗層結束時的回調modalOpened(){this.visible=true;},//選擇圖片selectImg(e){let file=e.target.files[0];if(!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)){this.msgError("文件格式錯誤，請上傳圖片類型,如：JPG，PNG后綴的文件。");}else{let reader=new FileReader()reader.readAsDataURL(file);reader.onload = (e)=>{this.options.img = reader.result;}}},//放大、縮小圖片changeScale(num){num=num || 1;this.$refs.cropper.changeScale(num);},//左旋轉rotateLeft(){this.$refs.cropper.rotateLeft();},//右旋轉rotateRight(){this.$refs.cropper.rotateRight();},//關閉彈窗closeDialog(){this.$emit('update:showModal',false)},//上傳圖片uploadImg(type){if(type==='blob'){this.$refs.cropper.getCropBlob(data=>{let formData=new FormData();formData.append("file",data);this.$emit('uploadImg',formData);this.closeDialog();})}else{this.msgError('文件服務異常，請聯系管理員')}}} } </script><style lang='scss' scoped> .cropper-content{display: flex;display: -webkit-flex;justify-content: flex-end;.cropper-box{flex: 1;width: 100%;.cropper{width: auto;height: 300px;}}.show-preview{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;.preview{overflow: hidden;border:1px solid #67c23a;background: #cccccc;}} } .footer-btn{margin-top: 30px;display: flex;display: -webkit-flex;justify-content: flex-end;.scope-btn{display: flex;display: -webkit-flex;justify-content: space-between;padding-right: 10px;}.upload-btn{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;}.btn {outline: none;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 0;-webkit-transition: .1s;transition: .1s;font-weight: 500;padding: 8px 15px;font-size: 12px;border-radius: 3px;color: #fff;background-color: #409EFF;border-color: #409EFF;margin-right: 10px;} } </style>

效果圖如下：

放大之后進行裁剪：

最近遇到了這樣一個問題，如果圖片是透明的，那選擇之后就會變成一片黑

解決辦法：加一個屬性 outputType為png,輸出類型為png格式，這樣背景就會是透明的了，如果是jpg格式就會有背景色

:outputType="'png'"

總結

以上是生活随笔為你收集整理的基于Vue的图片裁剪 vue-cropper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。