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

微信小程序 base64 图片 canvas 画布 drawImage 实现的更多相关文章

  1. 微信小程序_(组件)canvas画布

    canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...

  2. 微信小程序base64图片保存到手机相册

    问题:base64图片不能直接用wx.saveImageToPhotosAlbum保存到手机相册 解决: 先用fs.writeFile写入本地文件,再wx.saveImageToPhotosAlbum ...

  3. 微信小程序 base64图片在canvas上画图

    上代码 wxml <canvas canvas-id="myCanvas" style="width:400px;height:400px;">&l ...

  4. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  5. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  6. 微信小程序中使用canvas

    微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...

  7. 微信小程序之图片base64解码

    不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...

  8. 微信小程序中的canvas基础应用

    学了东西还是要记录一下,刚入职的小萌新啊,运气好分到一个项目不是很急的组原以为时间多了可以多学一些东西,但是发现好像不知道从哪里开始下手,我太南了.... 看旁边的实习生同事一直在搞canvas,自己 ...

  9. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

随机推荐

  1. jquery遍历table为每一个单元格取值及赋值

    表格代码 <tr> <td> <input type="text" style="border: none; text-align: cen ...

  2. 唱吧DevOps的落地,微服务CI/CD的范本技术解读----最大的难点并不是实际业务代码的编写,而是服务的监控和调试以及容器的编排

    1.业务架构:从单体式到微服务 K歌亭是唱吧的一条新业务线,旨在提供线下便捷的快餐式K歌方式,用户可以在一个电话亭大小的空间里完成K歌体验.K歌亭在客户端有VOD.微信和Web共三个交互入口,业务复杂 ...

  3. MySQL索引及查询优化总结 专题

    小结:db名与应用名相同,表名:业务名_此表的作用 ,表名表示内容,不体现数量,如果表示boolean概念,表名需要使用is_业务含义来表示,但POJO中不应该出现isXXX,因为不方便序列化,中间的 ...

  4. mac里用PyCharm中引用MySqlDB始末

    本来想用java来连数据库,然后调用python的,后来想了想,反正是个实验性质的小工程何必搞的这么复杂.直接全部python就好了,于是就为这个想法填了一晚上的坑. 装好了PyCharm的CE版,然 ...

  5. Extjs 上传文件 IE不兼容的问题[提示下载保存]

    我最不喜欢的浏览器的是IE,但无奈很多项目的客户使用的是IE. 在使用Extjs做文件上传时,其他浏览器没有问题,但IE却一个劲提示保存文件,看服务端运行,它其实是运行成功了已经,但客户端的进度条却一 ...

  6. Java中能否利用函数参数来返回值

    转自https://blog.csdn.net/da_da_xiong/article/details/70039532 我们在写代码时通常会遇到一种情况,就是我们可能希望在一个函数操作完成后返回两个 ...

  7. BZOJ_4773_负环_倍增弗洛伊德

    BZOJ_4773_负环 Description 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得 环上的边权和为负数.保证图中不包含重边 ...

  8. Java 使用PDFBox提取PDF文件中的图片

    今天做PDF文件解析,遇到一个需求:提取文件中的图片并保存.使用的是流行的apache开源jar包pdfbox, 但还是遇到坑了,比如pdfbox版本太高或太低都不能用!!这个包竟然没有很好地做好兼容 ...

  9. 再谈async与await

    回顾C#5.0是如何进行异步编程的 static void Main(string[] args) { string url = "https://docs.microsoft.com/zh ...

  10. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...