如何使用 jQuery 和 JavaScript 以 Blob 形式检索图像？

使用 jQuery 将图像作为 Blob 检索

在上一个问题中，您尝试在 POST 请求中提交图像数据。您当前的方法涉及使用 jQuery.ajax 检索图像，但由于数据类型不匹配，您遇到了损坏的图像。

有限的 jQuery 数据类型

jQuery.ajax支持多种数据类型，但不明确包含图像。因此，单独使用 jQuery 将图像作为 blob 访问是不可行的。

原生 XMLHttpRequest 解决方案

要解决此问题，您可以使用原生 XMLHttpRequest。下面是一个示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

此脚本将创建一个 XMLHttpRequest 对象，将其配置为接收 Blob 响应，并使用 Blob URL 属性在 HTML 元素中显示图像。

jQuery 3 解决方案

在 jQuery 3 中，提供了一种新方法：

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType= 'blob'
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){
            
        }
    });

在此示例中，xhr 函数用于配置 XMLHttpRequest 对象，并且响应类型显式设置为“blob”。这允许 jQuery 以 blob 形式检索图像并将其显示在图像元素中。

以上是如何使用 jQuery 和 JavaScript 以 Blob 形式检索图像？的详细内容。更多信息请关注PHP中文网其他相关文章！