文中的注釋 有助于更好的理解
HTML
<input @change="fileChange($event)" type="file" accept="image/*" > //上傳圖片類型
<div class="add">
<input @change="fileChange($event)" type="file" accept="image/*" >
<div class="add-image">
<div class="add-ico">
<img src="../../../static/info3.png" alt="">
</div>
<img class="add-img" v-show="imgL" :src="imgL" alt="">
</div>
<p class="font13">點(diǎn)擊上傳名片</p>
</div>
Methods
//判斷是否圖片類型
fileChange(el) {
// console.log(el.target.files[0].size)
if (!el.target.files[0].size){
this.$msgbox("請選擇圖片文件")
return
}else{
this.fileList(el.target);
el.target.value = ''
}
},
//判斷是否為文件夾文件
fileList(fileList) {
let files = fileList.files;
//判斷是否為文件夾
if (files.type != '') {
this.fileAdd(files);
} else {
this.$msgbox("請選擇圖片文件")
}
},
fileAdd(file) {
//判斷是否為圖片文件
if (file.type.indexOf('image') == -1) {
this.$msgbox("請選擇圖片文件")
} else {
let reader = new FileReader();
let image = new Image();
let _this = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
image.onload = function(){
let width = image.width;
let height = image.height;
file.width = width;
file.height = height;
_this.imgL = file.src //頁面上顯示所選擇的圖片
};
console.log(file)
image.src= file.src; //頁面上顯示所選擇的圖片
if(file.size/1024 > 1025){ //判斷圖片的大小，超過1M 進(jìn)行壓縮
_this.imgCompress(file,{quality: 0.2})
}else{
_this.partitionBase = file.src.split(",")[1] //這里是因?yàn)楹笈_需要 base64和圖片type類型兩個數(shù)據(jù)，所以進(jìn)行了處理
_this.imgType ="."+file.type.split("/")[1]
}
}
}
},
//圖片壓縮
imgCompress(path,obj){ //path是指上傳的圖片，obj是壓縮的品質(zhì)，越低越模糊
let _this = this //這里的this 是把vue的實(shí)例對象指向改變?yōu)開this
var img = new Image();
img.src = path.src;
img.onload = function(){
var that = this; //這里的this 是把img的對象指向改變?yōu)閠hat
// 默認(rèn)按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默認(rèn)圖片質(zhì)量為0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創(chuàng)建屬性節(jié)點(diǎn)
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 圖像質(zhì)量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所繪制出的圖像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回調(diào)函數(shù)返回base64的值
var urlFile = _this.convertBase64UrlToBlob(base64) //這個地方的處理是為了把壓縮的base64轉(zhuǎn)化為對象，獲得壓縮后圖片的大小size，方便對壓縮后的圖片再次進(jìn)行判斷；
console.log(urlFile)
if(urlFile.size/1024 > 1025){
_this.$msgbox("圖片過大，請重新上傳圖片")
}else{
_this.partitionBase = base64.split(",")[1]
_this.imgType ="."+urlFile.type.split("/")[1]
}
}
},
//將base64碼轉(zhuǎn)化為file（Blob）
//此處函數(shù)對壓縮后的base64經(jīng)過處理返回{size: "", type: ""}
convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
},
至此，圖片就壓縮完成了
經(jīng)測試，2M的圖片，壓縮后的大小為20多K。（圖片沒什么花里胡哨的東西）
