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

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

Barbara Streisand
Barbara Streisand原创
2024-11-12 13:36:02139浏览

How to Retrieve Images as Blobs Using jQuery's AJAX Method?

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

不直接支持使用 jQuery 的 AJAX 方法将图像检索为 Blob,因为可接受的数据类型不包括图像格式。这种不匹配通常会导致图像损坏。

要克服此限制,您可以使用本机 XMLHttpRequest 而不是 jQuery 的 AJAX 方法。这种方法允许您将responseType显式设置为“blob”:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    handler(this.response);
    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();

或者,使用 jQuery 版本 3,可以将图像检索为 blob:

jQuery.ajax({
  url: 'https://images.unsplash.com/...',
  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() {}
});

利用此方法,您可以高效地以 blob 形式检索图像,然后执行操作,例如通过 POST 请求将它们上传到另一台服务器。

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

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