vue實現圖片裁剪後上傳
阿新 • • 發佈：2020-12-19
本文例項為大家分享了vue實現圖片裁剪後上傳的具體程式碼，供大家參考，具體內容如下
一、背景
目前負責的系統（商城後臺管理系統）裡面有這麼一個需求，為了配合前臺的展示，上傳的商品圖片比較必須是1:1的正方形。（其它地方有時會有5:4或者16:9的需求，但較少）。所以需要對上傳的圖片先進行裁剪，並且按要求只能裁剪為1:1，然後在進行上傳。
當然，為了相容系統其它地方有5:4或者16:9的圖片比例需求，需要給出一個引數，可以隨時控制圖片裁剪的比例。
二、使用什麼外掛實現
使用 vue-cropper 顯示，該外掛是基於 cropper 的二次封裝，簡單小巧，更合適vue專案。注意：功能沒有 cropper 強大。
三、使用 cropper
3.1 封裝一下cropper， 配置自己想要的引數
<template>
<div class="Cropper">
<el-dialog
:visible.sync="dialogVisible"
width="740px"
title="圖片裁剪"
:before-close="handleClose"
:close-on-click-modal="false">
<div
class="cropper-container">
<div class="cropper-el">
<vue-cropper
ref="cropper"
:img="cropperImg"
:output-size="option.size"
:output-type="option.outputType"
:info="true"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:fixed-box="option.fixedBox"
:auto-crop="option.autoCrop"
:auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropHeight"
:center-box="option.centerBox"
:high="option.high"
:info-true="option.infoTrue"
@realTime="realTime"
:enlarge="option.enlarge"
:fixed="option.fixed"
:fixed-number="option.fixedNumber"
:limitMinSize="option.limitMinSize"
/>
</div>
<!-- 預覽 ==>> 我不需要預覽 -->
<!-- <div class="prive-el">
<strong>預覽：</strong>
<div class="prive-style" :style="{'width': '200px','height': '200px','overflow': 'hidden','margin': '10px 25px','display':'flex','align-items' : 'center'}">
<div class="prive-style" :style="{'width': previews.w + 'px','height': previews.h + 'px','align-items' : 'center'}">
<div class="preview" :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<el-button @click="uploadBth">重新上傳</el-button>
</div> -->
</div>
<span
slot="footer"
class="dialog-footer">
<el-button @click="uploadBth">重新上傳</el-button>
<el-button
@click="handleClose">取 消</el-button>
<el-button
type="primary"
@click="saveImg">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper';
export default {
name: 'Cropper',components: {
VueCropper
},props: {
dialogVisible: {
type: Boolean,default: false
},imgType: {
type: String,default: 'blob'
},cropperImg: {
type: String,default: ''
},zoomScale: { // 裁剪比例，預設1:1
type: Array,default: [1,1]
}
},data () {
return {
previews: {},option: {
img: '',// 裁剪圖片的地址
size: 1,// 裁剪生成圖片的質量
outputType: 'png',// 裁剪生成圖片的格式 預設jpg
canMove: false,// 上傳圖片是否可以移動
fixedBox: false,// 固定截圖框大小 不允許改變
canMoveBox: true,// 截圖框能否拖動
autoCrop: true,// 是否預設生成截圖框
// 只有自動截圖開啟 寬度高度才生效
autoCropWidth: 500,// 預設生成截圖框寬度
autoCropHeight: 500,// 預設生成截圖框高度
centerBox: true,// 截圖框是否被限制在圖片裡面
high: false,// 是否按照裝置的dpr 輸出等比例圖片
enlarge: 1,// 圖片根據截圖框輸出比例倍數
mode: 'contain',// 圖片預設渲染方式
maxImgSize: 2000,// 限制圖片最大寬度和高度
// limitMinSize: [500,500],// 更新裁剪框最小屬性
limitMinSize: 500,// 更新裁剪框最小屬性
infoTrue: true,// true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
fixed: true,// 是否開啟截圖框寬高固定比例 (預設:true)
// fixedNumber: [1,1] // 截圖框的寬高比例 ==>> 這個引數目前沒有作用（作者解釋的）
fixedNumber: this.zoomScale // 截圖框的寬高比例
},};
},methods: {
// 裁剪時觸發的方法，用於實時預覽
realTime (data) {
this.previews = data;
},// 重新上傳
uploadBth () {
this.$emit('update-cropper');
},// 取消關閉彈框
handleClose () {
this.$emit('colse-dialog',false);
},// 獲取裁剪之後的圖片，預設blob，也可以獲取base64的圖片
saveImg () {
if (this.imgType === 'blob') {
this.$refs.cropper.getCropBlob(data => {
this.$emit('upload-img',data);
});
} else {
this.$refs.cropper.getCropData(data => {
this.uploadFile = data;
this.$emit('upload-img',data);
});
}
}
}
};
</script>
<style lang="scss" scoped>
.Cropper {
.cropper-el {
height: 700px;
width: 700px;
flex-shrink: 0;
}
.cropper-container {
display: flex;
justify-content: space-between;
.prive-el {
flex: 1;
align-self: center;
text-align: center;
.prive-style {
margin: 0 auto;
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
overflow: hidden;
background: #ededed;
margin-left: 40px;
}
.preview {
overflow: hidden;
}
.el-button {
margin-top: 20px;
}
}
}
}
</style>
<style lang="scss">
.cropper-box-canvas img{
width: 100% !important;
height: 100% !important;
}
</style>3.2 將 el-upload 和 cropper 組合，封裝，其他地方可以直接呼叫
<template>
<div>
<!-- 注意：必須關閉自動上傳屬性 auto-upload -->
<el-upload
:http-request="Upload"
:multiple="true"
list-type="picture-card"
:file-list="productImageList"
:on-remove="removeImage"
:limit="12"
:before-upload="beforeAvatarUpload"
ref="fileUpload"
:auto-upload="false"
:on-change="selectChange"
action=""
class="cropper-upload-box"
>
<i slot="default" class="el-icon-plus"></i>
</el-upload>
<cropper
v-if="showCropper"
:dialog-visible="showCropper"
:cropper-img="cropperImg"
:zoomScale="zoomScale"
@update-cropper="updateCropper"
@colse-dialog="closeDialog"
@upload-img="uploadImg"
/>
</div>
</template>
<script>
import Cropper from "@/components/cropper";
import { client,randomWord } from '@/utils/alioss'
export default {
name: "CropperUpload",data() {
return {
productImageList: [],showCropper: false,// 是否顯示裁剪框
cropperImg: "" // 需要裁剪的圖片
};
},props: {
defaultImgList: { // 預設顯示的圖片列表
type: Array,default: () => []
},zoomScale: { // 裁剪比例，預設1:1
type: Array,components: {
Cropper
},watch: {
defaultImgList: {
handler: function(newVal,oldVal){
this.productImageList = newVal // 賦值
},deep: true
}
},methods: {
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2; // 原圖片
// const isLt2M = this.uploadFile.size / 1024 / 1024 < 1; //裁剪後的圖片（會比原圖片大很多，應該是轉成Blob的原因導致）
if (!isLt2M) {
this.$message.error("上傳圖片大小不能超過 2MB!");
this.noCanUpload = true // 如果這裡被攔截，將自動刪除不能上傳的圖片
return false
}
// return isLt2M
},removeImage(file,fileList) {
const index = this.productImageList.findIndex(item => {
return item.uid == file.uid;
});
if (index > -1) {
this.productImageList.splice(index,1);
}
this.$emit('getUploadImg',this.productImageList) // 把最新上傳的圖片列表返回
},Upload(file) {
var fileName = `img/${randomWord(
true,20
)}${+new Date()}${file.file.name.substr(file.file.name.indexOf("."))}`;
// client().put(fileName,file.file).then(result => {
client()
.put(fileName,this.uploadFile)
.then(result => {
// 上傳裁剪後的圖片
console.log(result);
this.productImageList.push({
url: result.url,uid: file.file.uid,saveUrl: "/" + result.name
});
this.showCropper = false;
this.$emit('getUploadImg',this.productImageList) // 把最新上傳的圖片列表返回
})
.catch(err => {
this.showCropper = false;
console.log(err);
});
},// 更新圖片
updateCropper() {
if(!this.noCanUpload){
let fileList = this.$refs.fileUpload.uploadFiles // 獲取檔案列表
let index02 = fileList.findIndex(item => { // 把取消裁剪的圖片刪除
return item.uid == this.currentFile.uid;
});
fileList.splice(index02,1)
}
let index = this.$refs.fileUpload.$children.length - 1;
this.$refs.fileUpload.$children[index].$el.click();
},// 關閉視窗
closeDialog() {
this.showCropper = false;
if(!this.noCanUpload){
let fileList = this.$refs.fileUpload.uploadFiles // 獲取檔案列表
let index = fileList.findIndex(item => { // 把取消裁剪的圖片刪除
return item.uid == this.currentFile.uid;
});
fileList.splice(index,1)
}
},// 上傳圖片
uploadImg(file) {
this.uploadFile = file;
// this.$refs.fileUpload.submit();
// 判斷裁剪後圖片的寬高
let img = new Image()
img.src = window.URL.createObjectURL(file); // Blob轉成url 才能給img顯示
img.onload = () => {
let minProp = Math.min(img.width,img.height) //裁剪後的圖片寬，高 ==> 取最小值
if( minProp < 500){ // 如果最小值比設定的最小值（預設為500）小
this.$message.error(`請保證圖片短邊最小為500`);
return false
}
this.$refs.fileUpload.submit();
}
},selectChange(file) {
this.noCanUpload = false
let files = file.raw;
var reader = new FileReader();
reader.onload = e => {
let data;
if (typeof e.target.result === "object") {
// 把Array Buffer轉化為blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data = e.target.result;
}
this.cropperImg = data;
// 圖片圖片尺寸，如果是正方形，則直接上傳；否則呼叫裁剪
let img = new Image()
img.src = this.cropperImg;
img.onload = () => {
if(img.width == img.height){ // 本來就是正方形 => 直接上傳
this.uploadFile = files;
this.$refs.fileUpload.submit(); // 呼叫上傳方法
}else{
this.showCropper = true; // 不是正方形的圖片才開啟裁剪
this.currentFile = file // 儲存當前操作裁剪的圖片
}
}
};
// 轉化為base64
// reader.readAsDataURL(file)
// 轉化為blob
reader.readAsArrayBuffer(files);
// this.showCropper = true; // 預設開啟裁剪
}
}
};
</script>
<style lang="scss">
.cropper-upload-box{
display: flex;
.el-upload{
width: 148px;
height: 148px;
}
}
</style>3.3 其他頁面中呼叫裁剪元件
<!-- zoomScale：定義的裁剪比例； defaultImgList： 預設顯示的圖片列表 @getUploadImg：這個事件將得到更新後（上傳、刪除）的圖片列表，在頁面中重新賦值給預設的列表變數後就可以做頁面中的邏輯處理了 --> <cropper-upload :zoomScale='[1,1]' :defaultImgList="productImageList" @getUploadImg="getUploadImg"></cropper-upload>
自此，圖片裁剪功能實現！！！
3.4 看一下頁面中的效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。