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) ,并且显示二进制流图片的更多相关文章

  1. 关于让simulink中display组件显示二进制的方法

    关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...

  2. Java基础:IO流之字节流和字符流

    1. 流的概念 流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等. 一个流,必有源端和目的端 ...

  3. IO流总结---- 字节流 ,字符流, 序列化 ,数据操作流,打印流 , Properties 集合

    笔记内容: 什么是流 字节流 字符流 序列化 数据操作流(操作基本数据类型的流)DataInputStream 打印流 Properties 集合 什么是流: 流是个抽象的概念,是对输入输出设备的抽象 ...

  4. IO流(字节流,字符流)

    一,概述 IO流(input output):用来处理设备之间的数据. Java对数据的操作是通过流的对象. Java用于操作流的对象都在IO包中. 流是一组有顺序的,有起点和终点的字节集合,是对数据 ...

  5. 今天谈谈流,什么是IO流?

    无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...

  6. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  7. JavaSE学习笔记(14)---File类和IO流(字节流和字符流)

    JavaSE学习笔记(14)---File类和IO流(字节流和字符流) File类 概述 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 构造方 ...

  8. 09、IO流—File类与IO流

    目录 一.File类 基本认识 实用方法 获取功能 重命名功能(包含剪切) 判断功能 创建.删除文件 实际小案例 二.IO流 1.认识IO流 2.IO流基类介绍 字节流基类介绍 字符流基类介绍 三.节 ...

  9. .net学习之集合、foreach原理、Hashtable、Path类、File类、Directory类、文件流FileStream类、压缩流GZipStream、拷贝大文件、序列化和反序列化

    1.集合(1)ArrayList内部存储数据的是一个object数组,创建这个类的对象的时候,这个对象里的数组的长度为0(2)调用Add方法加元素的时候,如果第一次增加元神,就会将数组的长度变为4往里 ...

  10. java 笔记(4) —— java I/O 流、字节流、字符流

    Java中使用流来处理程序的输入和输出操作,流是一个抽象的概念,封装了程序数据于输入输出设备交换的底层细节.JavaIO中又将流分为字节流和字符流,字节流主要用于处理诸如图像,音频视频等二进制格式数据 ...

随机推荐

  1. 课堂final发布

    项目组名:奋斗吧兄弟 小组成员:黄兴.李俞寰.栾骄阳.王东涵.杜桥 今天6个小组在课上进行了Final发布,以下是我的一些看法: 1.Nice团队的约跑app: 今天Nice团队给我的最突出的印象就是 ...

  2. Oracle 数据库执行 操作系统的命令

    1 Linux环境下面的处理 在sqlplus 里面 添加一个 ! 就可以执行 但是 因为Oracle 必须为非root用户 所以很多命令可能无法执行: 2. Windows 环境执行命令的方式 是在 ...

  3. c++/ boost 库常见错误及解决方法总结

    1. error LNK2019: 无法解析的外部符号 "class boost::system::error_category const & __cdecl boost::sys ...

  4. MT【84】夹逼定值

    分析:此类题还是比较常见的,左右都有不等式,中间夹着一个式子,我们可以找个$x$使得中间式子满足的条件显示出来. 类似的方法可以用在这道浙江高考文科压轴题上

  5. 【刷题】HDU 5883 The Best Path

    Problem Description Alice is planning her travel route in a beautiful valley. In this valley, there ...

  6. 【BZOJ1017】[JSOI2008]魔兽地图(动态规划)

    [BZOJ1017][JSOI2008]魔兽地图(动态规划) 题面 BZOJ 洛谷 题解 状态设一下,\(f[i][j][k]\)表示第\(i\)个物品,有\(j\)个用于合成,总花费为\(k\)的最 ...

  7. web入门之十 JS高级编程基础

    学习内容 JavaScript函数 JavaScript类和对象 解析JSON数据 能力目标 深入了解JavaScript函数 熟悉JavaScript面向对象编程 熟练进行JSON数据解析 本章简介 ...

  8. POJ 3268 Silver Cow Party (最短路径)

    POJ 3268 Silver Cow Party (最短路径) Description One cow from each of N farms (1 ≤ N ≤ 1000) convenientl ...

  9. [收藏]:[算法]LRU和LFU的区别

    LRU和LFU是不同的! LRU是最近最少使用页面置换算法(Least Recently Used),也就是首先淘汰最长时间未被使用的页面! LFU是最近最不常用页面置换算法(Least Freque ...

  10. Java中如何遍历Map对象

    方法一:使用map.entrySet()来遍历.这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要的时候使用. Map<String,String> map = new Ha ...