微信小程序将图片数据流添加到image标签中
原文:https://blog.csdn.net/OliveLao/article/details/78136121
----------------------------------------
有时候我们通过API接口获取图片时,拿到的是图片的数据流:有可能是二进制数据流,也可能是base64编码的数据流。
data: {
captchaImage: '../../images/captcha.png', // 如果需要的话,可以给张默认的图片先
},
当获取到的是原始的图片二进制数据流时,只需要将image标签的src直接设置为图片url就可以,如:
var that = this
var url = constants.WEB_SERVER_DOMAIN + '/getImage'
console.log(url)
that.setData ({
captchaImage: url,
})
当获取到的是图片的base64编码的数据流时,需要将接口获取到的数据再解析base64编码,如:
wx.request({
url: constants.WEB_SERVER_DOMAIN + '/getImage',
method: 'GET',
header: {
'content-type': 'application/octet-stream',
},
success: function (res) {
//console.log(res.data)
var data = res.data
console.log(res.statusCode)
if (res.statusCode == 200) {
that.setData ({
captchaImage: 'data:image/png;base64,' + data, // data 为接口返回的base64字符串
})
}
},
注意:上面解析base64时,在数据流前面加上 data:image/png;base64, (注意是有个“,”) 。image/png改为对应的图片类型,如 image/gif, image/jpg等。
然后在wxml文件中,使用image标签,如:
<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>
---------------------
作者:OliveLao
来源:CSDN
原文:https://blog.csdn.net/OliveLao/article/details/78136121
版权声明:本文为博主原创文章,转载请附上博文链接!
微信小程序将图片数据流添加到image标签中的更多相关文章
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序裁剪图片成圆形
代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
- nodeJs实现微信小程序的图片上传
今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...
- 微信小程序实现图片上传功能
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
- 微信小程序--实现图片上传
前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...
- 微信小程序天坑--图片汉字命名
图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.
- 微信小程序 base64 图片 canvas 画布 drawImage 实现
在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getIm ...
- 微信小程序之图片base64解码
不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...
随机推荐
- Linux安装expect
主要参考:https://www.cnblogs.com/zhenbianshu/p/5867440.html expect解释器 expect是一个能实现自动和交互式任务的解释器,它也能解释常见的s ...
- python计算平面的法向-利用协方差矩阵求解特征值和特征向量
Obvious,最小特征值对应的特征向量为平面的法向 这个问题还有个关键是通过python求协方差矩阵的特征值和特征向量,np.linalg.eig()方法直接返回了特征值的向量和特征向量的矩阵 sc ...
- IP地址 子网掩码 网络地址 主机地址 广播地址
1.一定要明白各自的概念分别表示什么 IP地址:IP地址是用来识别网络上的设备,因此,IP地址是由网络地址与主机地址两部分所组成. 子网掩码:子网掩码不能单独存在,它必须结合IP地址一起使用.子网掩码 ...
- Postman和jmeter的区别
1.创建接口用例集(没区别) Postman是Collections,Jmeter是线程组,没什么区别. 2.步骤的实现(有区别) Postman和jmeter都是创建http请求 区别1:postm ...
- C/C+面试题一:找出字符串中出现最多的字符和次数,时间复杂度小于O(n^2)
已知字符串"aabbbcddddeeffffghijklmnopqrst"编程找出出现最多的字符和次数,要求时间复杂度小于O(n^2) /********************* ...
- python学习-18 元组
tuple 1.元组tuple类似列表,由小括号()括住,其中的元素不可被修改,不能被增加或删除. tu = (222,222123123,("小胡子",444),12341,&q ...
- Python开发【第三章】:函数介绍
一. 函数介绍 1.函数是什么? 在学习函数之前,一直遵循面向过程编程,即根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复 ...
- 【转载】【最短路Floyd+KM 最佳匹配】hdu 2448 Mining Station on the Sea
Mining Station on the Sea Problem Description The ocean is a treasure house of resources and the dev ...
- java多线程:继承Thread和实现Runable接口的区别
java中我们想要实现多线程常用的有两种方法,继承Thread 类和实现Runnable 接口,有经验的程序员都会选择实现Runnable接口 ,其主要原因有以下两点: 首先,java只能单继承,因此 ...
- JavaScript list转tree
js list转tree //------------------------------------List Convert to Tree ---------------------------- ...