使用場景

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

問題說明

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

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

解決方法

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

關(guān)鍵代碼

// 把小程序碼寫入本地 export const writeFile = (base64Str => {return new Promise((resolve,reject)=>{// 后臺(tái)返回的base64格式數(shù)據(jù)的回車換行換為空字符''let base64Image = base64Str.split(',')[1].replace(/[\r\n]/g, '');// 文件管理器const fsm = wx.getFileSystemManager();// 文件名const FILE_BASE_NAME = 'tmp_base64src';// 文件后綴const format = 'png';// 獲取當(dāng)前時(shí)間戳用于區(qū)分小程序碼，防止多次寫進(jìn)的小程序碼圖片都一樣，建議通過不同的列表ID來區(qū)分不同的小程序碼const timestamp = (new Date()).getTime();// base轉(zhuǎn)二進(jìn)制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;// 把需要畫出來的圖片的臨時(shí)url暴露出去resolve(img);reject();},fail(e){console.log('讀取圖片報(bào)錯(cuò)');console.log(e);},error(res) {console.log(res)}})},fail(e){console.log(e);}})}).catch((e) => {console.log(e);}) }); // 在頁面調(diào)用方法 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);}) }

進(jìn)一步完善

這樣每調(diào)用一次寫一個(gè)文件，文件會(huì)越寫越多，當(dāng)文件管理器中文件總大小超過最大限制則會(huì)報(bào)錯(cuò)。解決方法：在寫入文件之前先做一次刪除操作，關(guān)鍵代碼如下：

// 刪除存儲(chǔ)的垃圾數(shù)據(jù) export const removeSave = () =>{return new Promise((resolve)=>{// 文件管理器const fsm = wx.getFileSystemManager();// 獲取文件列表fsm.readdir({dirPath: wx.env.USER_DATA_PATH, // 當(dāng)時(shí)寫入的文件夾success(res){res.files.forEach((el) => { // 遍歷文件列表里的數(shù)據(jù)// 刪除存儲(chǔ)的垃圾數(shù)據(jù)if (el !== 'miniprogramLog') { // 過濾掉miniprogramLogfsm.unlink({filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 文件夾也要加上，如果直接文件名會(huì)無法找到這個(gè)文件fail(e){console.log('readdir文件刪除失敗：', e)}});}})resolve()}})}) } // 在頁面調(diào)用方法 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) {// 操作 }

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。