接收二进制流(ArrayBuffer) ,并且显示二进制流图片
1.调用接口,返回二进制流数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == && xhr.status == ) {//
var responseText = xhr.responseText;
//返回二进制数据流
console.log(responseText);
}
};
xhr.open("GET", "/getData", true);
//需要设置responseType
xhr.responseType = "arraybuffer";
xhr.send(null)
2. 把二进制数据转为base64
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = ; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
3.显示图片
var response = xhr.response;
var url= arrayBufferToBase64(response);
document.getElementById('img').src='data:image/jpeg;base64,'+url;
完整代码
var xhr = new XMLHttpRequest();
xhr.open("GET", "/getdata", true);
xhr.responseType = "arraybuffer";
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == && xhr.status == ) {
//二进制数据流
var response = xhr.response;
var url= arrayBufferToBase64(response);
document.getElementById('img').src='data:image/jpeg;base64,'+url;
}
};
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = ; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
接收二进制流(ArrayBuffer) ,并且显示二进制流图片的更多相关文章
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- Java基础:IO流之字节流和字符流
1. 流的概念 流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等. 一个流,必有源端和目的端 ...
- IO流总结---- 字节流 ,字符流, 序列化 ,数据操作流,打印流 , Properties 集合
笔记内容: 什么是流 字节流 字符流 序列化 数据操作流(操作基本数据类型的流)DataInputStream 打印流 Properties 集合 什么是流: 流是个抽象的概念,是对输入输出设备的抽象 ...
- IO流(字节流,字符流)
一,概述 IO流(input output):用来处理设备之间的数据. Java对数据的操作是通过流的对象. Java用于操作流的对象都在IO包中. 流是一组有顺序的,有起点和终点的字节集合,是对数据 ...
- 今天谈谈流,什么是IO流?
无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...
- 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法
下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片 将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...
- JavaSE学习笔记(14)---File类和IO流(字节流和字符流)
JavaSE学习笔记(14)---File类和IO流(字节流和字符流) File类 概述 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 构造方 ...
- 09、IO流—File类与IO流
目录 一.File类 基本认识 实用方法 获取功能 重命名功能(包含剪切) 判断功能 创建.删除文件 实际小案例 二.IO流 1.认识IO流 2.IO流基类介绍 字节流基类介绍 字符流基类介绍 三.节 ...
- .net学习之集合、foreach原理、Hashtable、Path类、File类、Directory类、文件流FileStream类、压缩流GZipStream、拷贝大文件、序列化和反序列化
1.集合(1)ArrayList内部存储数据的是一个object数组,创建这个类的对象的时候,这个对象里的数组的长度为0(2)调用Add方法加元素的时候,如果第一次增加元神,就会将数组的长度变为4往里 ...
- java 笔记(4) —— java I/O 流、字节流、字符流
Java中使用流来处理程序的输入和输出操作,流是一个抽象的概念,封装了程序数据于输入输出设备交换的底层细节.JavaIO中又将流分为字节流和字符流,字节流主要用于处理诸如图像,音频视频等二进制格式数据 ...
随机推荐
- es6 对象的扩展
一.现在还有很多浏览器不能直接使用es6语法.特别是手机端的一些低版本的浏览器.都需要用bale转换一下. 但是目前流行的框架中(vue,react,angular).都有自己的脚手架,都能用webp ...
- Docker(二十一)-Docker Swarm集群部署
介绍 Swarm 在 Docker 1.12 版本之前属于一个独立的项目,在 Docker 1.12 版本发布之后,该项目合并到了 Docker 中,成为 Docker 的一个子命令.目前,Swarm ...
- Git从零开始(二)
前面提交了一个test1.txt文件,接下来看看这个文件接下来的命运. 一.继续修改并提交 在test1.txt中修改后, git status 查看git的状态, 会提示我们文件test1.txt被 ...
- MySQL基础(二):视图、触发器、函数、事务、存储过程
一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 视图和上一篇学到的临时表搜索类似. ...
- Django通用视图APIView和视图集ViewSet的介绍和使用(Django编程-1)
1.APIView DRF框架的视图的基类是 APIView APIView的基本使用和View类似 Django默认的View请求对象是 HttpRequest,REST framework 的请求 ...
- sql bak还原到新数据库
1 创建新数据库 TestDB 2 使用语句 use master restore database [TestDB] from disk = 'D:\SqlDataBak\SanJu\SanJu ...
- MySQL5.7 的编译安装
转: 5.7的安装: https://www.insp.top/article/make-install-mysql-5-7 5.6的安装: https://www.chenyudong.com/ar ...
- 牛客网-湘潭大学校赛重现H题 (线段树 染色问题)
链接:https://www.nowcoder.com/acm/contest/105/H来源:牛客网 n个桶按顺序排列,我们用1~n给桶标号.有两种操作: 1 l r c 区间[l,r]中的每个桶中 ...
- Single VIP LLB and SLB config
Single VIP LLB and SLB config >>>>>>>>>>>>>>>>>&g ...
- MT【87】迭代画图
评:此类题考场上就是取$n=1,2,3$找规律.