html get请求 图片 重复,ajax请求二进制流图片并渲染到html中img标签

说明

后台返回图片二进制流，需要使用get请求获取返回结果，并且将返回的二进制流以图片形式显示在页面img中。

但是日常显示图片都诸如这种形式：

以上需求不能将后端地址直接填入src(原因是需要获取图片请求的headers中字段)

问题

后端返回图片验证码，返回验证码的请求中的headers有一个Captcha-ETag:caf9f71eb9f511e78e41020563146d69，登录请求带上它用来做验证码校验。

所以，只能在get请求获取，不能直接用直接img填写图片地址的方法。

解决

几个关键点：

- responseType

设置值

返回类型

“”

DOMString (this is the default value)

“arraybuffer”

ArrayBuffer

“blob”

Blob(二进制流)

“document”

Document

“json”

JSON

“text”

DOMString

注意那个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();

浏览器显示：

leason | 博客