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

Logo

前往低代码交流专区

更多推荐