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

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

jQuery の AJAX メソッドを使用して画像を BLOB として取得することは、受け入れられるデータ型として直接サポートされていません。画像形式は含まれません。この不一致により、画像が破損することがよくあります。

この制限を克服するには、jQuery の AJAX メソッドの代わりにネイティブ XMLHttpRequest を利用できます。このアプローチにより、responseType を明示的に 'blob' に設定できます:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    handler(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();

また、jQuery バージョン 3 では、画像を blob として取得できるようになります:

jQuery.ajax({
  url: 'https://images.unsplash.com/...',
  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() {}
});

これを利用するこのアプローチを使用すると、画像を BLOB として効率的に取得し、その後 POST リクエストで別のサーバーにアップロードするなどの操作を実行できます。

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