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

说明

后台返回图片二进制流,需要使用get请求获取返回结果,并且将返回的二进制流以图片形式显示在页面img中。
但是日常显示图片都诸如这种形式:

<img src="图片路径、地址" alt="" />

以上需求不能将后端地址直接填入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();

浏览器显示:

<img src="blob:null/bccc301d-f2cd-4871-9349-daaac181d722">

leason | 博客

    原文作者:leason-love
    原文地址: https://blog.csdn.net/qq_29287973/article/details/78355558
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞