Ajax请求二进制流图片Img

摘要： 最近遇到一个场景，就是做一个验证码，后台返回一张验证码，而且这个请求中带有唯一的id标识，前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的...

最近遇到一个场景，就是做一个验证码，后台返回一张验证码，而且这个请求中带有唯一的id标识，前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的src属性，就可以显示出图片，但是不能获取到id，所以就利用Ajax进行get请求获取图片得二进制流，然后渲染进Img标签然后append到dom中。

原生得Ajax请求

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();

jQuery的Ajax请求

因为jQuery的Ajax没有Blob数据类型的请求，所以在Github上有一个大牛封装了jQuery数据类型扩展插件，所以我们直接就拿来用

github地址：https://github.com/tachengshimengH/jquery-ajax-blob-arraybuffer

<script src="jquery-ajax-blob-arraybuffer.js"></script>

JS代码：

$.ajax({
    type: "GET",
    headers: {
        Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8'
    },
    dataType: 'blob',
    url: "https://api.lbtc.io/genvercode",
    success: function (data, status, res) {
        var reader = new window.FileReader();
        reader.readAsDataURL(data);
        reader.onloadend = function () {
            $("#code").attr('src', reader.result);
            $("#code").attr('data-uid', res.getResponseHeader('Content-Type').split(",")[1]);
        };
    }
})

HTML：

  <img id="code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAYCAIAAACDYM+5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVFhH7dAxAQAwEAOh+rcVY7Xwt4ME3jiTFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEDW2fYB7cJtnPXgYPQAAAAASUVORK5CYII=" alt="Verification code" >

img我引了一个灰色的占位图。