網(wǎng)站首頁 編程語言 正文
在微信小程序中 canvas drawImage API 傳入的第一個參數(shù)是 imageResource 圖片資源路徑,這個參數(shù)通常由從相冊選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片信息來獲得。
而 base64 格式圖片數(shù)據(jù),無法被 getImageInfo 直接調(diào)用,以下是解決方案:
首先使用 wx.base64ToArrayBuffer 將 base64 數(shù)據(jù)轉(zhuǎn)換為 ArrayBuffer 數(shù)據(jù)
使用 FileSystemManager.writeFile 將 ArrayBuffer 數(shù)據(jù)寫為本地用戶路徑的二進制圖片文件
此時的圖片文件路徑在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 接口能正確獲取到這個圖片資源并 drawImage 至 canvas 上
以下是具體的 base64src.js 函數(shù)代碼,注意寫文件時去掉 base64 的頭信息:
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';
const base64src = function(base64data) {
return new Promise((resolve, reject) => {
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
reject(new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
resolve(filePath);
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
};
export default base64src;
原文鏈接:https://blog.csdn.net/chenxi004/article/details/89476392
相關(guān)推薦
- 2023-03-18 RedisTemplate訪問Redis的更好方法_Redis
- 2022-04-18 Python裝飾器實現(xiàn)函數(shù)運行時間的計算_python
- 2022-09-09 python?對excel交互工具的使用詳情_python
- 2022-08-20 C++詳細講解內(nèi)存管理工具primitives_C 語言
- 2022-03-29 C#算法之冒泡排序、插入排序、選擇排序_C#教程
- 2023-10-17 git更換遠端地址
- 2022-04-27 為ABP框架增加日志組件與依賴注入服務(wù)_基礎(chǔ)應(yīng)用
- 2023-07-15 css背景顏色不顯示
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支