1.安装
yarn add image-compressor.js / npm i image-compressor.js
2.引入
import ImageCompressor from “image-compressor.js”
3.使用
语法：new ImageCompressor(file, [options])
<input type="file" id="file" accept="image*" />
document.getElementById("file").addEventListener("change", (e)=>{
const file=e.target.files[0];
if(!file){
return
}
new ImageCompressor(file, {
quality:0.8 //压缩质量
checkOrientation:false ;//指示是否读取图像的Exif方向值(仅为JPEG图像)，然后使用该值自动旋转或翻转图像。默认true
success(result) {
const formData = new FormData();
formData.append('file', result, result.name);//压缩后的文件会自动转换成二进制文件流类型
//这里可以发ajax，上传图片
},
error(e) {
console.log(e.message);
},
以上是image-compressor.js的基础用法
image-compressor.js还可以结合promise使用，注意因为压缩图片是异步，必须转成同步才能拿到压缩的结果，可以使用async和await
compressImage(file) {
return new Promise((resolve, reject) => {
new ImageCompressor(file.file, {
quality: 0.6,
checkOrientation: false,
success(result) {
resolve(result);
},
error(e) {
reject();
}
});
});
},
async uploadImage(file){
// 获取压缩后的文件流
let compreeBolb = await this.compressImage(file);
const formData = new FormData();
formData.append('file', compreeBolb, compreeBolb.name);//压缩后的文件会自动转换成二进制文件流类型
//这里可以发ajax，上传图片
}
通过以上操作，图片压缩和上传就成功了，但是！！！！重点来了，使用IOS拍照上传图片，你会发现，有的IOS上传图片正常，有的IOS上传的图片被旋转了，这是什么原因呢？这里有一个超级大的坑，经过大量的IOS机型测试后，发现IOS版本不同，设置checkOrientation: false表现不同，通过navigator.userAgent获得以下信息：
当iPhone OS 11_0 >=13的版本时，设置checkOrientation: false；反之设置checkOrientation: true
这就解决了不同IOS图片旋转问题，最后的解决方案很简单，但找出这个方案花了2天时间，希望能帮到大家~