首頁 > web前端 > js教程 > 如何使用 jQuery 的 AJAX 方法以 Blob 形式檢索影像?

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

Barbara Streisand
發布: 2024-11-12 13:36:02
原創
197 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板