小程式圖片轉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以後的版本才支援,注意版本控制。