タイトル通り、HTTPで取得した画像のデータをXMLHttpRequestで取得してそれを画面にレンダリングする方法

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("GET", "省略", true);
xhr.onload = function() {
  var data = new Uint8Array(this.response);
  var oURL = URL.createObjectURL(
    new Blob([data], { type: "image/png" })
  );

  var image = new Image();
  image.onload = function() {
    URL.revokeObjectURL(oURL);
  };
  image.src = oURL;

  $("#images").append(image);
};
xhr.send(null);

な感じな模様。responseTypeにbinaryとかソッチ系無かったっけと思いつつ、とりあえずarraybufferを指定して結果をArrayBufferで取る。でこれを指定しても良いんだけど、これも今後無くなるとかそういうログが出てるのでArrayBufferViewなAPIを使えと促されているのでそれに変換

んでBlobを作ってcreateObjectURLでblobURLを作る。でそれをImageでロードする。ロードしたらrevokeObjectURLで破棄するっていう感じかなー(APIの意味があってるかは微妙)

追記

XMLHttpRequest.responseType = "blob"にする事で余計な変換処理必要ないっぽい

var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", "省略", true);
xhr.onload = function() {
  var oURL = URL.createObjectURL(this.response);

  // 以下は上記同様なので省略
};
xhr.send(null);

だけどブラウザ依存が存在するのかも知れないけど、Chrome Extensionとかなら問題無い模様