Bagaimanakah saya boleh mendapatkan semula imej sebagai Blob menggunakan kaedah ajax jQuery?

Menggunakan Kaedah ajax jQuery untuk Mengambil Imej sebagai Gumpalan

Latar Belakang:
Seperti yang dibincangkan dalam soalan sebelumnya, terdapat keperluan untuk dapatkan semula imej menggunakan jQuery dan simpannya sebagai Blob untuk kegunaan seterusnya dalam permintaan POST. Walau bagaimanapun, dataTypes jQuery tidak menyebut imej secara eksplisit.

Masalah:
Kod semasa dalam CoffeeScript (dan setara dengan JavaScriptnya) cuba mendapatkan semula imej menggunakan jQuery.get() dan simpannya dalam objek FormData sebagai Blob. Walau bagaimanapun, pendekatan ini mengakibatkan imej rosak disebabkan oleh ketidakpadanan dalam jenis data.

Soalan:
Adakah terdapat kaedah yang boleh dilaksanakan untuk mendapatkan semula imej sebagai Blob menggunakan kaedah ajax jQuery?

Jawapan:

Pendekatan 1: Menggunakan Native XMLHttpRequest

Tidak mungkin untuk mendapatkan semula imej sebagai Blob menggunakan kaedah ajax jQuery sahaja. Walau bagaimanapun, menggunakan XMLHttpRequest asli menyediakan penyelesaian. Berikut ialah coretan 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(); 

Dalam kod ini, objek XMLHttpRequest dicipta dan responseTypenya ditetapkan kepada 'blob'. Peristiwa onreadystatechange digunakan untuk mengendalikan respons dan mencipta URL objek untuk imej.

Pendekatan 2: Menggunakan jQuery 3

Walau bagaimanapun, ia patut disebut dengan jQuery versi 3, kini boleh mendapatkan semula imej sebagai Gumpalan. Berikut ialah coretan JavaScript yang disemak menggunakan jQuery 3:

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

Dalam coretan ini, kami menggunakan fungsi xhr() jQuery untuk mendapatkan akses kepada objek XMLHttpRequest dan menetapkan responseType kepada 'blob'. Ini membolehkan kami mendapatkan semula imej sebagai Blob dan menggunakannya seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mendapatkan semula imej sebagai Blob menggunakan kaedah ajax jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!