关于图片验证码返回二进制流,进行转换为Web的相对路径

因为后台返回的本身就是一张二进制流的图片,所以设置img标签src 等于这个二进制流图片不是行的。
img标签想要显示图片,必须的一个图片相对的路径,而不是一张图片。

那么问题来了,我们如何进二进制流图片的转换呢?

我们可以利用Blob对象来进行转换

不多废话直接看栗子 :

var xhr = new XMLHttpRequest();
    xhr.responseType = "blob"; //因为后台返回一个图片,所以需要设置响应消息的对象为blob
    xhr.onreadystatechange = function() 
    {
        if(4 === xhr.readyState) 
        {
            if(200 === xhr.status) 
            {
                var blob = this.response; //返回的是一个blob对象
                var src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
                console.log(src);
                //src 就是一个可以显示图片的相对路径。因为window.URL.crateObjectURL(blob)已经进行了转换
            }
        }
    }
    xhr.open("get", url, true); //默认值是true
    xhr.send(null);

url 是你请求验证码API接口的地址

你可能感兴趣的:(JavaScript)