利用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)      }    })  }