首页  >  文章  >  web前端  >  如何使用 jQuery 的 ajax 方法以 Blob 形式检索图像?

如何使用 jQuery 的 ajax 方法以 Blob 形式检索图像?

Barbara Streisand
Barbara Streisand原创
2024-11-11 08:53:02784浏览

How to Retrieve Images as Blobs with jQuery's ajax Method?

使用 jQuery 的 ajax 方法将图像检索为 Blob

挑战

jQuery 的 ajax 本身不支持将图像检索为 Blob方法,导致数据类型不匹配和图像损坏

解决方案:原生 XMLHttpRequest

要以 Blob 形式检索图像,请使用原生 XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // this.response contains the blob
        handler(this.response);
    }
};
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

jQuery 3.0支持

现在可以了使用 jQuery 3.0 检索 blob:

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() {
        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() {
        // Handle error
    }
});

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn