Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
102
Help us understand the problem. What are the problem?

More than 1 year has 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化する方法などもある。

参考

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
102
Help us understand the problem. What are the problem?