前端页面获取图片后展示问题

之前遇到图片加载，都是取到图片的url地址之后直接赋值到img的src属性即可；有需要验证token之类的，直接在url后面添加参数，如 ?token=***，也能够正常加载。但是，当token需要设置在Request Headers里，又需要如何处理呢？

获取图片

这里用获取本地图片来做演示：

function getImage(){
    return new Promise(function(resolve,reject){
        var request = new XMLHttpRequest()
        request.onreadystatechange = function (e) {
            if (e.target.readyState === 4) {
                resolve(e.target.response)
            }
        }
        request.open('get', 't1.jpeg')  //open之前添加监听事件
        request.setRequestHeader('userToken','****')  //假设这里需要token
        request.send()
    })
}

async function request() {
    let res = await getImage()
    console.log(res)
}

request()

可以在控制台里看到，此处获取到的是一堆乱码的二进制字节流：

response

显然这些‘乱码’无法像base64编码一样直接赋值给src来使用。

显示图片

查阅网上的资料，找到对应的解决方法：

1.设置responseType = 'blob'

2.利用URL.createObjectURL来生成DOMString

修改后的代码如下：

function getImage(){
    return new Promise(function(resolve,reject){
        var request = new XMLHttpRequest()
        request.onreadystatechange = function (e) {
            if (e.target.readyState === 4) {
                resolve(e.target.response)
            }
        }
        request.open('get', 't1.jpeg')  //open之前添加监听事件
        request.responseType = 'blob'
        request.setRequestHeader('userToken','****')  //假设这里需要token
        request.send()
    })
}

async function request() {
    let res = await getImage()
    console.log(res)
    let url = window.URL.createObjectURL(res)
    let img = new Image()
    img.src = url
    let box = document.getElementById('box')
    box.appendChild(img)
}

request()

然后可以在页面中看到加载的图片，如下图：

加载后的图片

及图片的src的值为：

src

此时查看到请求返回的内容为Bolb对象。

responseType

responseType是什么含义呢？是否可以设置为其它值呢？

XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。

responseType有以下几种类型值：

• text,一个以 DOMString 对象表示的文本,默认值。

• '',空字符串时，同默认类型text

• document，一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型
  

  document

• blob,包含二进制数据的 Blob 对象
  

  arraybuffer

• arraybuffer,包含二进制数据的 JavaScript ArrayBuffer
  

  arraybuffer

• json,一个 JavaScript 对象,通过将接收到的数据类型视为 JSON 解析得到的

• ms-stream,下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer 支持

当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的

responseType类型值之间存在兼容性，除了默认的text类型外，若设置的类型和服务端返回的类型不兼容，则返回数据为null，如修改上面代码中的responseType的值：

request.responseType = 'json'  //或者是 'document'

在控制台打印出来的是null。

URL.createObjectUrl()

另一方面，URL.createObjectUrl()又有什么作用呢？

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

• 返回一个DOMString
• DOMStriing中包含参数对象的URL
• 该URL可用于指定源Object的内容

当传入的参数为File对象或Blob对象时，返回的内容如下：

URL.createObjectUrl()返回值

另：文档中虽然有提参数支持传入MediaSouce对象，但在测试过程中，却出现了报错：

navigator.getUserMedia({ "video": true }, function (stream) {
    url = window.URL.createObjectURL(stream)
}, function(){});

参数为MediaSouce对象时

实际可以通过设置video的srcObject属性为MediaSouce来直接显示。

video.srcObject = stream
video.play()

补充

和createObjectUrl对应的是revokeObjectUrl,用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
revokeObjectUrl可以在 sourceopen 被处理之后的任何时候调用。
当页面被关闭的时候，浏览器会自动释放掉URL对象。基于最佳性能和内存使用，最好在不需要的时候手动释放掉。
比如:

img.onload = function (){
    window.URL.revokeObjectUrl(url)
}

如果是某div的背景图，通过设置背景图地址为img.src，并在触发onload之后，设置setTimeout来进行释放操作。