jQuery の ajax メソッドを使用して画像を Blob として取得するにはどうすればよいですか?

jQuery の ajax メソッドを使用して画像を BLOB として取得する

背景:
前の質問で説明したように、次の必要があります。 jQuery を使用して画像を取得し、その後の POST リクエストで使用できるように、それを Blob として保存します。ただし、jQuery の dataType は画像について明示的に言及していません。

問題:
CoffeeScript (およびそれに相当する JavaScript) の現在のコードは、jQuery.get() と、jQuery.get() を使用して画像を取得しようとします。それを FormData オブジェクトに Blob として保存します。ただし、このアプローチでは、データ型の不一致により画像が破損します。

質問:
jQuery の ajax メソッドを使用して画像を Blob として取得する実現可能な方法はありますか?

答え:

アプローチ 1: ネイティブ XMLHttpRequest を使用する

を使用して画像を BLOB として取得することはできません。 jQueryのajaxメソッド単体。ただし、ネイティブ 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 オブジェクトが作成され、その responseType は「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 オブジェクトへのアクセスを取得し、そのresponseType を「blob」に設定します。これにより、画像を Blob として取得し、必要に応じて使用できるようになります。

以上がjQuery の ajax メソッドを使用して画像を Blob として取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。