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

最新推荐文章于 2025-06-20 11:45:36 发布

原创最新推荐文章于 2025-06-20 11:45:36 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种将后台返回的二进制流转换为可显示图片的方法。通过设置XMLHttpRequest对象的responseType属性为'blob'，并利用window.URL.createObjectURL方法生成图片的相对路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为后台返回的本身就是一张二进制流的图片，所以设置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);