小程序图片转换Base64格式的三种方法

一、使用小程序自带的网络请求

1、wx.request() 这种方式适合网络https路径图片，但无法解析wxfile://xxxx导致转化报错

image2Base64(imgUrl) {return new Promise((resolve, reject) => { // promise 解决异步问题wx.request({url: imgUrl,responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffersuccess: (res) => {var base64 = wx.arrayBufferToBase64(res.data);base64 = 'data:image/jpeg;base64,' + base64;resolve(base64);},fail: (res) => {reject(false);}})})}

2、wx.getFileSystemManager().readFile() 本地照片或拍照这种可以转化解析wxfile://xxxx

wx.chooseImage({count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success(res) {wx.getFileSystemManager().readFile({filePath: res.tempFilePaths[0], //要读取的文件的路径 (本地路径)encoding: "base64", //指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容success(res) {//转换完毕，执行上传_this.setData({avatar: 'data:image/png;base64,' + res.data})}})}})

二、使用canvas 获取图片base64

<canvas id="myCanvas" type="2d" hidden="true"></canvas>

//使用canvas 获取图片base64async getImageBase64_canvas(tempFilePath) {const {width,height} = await wx.getImageInfo({src: tempFilePath});const base64 = await new Promise(resolve => {const query = wx.createSelectorQuery();query.select("#myCanvas").fields({node: true, // 获取 node}).exec(res => {let {node: canvas} = res[0];let ctx = canvas.getContext('2d');let image = canvas.createImage();console.log(image);image.src = tempFilePath;image.onload = () => {ctx.drawImage(image, 0, 0, width, height);resolve(canvas.toDataURL())}});});this.setData({base64})},

三、获取全局唯一的文件管理器读取本地文件内容

async getImageBase64_readFile(tempFilePath) {const base64 = await new Promise(resolve => {//获取全局唯一的文件管理器 wx.getFileSystemManager().readFile({ //读取本地文件内容filePath: tempFilePath, // 文件路径encoding: 'base64', // 返回格式success: ({data}) => {return resolve('data:image/png;base64,' + data);}});});this.setData({base64})
},

小程序图片转换Base64格式的三种方法相关推荐

怎么转换CAD图纸格式？三种方法帮你搞定CAD转PDF格式操作！
对于许多小伙伴们而言,对于CAD的了解在不断的加深,而我们的制图水平随着不断的时间的累积也越来越厉害,CAD转PDF格式这种简单的图纸格式转阿虎操作自然不在话下,但是对于许多刚刚开始接触CAD的小伙伴 ...
小程序图片转Base64，方法总结。
小程序图片转base64 前言:看了很多博客没一个能解决问题的,小程序社区也逛了个遍,依然找不到小程序图片在本地转base64的方法,凡事还得靠自己啊,接下来就把所有方法做个总结,作为一个野生程序员, ...
javascript中将字符串转换为json格式的三种方法
摘自:http://www.phpzixue.cn/detail1128.shtml javascript中将字符串转换为json格式的三种方法: json在我们js的开发过程中经常会用到像在使用a ...
Java程序初始化启动自动执行的三种方法
目录 @PostConstruct注解 CommandLineRunner接口 ApplicationRunner 接口 @Order注解设置启动顺序分享一下自己用过的java程序初始化启动自动执行 ...
小程序页面之间数据传递的五种方法
小程序页面之间数据传递的五种方法目录小程序页面之间数据传递的五种方法 **使用 `wx.navigateTo()` 时,在 url 中拼接,这种方法适用于数据量少的情况** **使用 `wx.na ...
如何将图片转换base64格式？data:image/png;base64又是什么？
一.我们在看代码时经常在img或css背景图片中看到: src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAA ...
badatatable转成json_C# DataTable 转换成JSON数据三种方法
在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List.DataTable转换为Json格式.特别在使用Extjs框架的时候,Ajax异步请求的数 ...
开机提示小娜无法在本计算机运行,解决Win10正式版开始菜单与小娜打不开问题的三种方法...
最近,有一些win10正式版用户反映自己的开始菜单和小娜突然打不开了,这该怎么办呢?接下来,小编就向大家分享三种临时解决Win10正式版开始菜单与小娜打不开问题的方法. 温馨提示: 本文的三种方法目前 ...
将ppt转换成pdf的三种方法分享
在我们工作中,总免不了将一些ppt幻灯片里的内容复制到pdf文档中,一些同仁遇到这种现象常常不知道如何下手,有的甚至直接将ppt文本内容复制到word文档中,然后保存成pdf格式,这样打开肯定会导致排 ...

小程序图片转换Base64格式的三种方法

一、使用小程序自带的网络请求

2、wx.getFileSystemManager().readFile() 本地照片或拍照这种可以转化解析wxfile://xxxx

二、使用canvas 获取图片base64

三、获取全局唯一的文件管理器读取本地文件内容

小程序图片转换Base64格式的三种方法相关推荐

最新文章

热门文章

小程序图片转换Base64格式的三种方法

一、使用小程序自带的网络请求

2、wx.getFileSystemManager().readFile() 本地照片或拍照这种可以转化解析wxfile://xxxx

二、使用canvas 获取图片base64

三、获取全局唯一的文件管理器 读取本地文件内容

小程序图片转换Base64格式的三种方法相关推荐

最新文章

热门文章

三、获取全局唯一的文件管理器读取本地文件内容