AjaxでバイナリのJPEG画像データを受け取って表示する

クライアント側でAjaxでバイナリ画像を受け取り表示する。

画像のバイナリデータを返すAPI

テスト用にRailsで適当な画像ファイルを開いてそのまま返すAPIを作る。

capture_controller.rb

def load
  send_data binary, type: 'image/jpeg', disposition: 'inline'
end

def binary
  path = "#{Rails.root}/tmp/test.jpg"
  img = File.open(path, 'r')
  img.read
end

Ajaxで画像のバイナリデータを取得する

XMLHttpRequestを使う

バイナリファイルをAjaxで取得する際に注意する点
↑ここに書いていあることと同じところではまった。

jQueryの$.ajax()で普通に取得しようとするとすると、バイナリがテキストとして扱われてしまうためうまくいかない。

XMLHttpRequestでresponseTypeにblobかarraybufferを指定してリクエストすることで画像のバイナリデータを受け取ることができる。

var loadBinaryImage = function(path, cb, type) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200) {
      cb(this.response);
    }
  }
  xhr.open('GET', path);
  xhr.responseType = type || 'blob';
  xhr.send();
}

（ちなみに$.ajax()でバイナリを受け取る方法もあるみたい）

Blobで受け取る場合

responseType='blob'にして受け取り画像表示する方法。

1. URL.createObjectURL

URL.createObjectURLを使って画像表示する。

// URL.createObjectURL
var showImageByCreateObjectURL = function(blob) {
  var img = document.getElementById("imgTest");
  var url = window.URL || window.webkitURL;
  img.src = url.createObjectURL(blob);
}

1. FileReader

FileReaderでblobをDataURLとして読み、Imgタグのsrcに入れる。

// FileReader
var showImageByFileReader = function(blob) {
  var reader = new FileReader();
  reader.onloadend = function() {
    var img = document.getElementById("imgTest");
    img.src = reader.result;
  }
  // DataURLとして読み込む
  reader.readAsDataURL(blob);
}

ArrayBufferで受け取る場合

responseType='arraybuffer'にして受け取り画像表示する方法。

1. window.btoa

// window.btoa
var showImageByBtoa = function(ab) {
  var bytes = new Uint8Array(ab);
  var binaryData = "";
  for (var i = 0, len = bytes.byteLength; i < len; i++) {
    binaryData += String.fromCharCode(bytes[i]);
  }
  var img = document.getElementById("imgTest");
  img.src = "data:image/jpeg;base64," + window.btoa(binaryData);
}

1. blobに変換する

blobに変換することができるので、あとはURL.createObjectURLやFileReaderを使って表示可能。

var blob = new Blob([ ab ], { type: "image/jpeg" });

他にも、CanvasのtoDataURLを使う方法や自前でBase64化する方法などもある。

参考