OSS方式、canvas方式图片压缩（宽高、质量百分比）、EXIF图片数据解析（旋转角、数据）

• 利用FileReader、Canvas对图片进行压缩：注意这里的压缩指的是宽高压缩还有质量的百分比压缩，而不是压缩到指定的多少k（但是观察oss的压缩我发现，当使用Q_10时，图片总是在500K以下）
• 利用EXIF对图片进行解析，以获取图片的旋转角度、大小等各类数据

1、OSS方式质量/大小压缩与解析

质量压缩不改变大小：
图片url后面拼接 ?x-oss-process=image/quality,Q_10
因为这种方式只支持jpg、jpeg、webp所以需要判断一下
我这里压缩到Q_10指的是图片的百分之10
但是据我观察这里压缩的图片都在500k以下，10M的图片也到了500K以下，这点不知道是不是凑巧但是这恰巧满足了很多的需求

// jpg格式缩略图url
thumbnailUrl: url.includes('.jpg') || url.includes('.jpeg') ? url+ '?x-oss-process=image/quality,Q_10' : url, 

图片宽高的缩放：

url+'?x-oss-process=image/resize,m_lfit,h_100,w_100', // 后边参数用逗号隔开，lift等比缩放,h高,w宽

推荐一篇文章也有更清晰的解释 https://blog.youkuaiyun.com/pk142536/article/details/99695234

2、canvas图片解析压缩

// 解析图片文件
  fileCompress() {
    console.log(this.filesList);
    this.filesList.forEach((ele: any) => { // this.filesList图片文件
      const reader = new FileReader();
      reader.readAsDataURL(ele);
      const img: any = new Image();
      reader.onload = (res) => {
        console.log(res);
        img.src = res.target.result;
        img.onload = (rs: any) => {
          console.log(rs);
          console.log(img.width, img.height);
          console.log(img.naturalWidth, img.naturalHeight);
          // canvas
          this.createCanvas(img, 500); // 500图片宽高大小
        };
      };
    });
  }

  // 生成画布
  createCanvas(img: any, max: number) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // const base64 = this.compressImage(canvas, context, img, img.width, img.height, max);
	// 对图片大小有具体要求打开下面
  	let width = img.naturalWidth || 400;
    let height = img.naturalHeight || 400;
    const ratio = width / height;
    if (width > max) {
      width = max;
      height = width / ratio;
    }
    canvas.width = width;
    canvas.height = height;
    img.onload = () => {
      const base64 = this.compressImage(canvas, context, img, width, height, max);
      console.log(base64);  // 这里的base64就是压缩后的图片
    };
  }

  // 压缩
  compressImage(canvas: any, ctx: any, img: any, width: number, height: number, max: number) {
    ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
    const quality = width > max ? 0.5 : width > 600 ? 0.6 : 1;
    const quality =  0.5; // 质量系数
    const newImageData = canvas.toDataURL('image/png', quality);
    this.downloadImage(newImageData);
    return newImageData;
  }

  // 下载-利用模拟点击下载
  downloadImage(file: any) {
    const link = document.createElement('a');
    link.href = file;
    link.download = 'img.png';
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

3、EXIF的引入

官方详解：http://code.ciaoca.com/javascript/exif-js/

安装：
npm install exif-js --save
导入：
import * as EXIF from 'exif-js';
使用：
  // 图片解析
  fileRotate(file: any) {
    const bbb = EXIF.getData(file, () => {
      console.log(EXIF.getTag(file, 'Orientation')); //　图片旋转信息
      console.log(EXIF.getAllTags(file));　// 所有图片信息
    });
  }