用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

微信小程序開發上傳圖片后綴名為unknow和getImageInfo的orientation不準的問題 ...

Rolan 2020-6-1 00:41

問題1:在云開發的存儲中發現一些文件名為unknow,打開開發調試發現小程序chooseMedia拍攝圖片后后綴名為unknow。在微信社群里搜索了相關信息官方表示這確實是一個bug。但是官方沒有說明下次更新時間,而且這個bug前 ...

問題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文檔新舊規則你中有我,我只有你??赐晡臋n后通常就拿不定用哪一個方法如何開始了。微信自己實現的canvas drawImage 是支持臨時文件的,而web標準版本的drawImage支持的是image對象的,在這個地方很多人都被官方帶溝里了。

當我實現canvas旋轉圖片后發現getImageInfo的orientation不準,讓我無法判斷用戶選擇的圖片的orientation,從而導致了無法正確的旋轉圖片。

后來經過各種資料查找發現getImageInfo只能判斷原圖的方向,知道這個問題就好辦了,修改chooseImage文件類型為原圖即可。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: sixpx 來自: segmentfault
梦幻单人赚钱方法 后二组选包胆技巧 安徽快三预测号码 sg飞艇一期计划 一只股票分析全面分析论文 大盘走势图怎么看 南京股票配资网 重庆幸运农场为什么总是输 涨停是什么意思 体彩湖北11选五前三直 广西快乐双彩今晚开奖结果查询