使用場景

小程序中的文章詳情頁面有一個分享功能：用戶點擊分享按鈕，生成一張分享圖片（包括封面圖，簡介以及帶有文章ID的小程序碼），方便用戶保存在本地。

問題說明

小程序碼通過后臺接口獲取，格式如下：'data:image/jpg;base64,/9j/4AAQSkZJRgAB...'（只截取了前面一部分）

通過canvas畫出來之后，在微信開發者工具上有效，在真機上無效。

解決方法

先把小程序碼通過小程序API中的FileSystemManager.writeFile()接口寫入本地并獲取到一個臨時URL。

關鍵代碼

// 把小程序碼寫入本地 export const writeFile = (base64Str => {return new Promise((resolve,reject)=>{// 后臺返回的base64格式數據的回車換行換為空字符''let base64Image = base64Str.split(',')[1].replace(/[\r\n]/g, '');// 文件管理器const fsm = wx.getFileSystemManager();// 文件名const FILE_BASE_NAME = 'tmp_base64src';// 文件后綴const format = 'png';// 獲取當前時間戳用于區分小程序碼，防止多次寫進的小程序碼圖片都一樣，建議通過不同的列表ID來區分不同的小程序碼const timestamp = (new Date()).getTime();// base轉二進制const buffer = wx.base64ToArrayBuffer(base64Image),// 文件名filePath = `${wx.env.USER_DATA_PATH}/${timestamp}share.${format}`;// 寫文件fsm.writeFile({filePath,data: buffer,encoding: 'binary',success(res) {// 讀取圖片wx.getImageInfo({src: filePath,success: function(res) {let img = res.path;// 把需要畫出來的圖片的臨時url暴露出去resolve(img);reject();},fail(e){console.log('讀取圖片報錯');console.log(e);},error(res) {console.log(res)}})},fail(e){console.log(e);}})}).catch((e) => {console.log(e);}) }); // 在頁面調用方法 import { writeFile } from '../../utils/wxFunc'getUseCode () {writeFile(codeUrl).then(img => { // // codeUrl為base64格式的小程序碼console.log('可使用的小程序碼：' + img); // img格式：http://usr/1599468897794share.pngthis.createCanvas(img);}).catch(e => {console.log(e);}) }

進一步完善

這樣每調用一次寫一個文件，文件會越寫越多，當文件管理器中文件總大小超過最大限制則會報錯。解決方法：在寫入文件之前先做一次刪除操作，關鍵代碼如下：

// 刪除存儲的垃圾數據 export const removeSave = () =>{return new Promise((resolve)=>{// 文件管理器const fsm = wx.getFileSystemManager();// 獲取文件列表fsm.readdir({dirPath: wx.env.USER_DATA_PATH, // 當時寫入的文件夾success(res){res.files.forEach((el) => { // 遍歷文件列表里的數據// 刪除存儲的垃圾數據if (el !== 'miniprogramLog') { // 過濾掉miniprogramLogfsm.unlink({filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 文件夾也要加上，如果直接文件名會無法找到這個文件fail(e){console.log('readdir文件刪除失敗：', e)}});}})resolve()}})}) } // 在頁面調用方法 import { writeFile } from '../../utils/wxFunc'removeBeforeFiles () {removeSave().then(() => {this.getUseCode();}).catch(e => {console.log(e);}) },getUseCode () {writeFile(codeUrl).then(img => { // codeUrl為base64格式的小程序碼this.createCanvas(img);}).catch(e => {console.log(e);}) },createCanvas (img) {// 操作 }

完成，又可以愉快地踩下一個坑了！

總結

以上是生活随笔為你收集整理的微信小程序中base64格式的小程序码通过canvas画出来无效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。