小程序圖片轉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這個功能)，現階段更加合適的處理方式仍是上傳到後端來處理圖片格式。