最近業務需要：將圖片轉為base64格式。 
so~~~；百度n多資料最後寫成，還是有一點小bug就是生成的圖片不太清晰； 
文章最後還有程式碼的下載地址

參考資料： 
微信小程式文件-wx.canvasGetImageData 
UPNG.js下載地址 
程式碼奉上： 
wxml

<!-- wxml -->
<button bindtap='fetch'>上傳</button>
<canvas canvas-id='myCanvas' style="width: 400px; height: 500px;"></canvas>
<image src='{{b64}}'></image>
 

• 1
• 2
• 3
• 4

js 
這裡需要引入一些轉base64的js

const upng = require('../../utils/UPNG.js')
//可以在上面的參考資料裡進行下載

• 1
• 2

fetch() {
    const ctx = wx.createCanvasContext('myCanvas')
    const platform = wx.getSystemInfoSync().platform
    const imgWidth = 400, imgHeight=500;
    wx.chooseImage({
      success: res => {
      //生成的圖片臨時路徑畫成canvas
        ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)
        ctx.draw(false, () => {
          wx.canvasGetImageData({
            canvasId: 'myCanvas',
            x: 0,
            y: 0,
            width: imgWidth,
            height: imgHeight,
            success: res => {
              if (platform === 'ios') {
                // 相容處理：ios獲取的圖片上下顛倒 
                res = this.reverseImgData(res)
              } 
              // 3. png編碼
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64編碼
              let base64 = wx.arrayBufferToBase64(pngData)
              // console.log('data:image/jpeg;base64,' + base64)
              this.setData({
                b64: 'data:image/jpeg;base64,' + base64
              });
            },
            fail(res) {
              console.log(res)
            },
          })
        })
      }
    })
  },
  //ios圖片處理 
  reverseImgData(res) {
    var w = res.width
    var h = res.height
    let con = 0
    for (var i = 0; i < h / 2; i++) {
      for (var j = 0; j < w * 4; j++) {
        con = res.data[i * w * 4 + j]
        res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
        res.data[(h - i - 1) * w * 4 + j] = con
      }
    }
    return res
  },
 

下載地址：https://download.csdn.net/download/weixin_38023551/10513997 
參考資料：https://github.com/zh8637688/wx-cardscanner