详解微信小程序图片地扯转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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js确定对象类型方法
2012/03/30 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
Java面向对象面试题
2016/12/26 面试题
工会趣味活动方案
2014/08/18 职场文书
英文慰问信
2015/02/14 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
创业计划书详解
2019/07/19 职场文书
导游词之日本富士山
2020/01/06 职场文书
golang的文件创建及读写操作
2022/04/14 Golang