Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

クライアント側で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化する方法などもある。

参考

http://qiita.com/tom_konda/items/484955b8332e0305ebc4

http://tech-sketch.jp/2013/01/javascript-1.html

http://www.qript.co.jp/blog/technique/215/

http://qiita.com/weal/items/1a2af81138cd8f49937d

http://stackoverflow.com/questions/32085474/how-to-put-png-binary-data-into-an-img-tag-and-display-it-as-an-image

http://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript

http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript

Yarimizu14
メモ
abeja
「ディープラーニング」を活用し、多様な業界、シーンにおけるビジネスの効率化・自動化を促進するベンチャー企業です。
https://abejainc.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away