Bagaimana untuk Mendapatkan Imej sebagai Gumpalan dengan Kaedah ajax jQuery?

Mendapatkan Imej sebagai Gumpalan dengan Kaedah ajax jQuery

Cabaran

Mendapatkan semula imej sebagai gumpalan tidak disokong secara asli oleh ajax jQuery kaedah, membawa kepada ketidakpadanan jenis data dan imej rosak semasa muat naik.

Penyelesaian: XMLHttpRequest Asli

Untuk mendapatkan semula imej sebagai gumpalan, gunakan XMLHttpRequest asli:

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();

Sokongan jQuery 3.0

Pada masa kini, adalah mungkin untuk mendapatkan gumpalan dengan jQuery 3.0:

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
    }
});

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Imej sebagai Gumpalan dengan Kaedah ajax jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!