微信小程序開發上傳圖片後綴名爲unknow和getImageInfo的orientation不許的問題

問題1:在雲開發的存儲中發現一些文件名爲unknow，打開開發調試發現小程序chooseMedia拍攝圖片後後綴名爲unknow。
在微信社羣裏搜索了相關信息官方表示這確實是一個bug。

可是官方沒有說明下次更新時間，並且這個bug前端也能夠稍加修復。只須要判斷後綴名是否是本身規定的而且設置一個默認的後綴名便可。

getExt: function (filename,defaultExt) {
    if(filename && filename.length > 3) {
      const r = filename.split('').reverse().join(''); // 反轉
      const p = r.search(/\./)
      if(p > 2) {
        // .unknown
        const ext = r.substring(0,p).split('').reverse().join('');
        if(['jpg','jpeg','png','mp4'].includes(ext)) {
          return ext
        }else{
          return defaultExt
        }
      }else{
        return defaultExt
      }
    }else{
      return defaultExt
    }
  },

問題2:getImageInfo的orientation不許
一開始發現上傳的圖片不少方向都不對。就想到用canvas旋轉一下圖片。

// 非要和國際標準不同 不知道怎麼想的
const orientations = {
  up: 1,
  'up-mirrored': 2,
  down: 3,
  'down-mirrored': 4,
  'left-mirrored': 5,
  right: 6,
  'right-mirrored': 7,
  left: 8
}


module.exports = async function (canvas,ctx,imgs) {
  if(Array.isArray(imgs) && imgs.length) {

    const tasks = []
    for(const o of imgs) {
      const promise = rotate(canvas,ctx,o).then(res=>{
        return {...o,...res}
      })
      tasks.push(promise)
    }
    return await Promise.all(tasks)

  }else{
    return null
  }
}

async function rotate (canvas,ctx,o) {
  console.log('rotate',canvas,ctx,o)


  if(o.orientation === 'up') {
    return {}
  }

  return await new Promise((resolve)=>{
    const imgObj = canvas.createImage()
    imgObj.src = o.tempFilePath
    //imgObj.width = o.width
    //imgObj.height = o.height
    imgObj.onload = function (e) {
      console.log('imgObj.onload')
      let width = 0;
      let height = 0;
      let deg = 0;
      const orientation = orientations[o.orientation]
      console.log('orientation',orientation)
      // 開始旋轉邏輯
      if ([2, 3, 6, 8, 4, 5, 7].includes(orientation)) {
        if (orientation === 3 || orientation === 4) {
          width = o.width;
          height = o.height;
          deg = 180;
        } else if (orientation === 6 || orientation === 5) {
          width = o.height;
          height = o.width;
          deg = 90;
        } else if (orientation === 8 || orientation === 7) {
          width = o.height;
          height = o.width;
          deg = -90;
        }
        // 利用canvas 進行旋轉
        canvas.width = width
        canvas.height = height

        console.log('reset canvas',canvas)

        // 旋轉canvas 而且 把圖片放入canvas
        ctx.translate(parseInt(width / 2, 10), parseInt(height / 2, 10));
        if ([2, 4, 5, 7].includes(orientation)) {
          ctx.scale(-1, 1);
        }
        ctx.rotate((deg * Math.PI) / 180);
        ctx.drawImage(
          imgObj,
          0,
          0,
          o.width,
          o.height,
          0 - o.width / 2,
          0 - o.height / 2,
          o.width,
          o.height
        );

        console.log('drawImage',imgObj)

        wx.canvasToTempFilePath({
          canvas,
          fileType:'jpg',
          quality: 0.5,
          x: 0,
          y: 0,
          width,
          height,
          destWidth: width,
          destHeight: height,
          success(res) {
            console.log('canvasToTempFilePath',res,width,height)
            resolve({
              width,
              height,
              tempFilePath: res.tempFilePath
            })
          },
          fail(err) {
            console.log('fail err',err)
          },
          complete(res){
            console.log('com res',res)
          },
        })
      }

    }

  }).then(res=>{
    console.log('res2',res)
    return res
  })

}

以上是旋轉並保持圖片爲本地臨時文件的方法，因爲微信開始本身出了一套canvas規則後來又廢棄採用web標準版本的canvas，致使API文檔新舊規則你中有我，我只有你。看完文檔後一般就拿不定用哪個方法如何開始了。微信本身實現的canvas drawImage 是支持臨時文件的，而web標準版本的drawImage支持的是image對象的，在這個地方不少人都被官方帶溝裏了。

當我實現canvas旋轉圖片後發現getImageInfo的orientation不許，讓我沒法判斷用戶選擇的圖片的orientation，從而致使了沒法正確的旋轉圖片。

後來通過各類資料查找發現getImageInfo只能判斷原圖的方向，知道這個問題就好辦了，修改chooseImage文件類型爲原圖便可。