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

やりたいこと

• 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でよいでしょう。
StringのfromCharCode()は、ある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 );
}