利用 canvas 进行图片压缩

思路：创立一个 canvas，将图片绘制在画布上，
通过设置 canvas 的宽度和品质，去调整图片大小

将 file 转化为 base64

这一步是为了创立一个 image，在 image 中获取宽高比

  // 将 file 转化为 base64
  function changeFileToBaseURL(file, fn) {var flieReader = new FileReader()
    if(file == undefined) return fn(null)
    flieReader.readAsDataURL(file);
    flieReader.onload = function() {
      var imgBase64Data = this.result;
      fn(imgBase64Data)
    }
  }

将 base64 转换为 file

在 canvas 实现图片压缩之后，以 base64 格局导出
这个时候能够将 base64 转换为 file 不便回调函数操作

  // 将 base64 转换为 file
  function dataURLToFile(dataUrl, fileName) {var arr = dataUrl.split(','), 
        mine = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n--) {u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], fileName, {type: mine})
  }

压缩图片的办法

  /**
  * canvas 压缩图片
  * @param {参数 obj} param 
  * @param {文件二进制流} param.file 必传
  * @param {指标压缩大小} param.targetSize 不传初始赋值 -1
  * @param {输入图片宽度} param.width 不传初始赋值 -1，等比缩放不必传高度
  * @param {输入图片名称} param.fileName 不传初始赋值 image
  * @param {压缩图片水平} param.quality 不传初始赋值 0.92。值范畴 0~1
  * @param {回调函数} param.succ(file, base64) 必传
  */
  function imgCompress(param) {if(!(param && param.succ)) return
    if(param.file == undefined) return
    // param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1
    param.width = param.hasOwnProperty("width") ? param.width : -1
    param.fileName = param.hasOwnProperty("fileName") ? param.fileName : 'image'
    param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92
    var fileType = param.file.type
    if(fileType.indexOf('image') == -1) {console.log("请抉择图片文件")
    }
    changeFileToBaseURL(param.file, function(base64) {if(base64) {var image = new Image();
        image.src = base64
        image.onload = function() {
          // 图片的原始宽高比
          var scale = this.width / this.height
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
          canvas.width = param.width == -1 ? this.width : param.width
          canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale)
          context.drawImage(image, 0, 0, canvas.width, canvas.height)
          // 将 canvas 转换为 base64 和 file 格局，作为回调参数
          var newImageData = canvas.toDataURL(fileType, param.quality);
          var resultFile = dataURLToFile(newImageData, param.fileName);
          param.succ(resultFile, newImageData)
        }
      }
    })
  }

结语

这里尽管有 targetSize 的参数，然而这个参数并没有应用上，
起因是如果想要准确地将图片大小转换在某个数以下的话，须要用到递归去解决宽度，
这会对性能造成肯定累赘。我没有想到更好的办法 …
能够通过调整 width 和 quality 参数去满足接口大小限度。

调用

  <div class="preview-box">
    <img src=""alt="">
    <p class="size"></p>
  </div>
  <input type="file" id="uploadBtn">

  .preview-box{
    width: 300px;
    min-height: 300px;
  }
  img{width: 300px;}

  var ipt = document.querySelector('#uploadBtn')
  var previewEl = document.querySelector('.preview-box img')
  var sizeEl = document.querySelector('.size')
  ipt.onchange = function() {
    imgCompress({file: this.files[0],
      targetSize: 1024 * 1024 * 1,
      width: 900,
      // quality: 1, 
      fileName: 'imgCompress',
      succ: function(file, base64) {previewEl.setAttribute('src', base64)
        sizeEl.innerHTML = file.size / 1024 / 1024 + 'M'
        console.log(file)
      }
    })
  }