当前位置: 首页 > news >正文

后端返回图片流前端展示图片

根据后端返回的图片流格式,选用合适方法转换
下面以base64为例

if(res.status == 200) {res.data.data.forEach((item,index) => {let Array = 'data:image/png;base64,' + itemlet blob = this.base64toBlob(Array)let url = URL.createObjectURL(blob)this.imageList.push({name:this.keyList[index],src:url})});
}

下面是图片流的两种转换方式:

arrayBufferToBase64(buffer) {var binary = ''var bytes = new Uint8Array(buffer)var len = bytes.byteLengthfor (var i = 0; i < len; i++) {binary += String.fromCharCode(bytes[i])}return window.btoa(binary)
},
base64toBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
},

相关文章:

  • 【蓝桥杯软件赛 零基础备赛20周】第5周——高精度大数运算与队列
  • linux(3)之buildroot配置软件包
  • JavaScript中的时间日期函数new Date()(JS中5种获取时间戳的函数)
  • SELinux refpolicy详解(5)
  • 无人机助力电力设备螺母缺销智能检测识别,python基于YOLOv5开发构建电力设备螺母缺销小目标检测识别系统
  • [github全教程]github版本控制最全教学------- 大厂找工作面试必备!
  • uniapp uni-popup组件在微信小程序中滚动穿透问题
  • python获取网络时间,0延时
  • 使用Xshell启动远程服务器上的tensorboard:本地浏览器打开
  • uniapp在H5端实现PDF和视频的上传、预览、下载
  • 国家开放大学 平时作业 测试题 训练
  • visual Studio MFC 平台实现图像增强中Gray-level slicing,Bit-plane slicing,对比度拉伸三种方法
  • ECShop 4.x collection_listSQL注入
  • 软考2016年上半年第六题(适配器模式)与手术训练系统项目适配器模式的应用
  • Google Analytics(谷歌分析)是什么以及如何使用
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • flask接收请求并推入栈
  • MySQL用户中的%到底包不包括localhost?
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • PHP的类修饰符与访问修饰符
  • Vue小说阅读器(仿追书神器)
  • 阿里云Kubernetes容器服务上体验Knative
  • 从0实现一个tiny react(三)生命周期
  • 讲清楚之javascript作用域
  • 前端之React实战:创建跨平台的项目架构
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • ​马来语翻译中文去哪比较好?
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • #前后端分离# 头条发布系统
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (一)Java算法:二分查找
  • (一一四)第九章编程练习
  • .NET Core 中的路径问题
  • .NET CORE使用Redis分布式锁续命(续期)问题
  • .NET 中使用 Mutex 进行跨越进程边界的同步
  • .Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • .php文件都打不开,打不开php文件怎么办
  • @RequestParam详解
  • @staticmethod和@classmethod的作用与区别
  • [ACM] hdu 1201 18岁生日
  • [AI]文心一言爆火的同时,ChatGPT带来了这么多的开源项目你了解吗
  • [Angular] 笔记 7:模块
  • [c++] C++多态(虚函数和虚继承)
  • [CSS3备忘] transform animation 等
  • [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
  • [flink总结]什么是flink背压 ,有什么危害? 如何解决flink背压?flink如何保证端到端一致性?
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页
  • [linux] C语言Linux系统编程进程基本概念
  • [NOIP2017 提高组] 列队 题解
  • [Spark SQL]Spark SQL读取Kudu,写入Hive
  • [Todo] C++学习资料进度
  • [WeChall] No Escape (Exploit, PHP, MySQL)