如何通过ajax请求展示blob中的图片到html中

后台返回图片二进制流，需要使用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需要使用，所以图片加载完销毁它是最佳内存释放时机。

后台

	//附件详情
	@RequestMapping(path = "/sign/JzhSalvageInfo/findContentInfo/{jzhApplyId}", method = RequestMethod.GET)
	public String findjzhSqAccessContentInfo(@PathVariable Long jzhApplyId,HttpServletRequest request, HttpServletResponse response) {
		try {
			Map<String, Object> resultMap = new HashMap<String, Object>();
			List<JzhContent> jzhContentList = jzhContentService
					.findjzhContentInfo(jzhApplyId);
			OutputStream sout = response.getOutputStream();
			sout.write(jzhSqAccessContentList.get(0).getFiledata());
			sout.flush(); // 输入完毕,清除缓冲
			sout.close();
		} catch (Exception e) {
			
		}
		return null;
	}

前台

function showjzhSqAccessoriesInfo(jzhSqAccessoriesInfoId){
	debugger
	var url = _appPath+"/sign/JzhSalvageInfo/findjzhSqAccessContentInfo/"+jzhSqAccessoriesInfoId;
    imgFun(url , $("#rgPhotoImg"));
    $("#imgModal").modal("show");
}

function imgFun (url, img) {
    var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    //xhr.setRequestHeader("Authorization", 'Bearer ' + auth.token);
    xhr.onload = function () {
        console.log(this);
        if (this.status == 200) {
            var blob = this.response;
            $(img).load(function (e) {
                windowUrl.revokeObjectURL(img.src);
            }).attr("src", windowUrl.createObjectURL(blob));
        }
    }
    xhr.send();
}

html

<img src="" id="rgPhotoImg">