Canvas实现图片压缩上传

接到产品需求，问能不能将前端上传的图片压缩？像移动端上传图片，一般都是超清、高清图片，大小也有10M，甚至一张图片大小有15M左右，这样大的图片上传到腾讯云或者阿里云（没使用服务器上传图片）一方面上传速度慢，影响体验，另一方面体积太大占空间，图片压缩避免了，网上搜到了很多这方面介绍的网址，大多数都是用canvas来实现（不说了，马上开干）！。

实现过程 (10M 压缩至 200k左右)

1. 图片裁剪

大体的思路是将图片抽样显示在canvas上，然后用通过canvas.toDataURL方法得到base64字符串来实现压缩。上代码！！！

    const file: {
   } = e.target.files[0]; // 通过input元素触发的change事件
    const reader = new FileReader(),
    img = new Image();
    // 缩放图片需要的canvas
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    reader.readAsDataURL(file);
    // base64地址图片加载完毕后
    img.onload = function () {
   
      // 图片原始尺寸
      const originWidth = this['width'];
      const originHeight = this['height'];
      // 最大尺寸限制
      const maxWidth = 750, maxHeight =