记录一次js图片压缩思路

利用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参数去满足接口大小限制。

调用

  .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)
      }
    })
  }