小程序圖片轉base64

引入

前段時間有個需求涉及小程序還原H5當中的圖片上傳功能。
沒有細節考慮好就跟后端的老哥說接口不用改直接前端處理。。。
現在想想真是心疼我自己

現階段的一些思路。

服務器處理

直接上傳流文件到服務器，然后在服務器做base64轉換處理。

利用小程序canvasGetImageData方法和upng

• 既然是使用canvas方法，那么首先需要在wxml里添加一個canvas元素

  <canvas canvas-id="mycanvas"></canvas>

  如果不加，頁面canvasGetImageData方法無法生成，display:none也不行

• js部分省略獲取imgPath過程

  var canvasid='mycanvas'
  var ctx = wx.createCanvasContext(canvasid) //操作對應id的canvas
  
  ctx.drawImage(imgPath,0,0,width,height)//繪畫圖片，把圖片放進去。這里的寬高可以使用wx.getImageInfo獲取用戶上傳圖片本來的寬高
  
  ctx.draw(function(){
      wx.canvasGetImageData({
          canvasId:canvasid //參數，canvas標簽的id
          x:0,//起始位置，x坐標
          y:0,
          width:width,
          height:height,
          success:function(res){
              //引入upng，將圖片轉化成utf-8格式
              let pngData = upng.encoded([res.data.buffer].res.width,res.height）//再轉化成base64
              let bs64 = wx.arrayBufferToBase64(pngData)
          }
      })
  });

• 必須引入upng組件
• 基礎庫必須大於1.9.0

通過小程序request資源請求(暫不可用)

• js部分省略獲取imgPath過程

wx.request({
  url:imgPath,
  responseType: 'arraybuffer',//最關鍵的參數，設置返回的數據格式為arraybuffer
  success:res=>{
        let base64 = wx.arrayBufferToBase64(res);//把arraybuffer轉成base64
        base64　= 'data:image/jpeg;base64,' + base64　//不加上這串字符，在頁面無法顯示的哦
        console.log(base64)　//打印出base64字符串，可復制到網頁校驗一下是否是你選擇的原圖片呢
      }
});

• 基礎庫必須大於1.9.0

總結

使用upng方法確實能解決問題，但是引入upng組件相對有些龐大(只相對於處理base64這個功能)，現階段更加合適的處理方式還是上傳到后端來處理圖片格式。