LoginSignup
3
4

More than 5 years have passed since last update.

URLで指定されたファイルのバイナリデータをBase64でエンコードする

Last updated at Posted at 2016-03-14

やりたいこと

  • URLで指定されたファイルのバイナリデータをBase64でエンコードしたい
  • スマホのブラウザで動かしたい

やること

  1. ファイルをバイナリデータでダウンロードする
  2. ダウンロードしたバイナリデータをUnicode文字列に変換する
  3. Unicode文字列をBase64エンコードする

やりかた

ファイルをバイナリでダウンロードする

やりかたはいろいろあるようですが、XmlHttpRequestを使うのが一番楽なようです。
下記のやり方で読み込みが完了した後、var binaryDataの中に、ArrayBufferが取得されます。

function fetchImage( uri ) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.responseType = "arraybuffer";
  xhr.onload = function() {
    var binaryData = this.response;
  };
  xhr.send();
};

バイナリデータをUnicode文字列に変換する

Base64エンコードするために、バイナリデータを文字列に変換する必要があります。
1バイトにつき1文字のUnicode文字を生成します。
arrayBufferを操作するには、何らかのTypedArrayを使います。1バイトを1つの文字として扱いたいので、Uint8でよいでしょう。
StringfromCharCode()は、あるUnicode値を受け取り、文字(列)に変換することができます。

function getUnicodeString( arrayBuffer ) {
  var bytes = new Uint8Array( arrayBuffer );
  var binaryString = "";
  for( var i = 0; i < bytes.byteLength; i++ ) {
    binaryString += String.fromCharCode( bytes[ i ] );
  }
  return binaryString;
};

Unicode文字列をBase64に変換する

たいていのブラウザには、windowオブジェクトにbtoa()というメソッドが実装されています。
これを使うことで、Unicode文字列が簡単にBase64化できます。
ただし、注意したいのは、入力できるUnicodeの範囲は0~255までだということです。
本来、Unicodeは多くの文字列を扱うことができるため、255より大きなコードを持つ文字もありますが、そのような文字を含む文字列を渡した場合例外が発生します。
上でバイナリデータをUnicodeに変換しているとき、Uint8Arrayを使用しているのは、0~255までの文字コードで構成された文字列を取得したいからです。

function getBase64( string ) {
  return window.btoa( string );
}

最終的な実装

以下のようになります。

function main() {
  fetchImage( "hoge.png", function() {
    var unicode = getUnicodeString( this.response );
    var base64 = getBase64( unicode );
    printBase64( base64 )
  } );
}

function printBase64( base64 ) {
  console.log( base64 );
}

function fetchImage( uri, callback ) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.responseType = "arraybuffer";
  xhr.onload = callback;
  xhr.send();
};

function getUnicodeString( arrayBuffer ) {
  var bytes = new Uint8Array( arrayBuffer );
  var binaryString = "";
  for( var i = 0; i < bytes.byteLength; i++ ) {
    binaryString += String.fromCharCode( bytes[ i ] );
  }
  return binaryString;
};

function getBase64( string ) {
  return window.btoa( string );
}
3
4
0

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
  3. You can use dark theme
What you can do with signing up
3
4