zoukankan      html  css  js  c++  java
  • 微信小程序 base64 图片 canvas 画布 drawImage 实现

    在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImagewx.getImageInfo 获取图片信息来获得。

    而 base64 格式图片数据,无法被 getImageInfo 直接调用,以下是解决方案:

    1. 首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
    2. 使用 FileSystemManager.writeFile 将 ArrayBuffer 数据写为本地用户路径的二进制图片文件
    3. 此时的图片文件路径在 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;
  • 相关阅读:
    7.12.2
    7.12.1
    7.11.8
    循环测试条件前缀和后缀的区别
    7.11.7 两个版本
    7.11.5
    7.12 vowels.c 程序
    7.11 animals.c 程序
    7.6.2 break 语句
    7.10 break.c 程序
  • 原文地址:https://www.cnblogs.com/kaiye/p/9909304.html
Copyright © 2011-2022 走看看