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. Razor - 标记简述

    详情请参考:http://www.runoob.com/aspnet/razor-intro.html 1.Razor 不是一种编程语言.它是服务器端的标记语言.基于服务器的代码(Visual Bas ...

  2. 对于beta发布的评论

    第一组:新蜂小组 题目:俄罗斯方块 评论:主体功能已经完成,可以流畅的进行游戏,看项目的完成度是最高的.他们不但把核心功能做出来了,界面也已基本完成. 第二组:Nice团队 题目:约跑APP(约吧) ...

  3. 600字让你读懂Git

    设想你现在位于 alpha/ 目录下,这里有一个文本文件 number.txt,里面的内容只有一个词:“first”. 现在执行 git init 将这个 alpha 文件夹初始化为 Git 仓库. ...

  4. 提升jmeter自身性能

    JMeter负载测试时使用GUI界面和较多的收集测试结果的监听器容易造成jmeter的性能瓶颈,远程测试时的控制台尤为明显.提升JMeter负载测试时性能的方法如下: 官方的解决办法:http://j ...

  5. javascript面向对象系列第五篇——拖拽的实现

    前面的话 在之前的博客中,拖拽的实现使用了面向过程的写法.本文将以面向对象的写法来实现拖拽 写法 <style> .test{height: 50px;width: 50px;backgr ...

  6. (转)远程连接webservice遇到无法访问的问题解决办法

    原帖:http://stu-xu.i.sohu.com/blog/view/170429191.htm 如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求” ...

  7. 「NOI2018」你的名字

    「NOI2018」你的名字 题目描述 小A 被选为了\(ION2018\) 的出题人,他精心准备了一道质量十分高的题目,且已经 把除了题目命名以外的工作都做好了. 由于\(ION\) 已经举办了很多届 ...

  8. 【BZOJ1484】[HNOI2009]通往城堡之路 (贪心)

    [BZOJ1484][HNOI2009]通往城堡之路 (贪心) 题面 BZOJ 洛谷 题解 我大概是不会的. 大概是,首先把所有的人全部弄成最低的值,再一次次拔高一个后缀. 其他的全是抄的,百度随便找 ...

  9. 洛谷P4198 楼房重建

    题意:给定序列,每次修改一个值,求前缀最大值的个数. 解:线段树经典应用. 每个节点维护最大值和该区间前缀最大值个数. 发现我们不用下传标记,只需要合并区间. 需要实现一个函数int ask([l r ...

  10. jedisClient操作redis实现增删改查功能

    这个集群环境下和单机环境下: package com.taotao.sso.dao.impl; import org.springframework.beans.factory.annotation. ...