search
LoginSignup
103

More than 3 years have passed since last update.

posted at

updated at

Organization

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にblobarraybufferを指定してリクエストすることで画像のバイナリデータを受け取ることができる。

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化する方法などもある。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
103