jQuery と JavaScript を使用して画像を BLOB として取得する方法

jQuery を使用した BLOB としての画像の取得

前の質問では、POST リクエストで画像データを送信しようとしました。現在のアプローチでは、jQuery.ajax を使用して画像を取得していますが、データ型の不一致により破損した画像が発生しています。

制限された jQuery データ型

jQuery.ajaxはいくつかのデータ型をサポートしますが、画像は明示的に含まれません。したがって、jQuery だけを使用して画像に BLOB としてアクセスすることは現実的ではありません。

ネイティブ XMLHttpRequest ソリューション

この問題を解決するには、ネイティブ XMLHttpRequest を使用できます。次に例を示します。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        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 応答を受信するように構成し、Blob URL プロパティを使用して HTML 要素に画像を表示します。

jQuery 3 ソリューション

jQuery 3 では、新しいアプローチが次のとおりです。 available:

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

この例では、xhr 関数を使用して XMLHttpRequest オブジェクトを構成し、responseType を明示的に 'blob' に設定します。これにより、jQuery は画像を blob として取得し、画像要素に表示できるようになります。

以上がjQuery と JavaScript を使用して画像を BLOB として取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。