画像ファイルをBase64に変換してパスやファイル名を隠蔽する方法

Webサイトに画像（イメージ）を表示するときに、パスが知られたくないときがある。
例えば、ガチャ的な感じでランダムに画像を表示するときや、ゲームをクリアしないと画像が見れないようにしたいときなど。
こういった場合、普通に<img src="./hoge/fuga/piyo.png" />のように書いているとパスやファイル名がバレてしまい、他の画像を探し出すこともできてしまう。

そこで今回は画像ファイルをBase64に変換して、パスやファイル名をわからないようにさせる。

そもそも Base64 って？

BASE64とは、バイナリデータを一定の規則に基づいてテキスト（文字）データに置き換える変換方式の一つで、64種類の英数字のみを用いてデータを表現する方式。
BASE64とは - IT用語辞典

簡単にいうと画像ファイルを英数字であらわそうという方式。

画像ファイルをBase64に変換する

画像ファイルをBase64に変換するには、Canvasを使う方法と、FileReaderを使う方法の2種類がある。

Canvasを画像使ってBase64に変換する

var imageToBase64viaCanvas = function (url, callback, format) {
  var image = new Image();
  image.onload = function () {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.height = this.height;
    canvas.width  = this.width;
    context.drawImage(this, 0, 0);

    callback(canvas.toDataURL(format));
  };
  
  image.src = url;
};

var callback = function (data) { console.log(data); };
imageToBase64viaCanvas ('./hoge/fuga/piyo.png', callback, 'data:image/png;');

FileReaderを画像使ってBase64に変換する

var imageToBase64viaFileReader = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader  = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
};

var callback = function (data) { console.log(data); };
imageToBase64viaFileReader ('./hoge/fuga/piyo.png', callback);

※ jsFiddle内のロゴをサンプルで使っているのでSame-Origin Policyの影響で画像が表示されないので、直接jsFiddleでご確認ください。

注意

この方法でパスやファイル名を隠蔽するといっているが、実際は完全に隠蔽することができない。（jsファイルにパスも書かれてるし））
だから、完全にURIを隠蔽したいなら、APIのレスポンスにbase64に変換した文字列を含めてもらうのが一番安全。

参考サイト

• canvas 要素 - HTML | MDN
• FileReader - Web API インターフェイス | MDN

以上

written by @bc_rikko