最近搞小程序分享画布遇到的坑

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 上

上代码

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'));
},
});
});
};

base64转换成文件图片的更多相关文章

  1. 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码

    c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...

  2. html5中将图片的绝对路径转换成文件对象

    html5中将图片的绝对路径转换成文件对象 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象. 在HTML5中 ...

  3. Ghostscript 将PDF文件转换成PNG图片 问题一二

    由于项目需求,需要将原来的PDF文档转换成图片文件,在网上找了一些PDF转图片的方法:测试了几个后,都有这样或那样的问题 1.PDFLibNet.dll,这个类型最初还是挺好用的,能转图片和HTML, ...

  4. 将html转换成image图片png格式

    import java.awt.Color; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics ...

  5. JAVA将Byte数组(byte[])转换成文件

    /** * 将Byte数组转换成文件 * @param bytes byte数组 * @param filePath 文件路径 如 D://test/ 最后"/"结尾 * @par ...

  6. mpp文件转换成jpg图片,可以用pdf文件做中转站

    用project软件做了一个表,发现不能转换成图片,先把mpp文件转换成pdf文件,然后用PS打开pdf文件,存储为jpg格式就行了

  7. 使用nvDXT.exe把图片转换成dds图片【转】

    从nvidia官网下载工具包DDS Utilities [https://developer.nvidia.com/legacy-texture-tools] 转换图片格式需要的工具是 nvdxt.e ...

  8. C#使用FFmpeg 将视频格式转换成Gif图片示例

    根据EFmpeg封装的视频转换gif工具:https://my.oschina.net/tianma3798/blog/825317 一.本次使用参数说明 /* * 参数说明: * -i 源文件位置 ...

  9. java将白色背景图片转换成透明图片

    package evecom.image; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.Buffe ...

随机推荐

  1. kotlin使用中辍标记法调用函数

    fun main(arg: Array<String>) { var str = "hello world" print(str div("l")) ...

  2. Flask中current_app和g对象

      Flask零基础到项目实战(七)请求方法.g对象和钩子函数 一.get方法 二.post方法 post请求在模板中要注意几点: input标签中,要写name来标识这个value的key,方便后台 ...

  3. php中如何传递Session ID

    一般通过在各个页面之间传递的唯一的 Session ID,并通过 Session ID 提取这个用户在服务器中保存的 Session 变量,来跟踪一个用户.常见的 Session ID 传送方法主要有 ...

  4. Java的三种工厂模式

    一.简单工厂模式 简单工厂的定义:提供一个创建对象实例的功能,而无须关心其具体实现.被创建实例的类型可以是接口.抽象类,也可以是具体的类 实现汽车接口 //产品接口 //汽车需要满足一定的标准 pub ...

  5. 图解 HTTP 笔记(六)——HTTP 首部

    本章主要讲解了 HTTP 首部的结构,已经首部中各字段的用法. 一.HTTP 报文首部 上图是 HTTP 请求报文的结构. HTTP 请求报文由方法.URI.HTTP 版本.HTTP 首部字段等组成. ...

  6. SSD总结

    SSD: Single Shot MultiBox Detector 1. Introduction 改进点: 以前的方法都是先搞bounding box,再对box里面做分类.特点:精度高,速度慢. ...

  7. QML使用Python的函数

    有2种方法: 一. QML中定义一个信号,连接Python里的函数: 这里的函数不用特意指明为槽函数,普通函数即可. QML的信号连接Python的函数 QML:首先在QML中定义一个信号,这里的信号 ...

  8. 一个老程序员PHP程序员说的话(用来提醒自己)

    我,一个老程序员,也是一个学生,把玩过甚多语言,大多不精.我既非名牌学校,也不是高学历,仅代表一部分比较蛋疼的人.接触PHP也是很早了,从04年的OFSTAR开始的,到现在六年了,期间也接触过不少的语 ...

  9. 【Gstreamer开发】用 GStreamer 简化 Linux 多媒体开发

    原文:http://www.ibm.com/developerworks/cn/linux/l-gstreamer/ 一.基本概念 GStreamer 作为 GNOME 桌面环境推荐的流媒体应用框架, ...

  10. 最新 快乐阳光java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.快乐阳光等10家互联网公司的校招Offer,因为某些自身原因最终选择了快乐阳光.6.7月主要是做系统复习.项目复盘.Leet ...