網站首頁 編程語言 正文
在微信小程序中 canvas drawImage API 傳入的第一個參數是 imageResource 圖片資源路徑,這個參數通常由從相冊選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片信息來獲得。
而 base64 格式圖片數據,無法被 getImageInfo 直接調用,以下是解決方案:
首先使用 wx.base64ToArrayBuffer 將 base64 數據轉換為 ArrayBuffer 數據
使用 FileSystemManager.writeFile 將 ArrayBuffer 數據寫為本地用戶路徑的二進制圖片文件
此時的圖片文件路徑在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 接口能正確獲取到這個圖片資源并 drawImage 至 canvas 上
以下是具體的 base64src.js 函數代碼,注意寫文件時去掉 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
相關推薦
- 2022-10-24 六個Python3中使用最廣泛的內置函數總結_python
- 2023-04-12 Pandas創建DataFrame提示:type?object?'object'?has?no?at
- 2022-12-02 C語言學習之指針的使用詳解_C 語言
- 2022-07-06 Python列表創建與銷毀及緩存池機制_python
- 2022-03-27 3個適合新手練習的python小游戲_python
- 2022-06-26 ASP.NET?Core中引用OpenAPI服務的添加示例_實用技巧
- 2022-05-22 C#裝箱和拆箱的原理介紹_C#教程
- 2022-08-06 python練習之循環控制語句?break?與?continue_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支