JS—圖片壓縮上傳(單張)
阿新 • • 發佈:2018-12-20
eight ascii value size set tsa ade ready chan
*vue+webpack環境,這裏的that指到vue實例
<input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" />
一、圖片壓縮
/* file:文件(類型是圖片格式), obj:文件壓縮後對象width, height, quality(0-1) callback:容器或者回調函數 */ photoCompress(file,obj,callback){ let that=this; let ready=new FileReader(); /*開始讀取指定File對象中的內容. 讀取操作完成時,返回一個URL格式的字符串.*/ ready.readAsDataURL(file); ready.onload=function(){ let re=this.result; that.canvasDataURL(re,obj,callback) //開始壓縮 } },
/*利用canvas數據化圖片進行壓縮*/ /*圖片轉base64*/ canvasDataURL(path, obj, callback){ let img = new Image(); img.src = path; img.onload = function(){ let that = this; //指到img // 默認按比例壓縮 let w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); let quality = 0.7; // 默認圖片質量為0.7 //生成canvas let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); // 創建屬性節點 let anw = document.createAttribute("width"); anw.nodeValue = w; let anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 圖像質量 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小,所繪制出的圖像越模糊 let base64 = canvas.toDataURL('image/jpeg', quality); // 回調函數返回base64的值 callback(base64); } },
二、base64轉文件
這裏後臺接口不支持base64,根據實際接口情況使用
/*這裏轉blob*/ base64UrlToBlob(urlData){ let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], // 去掉url的頭,並轉化為byte bstr = atob(arr[1]), // 處理異常,將ascii碼小於0的轉換為大於0 n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); //轉file //return new File([u8arr], filename, {type:mime}); },
三、上傳圖片
selectImgs(e) { //選擇文件後執行
let that=this
let fileObj=e.target.files[0] //獲取file
//console.log(fileObj)
var form = new FormData(); // 創建FormData 對象
if(fileObj.size/1024 > 1025) { //文件大於1M(根據需求更改),進行壓縮上傳
that.photoCompress(fileObj, { //調用壓縮圖片方法
quality: 0.2
}, function(base64Codes){
//console.log("壓縮後:" + base.length / 1024 + " " + base);
let bl = that.base64UrlToBlob(base64Codes);
//console.log(bl)
form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件對象
that.imgRequest(form); //請求圖片上傳接口
});
}else{ //小於等於1M 原圖上傳
form.append("file", fileObj); // 文件對象
that.imgRequest(form); //請求圖片上傳接口
}
},
/*圖片上傳接口*/
imgRequest(param){
PostSaveImg( //封裝的ajax(axios)方法
param
).then(data => {
if (data.status === 200 || data.status === 304){
let item={
path:this.imgpath+data.data[0].path,
}
let jsonitem={
jlid:this.jlid,
path:data.data[0].path,
xxdm:this.xxdm,
}
this.imglistJson.push(jsonitem)
this.imglist.push(item)
}else{
Toast({ //封裝的提示方法
message: '圖片上傳失敗',
position: 'middle',
duration: 2000
})
}
})
/*原生請求*/
// const xhr = new XMLHttpRequest()
// xhr.open('POST', HOSTMOBILE+'api/mobile/xcjg/sctp', true) //接口地址
// xhr.send(param)
// xhr.onload = () => {
// if (xhr.status === 200 || xhr.status === 304) {
// let datas = JSON.parse(xhr.responseText)
// console.log('response: ', datas)
// } else {
// alert(`${xhr.status} 請求錯誤!`)
// }
// }
},
其他
element ui 圖片上傳組件(不包含壓縮)
來源:https://segmentfault.com/a/1190000015987551
JS—圖片壓縮上傳(單張)