主要借助FileReader读取文件、canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩。
<template>
<div>
<input type="file" @change="fun" />
<div style="display: flex">
<div>
<h4>原始图片</h4>
<img
:src="origin"
style="width: 300px; height: 300px; margin-right: 10px"
/>
</div>
<div>
<h4>压缩图片</h4>
<img :src="compress" style="width: 300px; height: 300px" />
</div>
</div>
</div>
</template>
data(){
return {
origin:"",
compress:""
}
},
methods: {
// 图片压缩
compress_img(imgBase64, quality, mimeType) {
let [canvas, img] = [
document.createElement("canvas"),
document.createElement("img"),
];
img.src = imgBase64;
img.onload = () => {
// canvas 宽高
canvas.width = 300;
canvas.height = 300;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300); // 从左上角开始绘制,宽高均为400,可自行修改
// 将canvas对象转换为base64位编码
const newImgBase64 = canvas.toDataURL(mimeType, quality / 100); // 参数:type,文件类型 encoderOptions,取值0~1,可用表示图片的质量
// console.log('压缩后的图片:',newImgBase64) // 压缩后的图片base64
this.compress = newImgBase64;
};
},
fun (e) {
// console.log(e.target.files[0]);
const read = new FileReader();
read.onload = () => {
// read.result 读取原始图片base64
this.origin = read.result;
// console.log('原始图片: ',read.result)
this.compress_img(read.result, 20, "image/jpeg");
};
read.readAsDataURL(e.target.files[0]);
},
}
从上图,可以看出图片质量被压缩之后,变得非常模糊,文件的大小也会变小。
【FileReader、Canvas.toDataURL,实现前端图片压缩】 https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2