图片上传前自动根据exif信息旋转摆正的库blueimp-loa

先占个位置，回头再回来介绍这个宝贝

安装方法
npm i blueimp-load-image

先说一下在用这个插件之前，我都经历了什么。

• 需求：将图片上传到阿里云之前，对图片进行旋转修正，以方便算法部门进行图像识别减少压力

• 插件1： Exif.js

• 插件2： Piexif.js

于是就出现了以下代码：

adjustImgOrientation (file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    let image = new Image()
    reader.onload = function (evt) {
      image.src = evt.target.result
      image.onload = function () {
        let imgWidth = this.width
        let imgHeight = this.height
        const exifAll = Piexif.load(evt.target.result)
        const Orientation = exifAll['0th'][Piexif.ImageIFD.Orientation]
        const UserComment = exifAll['Exif'][Piexif.ExifIFD.UserComment]
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        canvas.width = imgWidth
        canvas.height = imgHeight
        if (Orientation && Orientation !== 1) {
          switch (Orientation) {
            case 6: // 旋转90度
              canvas.width = imgHeight
              canvas.height = imgWidth
              ctx.rotate(Math.PI / 2)
              // (0,-imgHeight) 从旋转原理图那里获得的起始点
              ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight)
              break
            case 3: // 旋转180度
              ctx.rotate(Math.PI)
              ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight)
              break
            case 8: // 旋转-90度
              canvas.width = imgHeight
              canvas.height = imgWidth
              ctx.rotate(3 * Math.PI / 2)
              ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight)
              break
          }
        } else {
          ctx.drawImage(this, 0, 0, imgWidth, imgHeight)
        }
        canvas.toBlob(blob => {
          const reader = new FileReader()
          reader.onload = e => {
            const exif = {}
            exif[Piexif.ExifIFD.UserComment] = UserComment
            const exifObj = { 'Exif': exif }
            const exifStr = Piexif.dump(exifObj)
            const inserted = Piexif.insert(exifStr, e.target.result)
            function dataURItoBlob (dataURI) {
              var byteString
              if (dataURI.split(',')[0].indexOf('base64') >= 0) { byteString = atob(dataURI.split(',')[1]) } else { byteString = unescape(dataURI.split(',')[1]) }
              var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
              var ia = new Uint8Array(byteString.length)
              for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i)
              }
              return new Blob([ia], { type: mimeString })
            }
            const b = dataURItoBlob(inserted)
            console.log('new_exif:', Piexif.load(inserted))
            resolve(b)
          }
          reader.readAsDataURL(blob)
        }, 'image/jpeg')
      }
    }
    reader.readAsDataURL(file)
  })
}

大概意思就是：

• 图片的exif信息里面的旋转角度值进行获取

• 利用canvas进行摆正

• 并修改其exif信息为转正的

后面由于以上代码仅支持jpg, jpeg图片格式的转换，如果上传的图片为png格式则会出现错误并阻塞，在重新调研一番后部门大佬决定让我们试试blueimp-load-image插件。马上代码量就下去了，尽管官方文档里面没有对图片的格式进行转换，但是我们可以直接利用canvas.toBlob方法进行格式的转换。提供一个简单的🌰

adjustImgOrientation (file) {
  return new Promise((resolve, reject) => {
    EXIF.getData(file, function () {
      // 一般情况下图片都会有orientation, 如果没有则为网上下载的图，我们可以对没有orientation的图片进行赋值，以免报错
      let orientation = EXIF.getTag(this, 'Orientation')
      if (!orientation) orientation = true
      loadImage(
        file,
        function (canvas, data) {
          if (canvas.type === 'error') {
            console.error('Error loading image ' + canvas)
          } else {
            // 对非jpeg格式的图片进行转换
            canvas.toBlob(blob => {
              resolve(blob)
            }, 'image/jpeg')
          }
        },
        {
          orientation: orientation, // 允许根据指定的Exif方向转换画布
          canvas: true, // callback 返回 canvas
          meta: true // callback 返回 data
        }
      )
    })
  })
}

从代码的可读性上去看也好，从重复造轮子的角度去看也好，这个插件确实为我们提供了一定的便利性。