文档章节

使用XMLHttpRequest获取二进制数据显示图片

BarZu
 BarZu
发布于 2017/02/12 16:22
字数 181
阅读 55
收藏 1

需求场景

图片需要使用接口动态获取,请求接口时必须携带特定请求头

例:

接口地址为:http://img.cn/jpg/1

指定请求头:X-Requested-With=OpenAPIRequest

如果简单使用<img src='http://img.cn/jpg/1'>,没携带特定请求头,请求失败

解决方案

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function () {
  var blob
  if(xhr.readyState === 4){

    // 使用URL.createObjectURL将Blob对象转换为可访问的url地址
    var src = URL.createObjectURL(xhr.response)
    document.getElementById('img').src = src
  }
}

xhr.open('GET','http://img.cn/jpg/1', true)

// 设置响应数据格式为Blob对象
xhr.responseType = 'blob'

// 设置请求头
xhr.setRequestHeader('X-Requested-With', 'OpenAPIRequest')

xhr.send()

参考文献

© 著作权归作者所有

BarZu

BarZu

粉丝 50
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
细说Web API中的Blob

在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求。Blob,Binary Large Object的缩写,代表二进制类型的大对象。Blob的概念在一些数据库中有使用到,例如,MYSQL中的...

苍山沭河
2017/10/15
0
0
利用 FormData 对象发送 Key/Value 对的异步请求

使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法。然而,似乎很多人都忽略了这个闪光点,所以,我认为我要在这里指出...

一粒蛋在ali
2013/03/14
3.6K
1
多种上传图片的方法

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL 一个如下所示的发布框,经常会出现在各种微博、社区、论坛站点上,这类发布形式虽然...

筱飞
2016/06/07
114
0
(转载学习)XMLHttpRequest Level 2 使用指南

本文为转载学习 原作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequestlevel2.html 一、老版本的XMLHttpRequest对象 在介绍新版本之前,我们先回顾一下老版本的用...

heroShane
2014/01/24
36
0
Firefox:您可能还不知道的 46 项功能

新闻来源:yeeyan 自 Firefox 3 发布以来,我们一直在努力为 web 开发者提供新的功能。我们认为有必要写一篇博文,来确切列出那些我们知道的但大家可能还不知道的所有特性。这篇博文包含了我们...

红薯
2010/03/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
484
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
20
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
10
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
31
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
29
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部