ajax请求二进制流图片并渲染到html中img标签
来源:互联网 发布:位面淘宝txt下载 编辑:程序博客网 时间:2024/06/11 01:28
说明
后台返回图片二进制流,需要使用get请求获取返回结果,并且将返回的二进制流以图片形式显示在页面img中。
但是日常显示图片都诸如这种形式:
<img src="图片路径、地址" alt="" />
以上需求不能将后端地址直接填入src(原因是需要获取图片请求的headers中字段)
问题
后端返回图片验证码,返回验证码的请求中的headers有一个Captcha-ETag:caf9f71eb9f511e78e41020563146d69,登录请求带上它用来做验证码校验。
所以,只能在get请求获取,不能直接用直接img填写图片地址的方法。
解决
几个关键点:
- responseType
注意那个blob就是这种方案需要的responseType
- createObjectURL
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
objectURL = URL.createObjectURL(blob);
- revokeObjectURL
在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
window.URL.revokeObjectURL(objectURL);
createObjectURL()方法,是接收一个文件的引用返回一个URL对象。这是通知浏览器来创建和管理一个URL来加载文件。 revokeObjectURL()方法,则是销毁创建的URL,有效果释放内存。当然,所有的URL对象将在浏览器重新载入时全部被销毁,也有助于释放它们占用的内存。
最后demo:
URL 变量是原生浏览器对象的一个引用,假设浏览器支持URL对象,URL通过file创建一个对象赋值给imageUrl变量。 元素的onload 事件触发后将销毁URL 对象(一分钟内),接着,给src属性赋值后将追加到页面上(你也可以使用一个页面上已有的元素的)。
要及时销毁URL对象,除非你有多个file需要使用,所以图片加载完销毁它是最佳内存释放时机。
var xmlhttp;xmlhttp=new XMLHttpRequest();xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);xmlhttp.responseType = "blob";xmlhttp.onload = function(){ console.log(this); if (this.status == 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }}xmlhttp.send();
浏览器显示:
<img src="blob:null/bccc301d-f2cd-4871-9349-daaac181d722">
leason | 博客
阅读全文
1 0
- ajax请求二进制流图片并渲染到html中img标签
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据
- iOS原生如何加载HTML中img标签的图片
- angularjs请求数据解析并渲染到表格中(天气预报)
- HTML+CSS基础 img标签title属性 鼠标移动到图片上时显示文字
- 使用ajax异步请求数据,并展示在html中
- HTML中Img标签的技巧
- HTML中img标签及相关属性
- html中<img>标签的路径问题
- HTML:img标签usemap,一个图片中添加多个链接
- HTML:img标签usemap,一个图片中添加多个链接
- java如何用正则解析HTML中img标签里图片的路径
- html<img>标签中src=“图片路径”,怎么用变量替换路径
- html中img标签显示图片属性写法与background差异
- C#将图片字节流转为Base64直接放入html的img标签src属性中
- textview显示HTML中img的图片
- java8新特性 Lambda表达式详解
- Photoshop-设计导航
- Android删除手机本地图片并同步到本地图片媒体库
- mysql 存储过程、游标及逐行处理的配合使用
- BZOJ 1673: [Usaco2005 Dec]Scales 天平 启发式搜索
- ajax请求二进制流图片并渲染到html中img标签
- 《深入理解java虚拟机》学习笔记(5)--虚拟机字节码执行引擎
- shiro讲解之 SpringMVC 集成Shiro
- 教大家如何快速又简单的区分单模与多模光纤收发器
- VS2013封装DLL时出现LINK2019无法解析的外部符号错误
- 【python】python数据结构(七)——排序:快速排序
- 01_RxJava操作符示例代码
- Android Context完全解析
- IO模型(1)