微信小程序将后端返回的图片文件流解析显示到页面

说明

由于请求接口后端返回的图片格式不是一个完整的url,也不是其他直接能显示的图片格式,是一张图片

后端根据模板与二维码生成图片,返回二进制数据

返回为文件流的格式,用wx.request请求的时候,就自动解码成为了下面这样的数据数据格式,这样的数据没有办法直接赋值给url去显示。

 .

获取数据并处理

 getUserBanner() {
        let that = this
        wx.request({
          url: 'http://localhost:9080/test/addBanner',//后台地址
          method: 'GET',
          responseType: 'arraybuffer', //切换流返回类型
          data: {},
          success: (res) => {
            console.log("返回数据"+res.data) 
            if (res.data) {
                that.setData({
                userBanner : 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)  //赋值
              })
             
            } 
          }
        })
      },

1、设置 responseType: 'arraybuffer',将数据转为类似二进制数组的格式
2、 let url ='data:image/png;base64,'+wx.arrayBufferToBase64(res.data) 

后端返回数据,根据rpc调用返回的二维码生成图片模板

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/125624.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Window环境NFS服务务器搭建及连接

1.NFS服务端搭建, 下载haneWIN NFS 服务端软件(工具下载路径:链接:https://pan.baidu.com/s/1HXeQ8nIY4RHVltd0uAvFaw 提取码:w18j ) 2.安装haneWIN NFS 服务端软件比较简单,直接点下一步即可…

怎么将pdf转换成word?

怎么将pdf转换成word?将pdf文件转换成word是一件非常重要的转换技能,将pdf转换成word可以解决非常多的问题,总结起来主要有以下这些:编辑文本:① PDF文件通常是不可编辑的,而将其转换为Word格式后&#xff…

c#数据类型

常量 /*常量是固定的量,在运行过程中不可以改变的量 const 来修饰不能改变的量*/ // public private protected internal 是访问修饰符using System.Security.Cryptography.X509Certificates;namespace ConsoleApp1 {internal class Program{public const int a 1…

Semantic-Guided Zero-Shot Learning for Low-Light ImageVideo Enhancement

论文阅读之无监督低光照图像增强 Semantic-Guided Zero-Shot Learning for Low-Light Image/Video Enhancement 代码: https://github.com/ShenZheng2000/SemantiGuided-Low-Light-Image-Enhancement 在低光条件下增加亮度的一个可行方法是使用更高的ISO或更长时间…

qt-C++笔记之Qt中的时间与定时器

qt-C笔记之Qt中的时间与定时器 code review! 文章目录 qt-C笔记之Qt中的时间与定时器一.Qt中的日期时间数据1.1.QTime:获取当前时间1.2.QDate:获取当前日期1.3.QDateTime:获取当前日期和时间1.4.QTime类详解1.5.QDate类详解1.6..QDateTime类…

IP可视对讲实时录制系统

介绍 软件架构 技术支持 CallRecored介绍 IP可视对讲实时录制系统设计了数据库表,并完成了数据库建模,采用了视频编解码技术,高效网络传输,磁盘高效读写技术,以及提供开放接口。 系统客户端采用扁平化UI,…

如何设计vue项目的权限管理?

权限管理的重要性及必要性 数据安全:权限管理可以确保只有具有相应权限的用户能够访问和操作特定的数据。这可以保护敏感数据不被未授权的用户访问,从而提高数据的安全性。功能控制:权限管理可以根据用户的角色和权限设置,控制用户…

【java:牛客每日三十题总结-3】

java:牛客每日三十题总结 总结如下 总结如下 集合相关知识点 Collection主要的子接口: List:可以存放重复内容 Set:不能存放重复内容,所有重复的内容靠hashCode()和equals()两个方法区分 Queue:队列接口 SortedSet:可以对集合中的数据进行排序 Map没有继承Collection接口&…

vue项目js原生属性IntersectionObserver实现图片懒加载

vue项目js原生属性IntersectionObserver实现图片懒加载 IntersectionObserver 使用js原生属性IntersectionObserver实现观察img元素是否处于游览器视口中 懒加载原理:给img设置一个默认url图片,观察图片处于视口内以后,动态改变img的url为自己…

在Three.js中动画 简单案例

在Three.js中,动画是指在场景中创建和控制对象的运动和变化。模型是指通过Three.js加载的3D对象,可以是几何体、网格或复杂的模型文件(如.obj或.gltf)。动画可以存在于模型中,也可以单独定义。 编辑关键帧:…

数据结构与算法C语言版学习笔记(5)-串,匹配算法、KMP算法

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、串的定义二、串的存储结构1.顺序结构2.链式结构 三、串的朴素的模式匹配算法(暴力匹配算法)1.背景2.假设我们要从下面的主串 S"…

app自动化测试(Android)--显式等待机制

WebDriverWait类解析 WebDriverWait 用法代码 Python 版本 WebDriverWait(driver,timeout,poll_frequency0.5,ignored_exceptionsNone)参数解析: driver:WebDriver 实例对象 timeout: 最长等待时间,单位秒 poll_frequency: 检测的间隔步…

华为L410上制作内网镜像模板02

原文链接:华为L410上制作离线安装软件模板02 hello,大家好啊,今天给大家带来第二篇在内网搭建Apache服务器,用于安装完内网操作系统后,在第一次开机时候,为系统安装软件的文章,今天给大家介绍在…

nodejs+vue+python+PHP+微信小程序南七街道志愿者服务平台的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

PCIe寄存器之二

关键字索引: CAP_PM 对应:Capabilities: [c0] Power Management CAP_MSI 对应:Capabilities: [c8] MSI CAP_MSIX对应:Capabilities: [e0] MSI-X CAP_EXP 对应:Capabilities: [70] Express (v2) Endpoint 以上 [] 内的…

【云栖2023】张治国:MaxCompute架构升级及开放性解读

简介: 本文根据2023云栖大会演讲实录整理而成,演讲信息如下 演讲人:张治国|阿里云智能计算平台研究员、阿里云MaxCompute负责人 演讲主题:MaxCompute架构升级及开放性解读 活动:2023云栖大会 MaxCompute发展经历了…

网络基础(1)

目录: 1.了解局域网(LAN)和广域网(WAN) 2.认识“协议” 3.浅谈OSI七层模型 4.网络传输的基本流程 5.路由器这个设备 ---------------------------------------------------------------------------------------…

手写一个Webpack,带你了解构建流程

如果对前端八股文感兴趣,可以留意公重号:码农补给站,总有你要的干货。 前言 Webpack是一个强大的打包工具,拥有灵活、丰富的插件机制,网上关于如何使用Webpack及Webpack原理分析的技术文档层出不穷。最近自己也是发现…

回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测

回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测 目录 回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现PCA-PLS主成分降维结合偏小二乘回归预测(完整源码和数据) 1.输…

【19】c++11新特性 —>线程异步

什么是异步? async的两种方式 //方式1 async( Function&& f, Args&&... args ); //方式2 async( std::launch policy, Function&& f, Args&&... args );函数参数: f:任务函数 Args:传递给f的参数 policy:可调用对象f的…