vue-cropper官網(wǎng)
https://github.com/xyxiao001/vue-cropper
需求：上傳圖片之前闽瓢，按照一定比例進(jìn)行剪裁配喳，剪裁后上傳到服務(wù)器
image.png
安裝
npm install vue-cropper
使用
main.js里面
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
組件內(nèi)
- 1、上傳按鈕
<!-- element 上傳圖片按鈕 -->
<el-upload class="upload-demo" action="" drag
:auto-upload="false" :show-file-list="false" :on-change='changeUpload'>
<i class="el-icon-upload"></i>
<div class="el-upload__text">點(diǎn)擊上傳</div>
<div class="el-upload__tip">支持絕大多數(shù)圖片格式鲫剿，單張圖片最大支持5MB</div>
</el-upload>?
image.png
使用element-ui的上傳按鈕挂捅，要配置:auto-upload="false"（不要自動(dòng)上傳）帘撰， :on-change='changeUpload'（選擇完圖片后的方法），一會(huì)兒再交代changeUpload方法
- 2徒坡、設(shè)置一個(gè)彈出層撕氧，放剪裁圖片的cropper
<!-- vueCropper 剪裁圖片實(shí)現(xiàn)-->
<el-dialog title="圖片剪裁" :visible.sync="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
: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"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish" :loading="loading">確認(rèn)</el-button>
</div>
</el-dialog>
- 3、剪裁框的樣式
// 截圖
.cropper-content {
.cropper {
width: auto;
height: 300px;
}
}
- 4崭参、方法
option是剪裁插件的屬性配置呵曹，具體更多含義查看官網(wǎng)介紹
<script>
import { client } from '@/utils/alioss'
export default {
data() {
return {
dialogVisible: false,
// 裁剪組件的基礎(chǔ)配置option
option: {
img: '', // 裁剪圖片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
outputType: 'jpeg', // 裁剪生成圖片的格式
canScale: false, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否默認(rèn)生成截圖框
// autoCropWidth: 300, // 默認(rèn)生成截圖框?qū)挾? // autoCropHeight: 200, // 默認(rèn)生成截圖框高度
fixedBox: true, // 固定截圖框大小 不允許改變
fixed: true, // 是否開(kāi)啟截圖框?qū)捀吖潭ū壤? fixedNumber: [7, 5], // 截圖框的寬高比例
full: true, // 是否輸出原圖比例的截圖
canMoveBox: false, // 截圖框能否拖動(dòng)
original: false, // 上傳圖片按照原始比例渲染
centerBox: false, // 截圖框是否被限制在圖片里面
infoTrue: true // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀? },
picsList: [], //頁(yè)面顯示的數(shù)組
// 防止重復(fù)提交
loading: false
}
},
methods: {
// 上傳按鈕 限制圖片大小
changeUpload(file, fileList) {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上傳文件大小不能超過(guò) 5MB!')
return false
}
this.fileinfo = file
// 上傳成功后將圖片地址賦值給裁剪框顯示圖片
this.$nextTick(() => {
this.option.img = file.url
this.dialogVisible = true
})
},
// 點(diǎn)擊裁剪，這一步是可以拿到處理后的地址
finish() {
this.$refs.cropper.getCropBlob((data) => {
var fileName = 'goods' + this.fileinfo.uid
this.loading = true
//上傳阿里云服務(wù)器
client().put(fileName, data).then(result => {
this.dialogVisible = false
this.picsList.push(result.url)
}).catch(err => {
console.log(err)
this.loading = false
})
})
}
}
}
</script>
