详解微信小程序图片地扯转base64解决方案


Posted in Javascript onAugust 18, 2019

你还在找在小程序成如何将图片转base64存储起来并显示嘛,在这里呢,来瞧瞧。

使用方法

js文件

let $this = this;
request({
   url:'https://www.dounine.com/hello.jpg',
   method:'GET',
   responseType: 'arraybuffer',
   success:function(res){
    let base64 = wx.arrayBufferToBase64(res);
    $this.data.userImageBase64 = 'data:image/jpg;base64,' + base64;;
   }
});

wxml文件

<image src='{{userImageBase64}}' style='width:90rpx;height:90rpx;' />

PS:小程序本地图片转base64最简单方法

  • wx.chooseImage:得到图片地址
  • wx.getFileSystemManager:创建文件管理类
  • readFileSync:读取本地文件,直接得到base64
wx.chooseImage({
   success: function(res) {
    console.log(wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64"))
   },
  })

附官方api:
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html?search-key=getFileSystemManager

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
js中实现继承的五种方法
Jan 25 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 #Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 #Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 #Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 #Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 #Javascript
详解ES6 Promise的生命周期和创建
Aug 18 #Javascript
vue-cli3配置与跨域处理方法
Aug 17 #Javascript
You might like
PHP访问数据库集群的方法小结
2016/03/14 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
原生js二级联动效果
2017/06/20 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python模拟百度登录实例详解
2016/01/20 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python中的itertools的使用详解
2020/01/13 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python项目打包成二进制的方法
2020/12/30 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
学校读书活动总结
2014/06/30 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python