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

使用jQuery 的ajax 方法以Blob 形式檢索圖像

背景：
正如上一個問題中所討論的，需要使用jQuery 檢索影像並將其儲存為Blob 以供後續在POST 請求中使用。然而，jQuery 的資料類型沒有明確提及圖像。

問題：
CoffeeScript（及其JavaScript 等效項）中的當前程式碼嘗試使用jQuery.get() 擷取影像，並將其作為Blob 儲存在FormData 物件中。然而，由於資料類型不匹配，這種方法會導致影像損壞。

問題：
是否有一種可行的方法可以使用 jQuery 的 ajax 將影像檢索為 Blob方法？

答案：

方法1：使用原生XMLHttpRequest

無法將影像擷取為Blob 單獨使用使用方法的方法。然而，利用本機 XMLHttpRequest 提供了一個解決方案。下面是一個 JavaScript 片段：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof 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(); 

在此程式碼中，建立了一個 XMLHttpRequest 對象，並將其回應類型設為「blob」。 onreadystatechange 事件用於處理回應並為圖像建立物件 URL。

方法 2：使用 jQuery 3

但是，值得一提的是， jQuery 版本 3，現在可以以 Blob 形式檢索影像。以下是使用jQuery 3 修改後的JavaScript 程式碼區段：

$.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(){
        
    }
});

在此程式碼區段中，我們使用jQuery 的xhr() 函數來取得XMLHttpRequest 物件的存取權限，並將其回應類型設定為“blob”。這使我們能夠以 Blob 形式檢索影像並根據需要使用它。

以上是如何使用 jQuery 的 ajax 方法以 Blob 形式檢索影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！