日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達者為師

網(wǎng)站首頁 編程語言 正文

微信小程序 base64 圖片 canvas 畫布 drawImage 實現(xiàn)

作者:chenxi004 更新時間: 2022-04-10 編程語言

在微信小程序中 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

欄目分類
最近更新