图片压缩插件image-compressor.js的使用和解决图片旋转问题(vue)

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天时间，希望能帮到大家~