這篇文章帶給大家的內容是關於js如何實現一張圖片的壓縮與上傳（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
*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数据化图片进行压缩*/
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，依照實際介面狀況使用
/*这里转为blob*/
convertBase64UrlToBlob(urlData){
let 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});
}, 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.convertBase64UrlToBlob(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); //请求图片上传接口
}
},相關推薦：
以上是js如何實作一張圖片的壓縮與上傳（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
