微信小程序 base64 图片 canvas 画布 drawImage 实现

在微信小程序中 canvas drawImage 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.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;

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hotqin888的专栏

3.golang: gorm不定条件查询和分页操作

不定参数参数多用于table在后端的多条件筛选,这样的场景是无法预知用户需要使用那些筛选条件.只有当参数传递给后端时才清楚.所以后端需要根据传递的参数动态生成符...

6891
来自专栏Java3y

移动商城第五篇(用户模块)【用户登陆、回显用户、拦截器、收货地址】

移动商城【用户登陆、回显用户】 我们来实现用户登陆的功能: ? 当点击的时候,出来的是一个弹出框,我们想要切换成一个页面。 ? 找到对应的事件、切换成我们的页面...

5207
来自专栏Hadoop实操

如何在Hive中使用Struct类型

Hive中支持多种数据类型除了常用的TINYINT、SMALLINT、INT、BIGINT、BOOLEAN、FLOAT、DOUBLE、STRING、BINARY...

8074
来自专栏me的随笔

ASP.NET MVC5 实现分页查询

对于大量数据的查询和展示使用分页是一种不错的选择,这篇文章简要介绍下自己实现分页查询的思路。

3373
来自专栏小狼的世界

PHPExcel对于Excel中日期和时间类型的处理

PHPExcel是一款优秀的处理Excel文件读写的开源PHP Library,能够给我们提供强大的Excel读写能力,本文针对Excel处理过程中关于日期和时...

2011
来自专栏FreeBuf

移位溢注:告别靠人品的偏移注入

在Access数据库类型注入的时候,我们获取不到列名(前提是有表名),一般会选择使用偏移注入,但是这种注入方式往往借助的是个人的人品,且步骤繁琐。本文中我们研究...

2336
来自专栏更流畅、简洁的软件开发方式

【自然框架】元数据的数据库结构的详细说明和示例(一):项目描述部分

1、 Manage_Function(节点信息) 字段名 中文名 类型 大小 默认值 说明 FunctionID 节点ID int 4 1 主键 Pa...

2488
来自专栏更流畅、简洁的软件开发方式

【自然框架】元数据的数据库结构的详细说明和示例(二):数据库描述部分

1、Manage_Table(表、视图、存储过程、函数的信息) 字段名 中文名 类型 大小 默认值 说明 TableName 表名 nvarchar 6...

2205
来自专栏用户2442861的专栏

python MySQLdb使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

1183
来自专栏玩转JavaEE

MongoDB中各种类型的索引

上篇文章中我们介绍了MongoDB中索引的简单操作,创建、查看、删除等基本操作,不过上文我们只介绍了一种类型的索引,本文我们来看看其他类型的索引。 ---- _...

2977

扫码关注云+社区

领取腾讯云代金券