前端压缩图片的方法主要借助于canvas的toBlob和toDataURL这两个方法。
共同点
这两种方法的大致流程都是将图片先绘制到canvas元素中，然后才能进行压缩处理，并且这两种方式都只能将图片压缩成webp或者jepg格式的图片。
区别
这两种方法的区别就是他们将绘制的图形处理成图片的过程不一样。toBlob是直接将canvas中绘制的图形转换成Blob实例对象，再将Blob实例对象转成File实例对象即可。而toDataURL则是将canvas中绘制的图形转成base64编码的字符串，然后再将base64编码的字符串转成File的实例对象。
利用toBlob方法压缩图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片压缩-转blob</title>
</head>
<body>
<input type="file" id="input">
<div style="display: flex">
<img src="" alt="原图" id="original_img" style="margin-right: 20px;width: 800px">
<img src="" alt="压缩后的图片" id="compress_img" style="width: 800px">
</div>
</body>
<script>
window.onload=function () {
let input=document.getElementById('input');
let originalImg=document.getElementById('original_img');
let compressImg=document.getElementById('compress_img');
input.addEventListener('change',function (e) {
let file=e.target.files[0];
console.log(file);
imgCompress(file,'image/webp',0.5).then(res=>{
compressImg.src=res.url;
compressImg.onload=function(){
URL.revokeObjectURL(res.url);
}
console.log(res.file);//压缩后的文件对象
}).catch(e=>{
console.log(e);
})
})
//图片压缩方法2
//imgFile：图片原文件,File或Blob实例
//imgType：压缩后的图片的格式，可选image/webp或image/jpeg，其他格式无效
//quality：压缩质量，0~1，仅当imgType为有效值时生效
function imgCompress(imgFile,imgType,quality) {
if(!imgType){
imgType='image/webp';//默认输出webp格式的图片
}
return new Promise((resolve,reject)=>{
let src=URL.createObjectURL(imgFile);
let img=new Image();//创建一个img标签
img.src=src;
img.onload=function () {
try {
originalImg.src=src;
URL.revokeObjectURL(src);//释放内存
let width=this.width;
let height=this.height;
let imgCanvas=document.createElement('canvas');//创建canvas元素
imgCanvas.width=width;
imgCanvas.height=height;
let ctx=imgCanvas.getContext('2d');//2d渲染
ctx.drawImage(this,0,0,width,height);//将图片以原有尺寸绘制到canvas中
//转换成base64并压缩，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略
if(imgType==='image/webp'||imgType==='image/jpeg'){
imgCanvas.toBlob(function (b) {
let compressUrl=URL.createObjectURL(b);//压缩后的文件url
let fileName=imgFile.name.substring(0,imgFile.name.lastIndexOf('.'))+'.'+imgType.split('/')[1];//重构文件名
let file=blobToFile(b,fileName,imgType);//Blob实例转成File实例
resolve({
url:compressUrl,
file:file,
});
imgCanvas=null;//释放内存
},imgType,quality);
} else {
imgCanvas.toBlob(function (b) {
let compressUrl=URL.createObjectURL(b);
let fileName=imgFile.name.substring(0,imgFile.name.lastIndexOf('.'))+'.'+imgType.split('/')[1];
let file=blobToFile(b,fileName,imgType);
resolve({
url:compressUrl,
file:file,
},imgType);
imgCanvas=null;//释放内存
},imgType);
}
}catch (e) {
reject(e);
}
}
})
}
//blob转file
function blobToFile(blob,fileName,type) {
return new window.File([blob], fileName, {type: type});
}
}
</script>
</html>
控制台输出的结果
企业微信截图_20220929175951.png
利用toDataURL压缩图片
对于Blob和File的第一个参数，MDN是这样描述的：
一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片压缩-转base64</title>
</head>
<body>
<input type="file" id="input">
<div style="display: flex">
<img src="" alt="原图" id="original_img" style="margin-right: 20px;width: 800px">
<img src="" alt="压缩后的图片" id="compress_img" style="width: 800px">
</div>
</body>
<script>
window.onload=function () {
let input=document.getElementById('input');
let originalImg=document.getElementById('original_img');
let compressImg=document.getElementById('compress_img');
input.addEventListener('change',function (e) {
let file=e.target.files[0];
console.log(file);
imgCompress(file,'image/webp',0.5).then(res=>{
compressImg.src=res.url;
console.log(res.file);//压缩后的文件对象
}).catch(e=>{
console.log(e);
})
})
//图片压缩方法1
//imgFile：图片原文件,File或Blob实例
//imgType：压缩后的图片的格式，可选image/webp或image/jpeg，其他格式无效
//quality：压缩质量，0~1，仅当imgType为有效值时生效
function imgCompress(imgFile,imgType,quality) {
if(!imgType){
imgType='image/webp';//默认输出webp格式的图片
}
return new Promise((resolve,reject)=>{
let src=URL.createObjectURL(imgFile);
let img=new Image();//创建一个img标签
img.src=src;
img.onload=function () {
try {
originalImg.src=src;
URL.revokeObjectURL(src);//释放内存
let width=this.width;
let height=this.height;
let imgCanvas=document.createElement('canvas');//创建canvas元素
imgCanvas.width=width;
imgCanvas.height=height;
let ctx=imgCanvas.getContext('2d');//2d渲染
ctx.drawImage(this,0,0,width,height);//将图片以原有尺寸绘制到canvas中
let base64;
//转换成base64并压缩，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略
if(imgType==='image/webp'||imgType==='image/jpeg'){
base64=imgCanvas.toDataURL(imgType,quality);
} else {
base64=imgCanvas.toDataURL(imgType);
}
imgCanvas=null;//释放内存
let compressImgFile=base64ToFile(base64,imgFile.name);
resolve({
file:compressImgFile,
url:base64
});
}catch (e) {
reject(e);
}
}
})
}
//base64转file
function base64ToFile(dataurl, filename) {
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],//获取文件类型
bstr = atob(arr[1]),//对经过base-64编码的字符串进行解码
n = bstr.length,
u8arr = new Uint8Array(n);//创建包含length个0元素的无符号整型数组，注意它并不是一个Array实例
console.log(u8arr);
console.log(u8arr instanceof Array);//false
//向u8arr中填充数据，处理成File能够识别的数据（u8arr里包含了ArrayBuffer）
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
console.log(u8arr);
//重构文件名
let translateFileName=filename.substring(0,filename.lastIndexOf('.'))+'.'+mime.split('/')[1];
//与Blob一样，File的第一个参数是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的Array，或者其他类似对象的混合体
//u8arr包含了ArrayBuffer，因此u8arr需要写成[u8arr]转成Array
console.log(u8arr instanceof Array);//false
console.log([u8arr] instanceof Array);//true
return new File([u8arr], translateFileName, {type: mime});
}
//base64转blob
function base64toBlob(dataurl) {
let arr = dataurl.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 });
}
}
</script>
</html>
通过执行以上代码，控制台的输出结果如图
企业微信截图.png
参考文献：
https://developer.mozilla.org/zh-CN/docs/Web/API/File/File
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
https://developer.mozilla.org/zh-CN/docs/Web/API/atob
https://www.jb51.net/article/246673.htm
