小程式圖片轉Base64，方法總結。
小程式圖片轉base64
前言：看了很多部落格，小程式社群也逛了個遍，依然找不到小程式圖片在本地轉base64的方法，接下來就把所有方法做個總結，作為一個野生程式設計師，好東西絕對要分享。
第一種方法
先上程式碼
var uploadImage = this.data.imageList[0] var reader = new FileReader() reader.onload = function (e) { var arrayBuffer = reader.result; var base64 = wx.arrayBufferToBase64(arrayBuffer) } reader.readAsArrayBuffer(new Blob(this.data.imageList))
程式碼看起來似乎沒有問題，but~~~~~，人家微信根本就沒提供 FileReader()這個方法，所以，這個方法在小程式這裡，直接pass掉就行了，不可行。
第二種方法
這個方法很好，程式碼也是最易懂的。
首先，獲取本地圖片的臨時路徑
wx.chooseImage({
success:res=>{
this.urlTobase64(res.tempFilePaths[0])
}
})
接下來，把臨時路徑作為一個請求的url，把資料返回格式設定成arraybuffer，上程式碼。
urlTobase64(url){ request({ url:url, responseType: 'arraybuffer', //最關鍵的引數，設定返回的資料格式為arraybuffer success:res=>{ let base64 = wx.arrayBufferToBase64(res); //把arraybuffer轉成base64 base64 = 'data:image/jpeg;base64,' + base64 //不加上這串字元，在頁面無法顯示的哦 console.log(base64) //打印出base64字串，可複製到網頁校驗一下是否是你選擇的原圖片呢 } }) }
到這可以看到控制檯成功打印出base64字串，在網頁上校驗也是你選擇的圖片，一切看起來是那麼的美好，兄dei，先把你的笑容收起來，在開發者工具的模擬器上沒問題，你在真機上試一試，就會發現請求報錯了，我知道你想說，你特麼知道有問題還寫這幹啥，別激動兄dei，先把刀放下。馬上給你介紹可用的方法。
第三種方法
先說思路：這個方法是通過，小程式的Canvas繪圖實現的，獲取到圖片後，把圖片繪製到canvas上，然後通過wx.canvasGetImageData()方法獲取到圖片的png編碼，在把png編碼轉成base64，對Canvas還不是太瞭解的同學可以先去，開發者文件上熟悉一下。
wx.chooseImage({ count: 1, success: res => { //獲取圖片的寬高 wx.getImageInfo({ src: res.tempFilePaths[0], success: res => { this.setData({ imgWidth: res.width, imgHeight: res.height }) } }) canvas = wx.createCanvasContext('canvas') canvas.drawImage(res.tempFilePaths[0], 0, 0, this.data.imgWidth, this.data.imgHeight) // 1. 繪製圖片至canvas // 繪製完成後執行回撥 canvas.draw(false, () => { // 2. 獲取影象資料 wx.canvasGetImageData({ canvasId: 'canvas', x: 0, y: 0, width: this.data.imgWidth, height: this.data.imgHeight, success(res) { // 3. png編碼 let pngData = upng.encode([res.data.buffer], res.width, res.height) // 4. base64編碼 let base64 = wx.arrayBufferToBase64(pngData) console.log(base64) // ... } }) }) } })
經過上邊的程式碼我們也可以把圖片轉成base64,但是，問題一大堆啊有木有，圖片顯示不全，有的只轉了一部分，或者IOS真機圖片顯示顛倒。有沒有解決的辦法呢，肯定是有的了。直接把cardscanner資料夾放在你的專案中。
然後新建一個介面，分別引用cardscanne中的檔案。最下方下載資源
index.wxml檔案引用cardscanner.wxml
<import src="../../cardscanner/cardscanner.wxml" />
<template is="cardscanner" />
index.wxss檔案引用cardscanner.wxss
@import '../../cardscanner/cardscanner.wxss'
下邊是index.js裡邊的內容。
import CardScanner from '../../cardscanner/cardscanner.js'
Page({
onLoad(options) {
let that = this
this.imgPath = options.imgPath
this.cardScanner = new CardScanner(this)
.on('ImageChanged', (imgPath) => {
that.imgPath = imgPath
console.log(imgPath)
})
.on('DecodeStart', (imgPath) => {
wx.showLoading({
title: '生成中',
mask: true
})
})
.on('DecodeComplete', (res) => {
if (res.code == 1) {
//這裡返回轉過的base64字串，列印檢視
let base64 = 'data:image/jpeg;base64,' + res.data
console.log(base64)
//做你要做的操作
// ....
// ....
} else {
console.log('解析失敗：' + res.reason)
}
wx.hideLoading()
})
},
onReady() {
this.cardScanner.setImage(this.imgPath)
}
})
以上是你新建介面的內容，直接複製j就行，注意修改檔案引用路徑，讓你用最快的方式，把功能新增到專案中，如果有不同需求可以自己修改。
先上圖片。
這是引用檔案成功後的頁面，點選選擇按鈕，選擇圖片。
這是選擇完圖片，把圖片放在畫布上的狀態。
然後再點選確定按鈕，正在生成的狀態，由於時間稍微有點長，所以加了等待框。
這是轉換成功後的控制檯輸出。在真機遠端測試的輸出。
看評論裡有需求demo的在此也提供一下。直接用開發者工具開啟就行了。
專案地址。
經本人測試，基本沒什麼問題，唯一的缺陷就是轉base64時間稍微有一點長，不過已經加等待框提示了，也不是什麼大問題。
第四種
還記得第一種嗎？微信沒有提供操作檔案的方法。 最近微信更新文件了，我也趕緊跑過來更新部落格，給大家分享，好訊息來了，微信終於出文件操作相關API了。而且這次很給力。我已經迫不及待想嘗試一遍了。如下圖：
獲取到FileSystemManager，然後呼叫他的readFile()或者readFileSync(),引數如下：
支援的編碼格式如下：
一下上了這麼多看著就酸爽，哈哈~。
那我們要把圖片轉base64不是小菜一碟嗎~~。
wx.chooseImage({
success: res => {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0], //選擇圖片返回的相對路徑
encoding: 'base64', //編碼格式
success: res => { //成功的回撥
console.log('data:image/png;base64,' + res.data)
}
})
//這是同步的方法，不過我不太喜歡用
//let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64')
//console.log(base64)
}
})
注意版本庫要在1.9.9以後的版本才支援，注意版本控制。