[解決済み] jsonオブジェクトに画像ファイルを入れるには？

質問

ゲームソフトのデータベースを作っているのですが、ゲームソフトには名前、ジャンル、画像などの要素が含まれています。dbのjsonオブジェクトに画像を入れることは可能でしょうか？ もし可能でなければ、これを回避する方法はありますか？

どのように解決するのですか？

2つの方法が考えられますね。

1.

ファイルをファイルシステムの任意のディレクトリに格納する（例えば dir1 ) を作成し、ファイルごとにユニークな名前 (タイムスタンプでもよい) になるようにリネームします (たとえば xyz123.jpg ) そして、この名前をあるDataBaseに格納する。そして、JSONを生成する際にこのファイル名を取り出し、完全なURLを生成します（これは http://example.com/dir1/xyz123.png )をJSONに挿入する。

2.

Base64エンコーディング、基本的には任意のバイナリデータをASCIIテキストにエンコードする方法です。3バイトのデータにつき4文字で、さらに最後に少しパディングする可能性があります。基本的に、入力の各6ビットは64文字のアルファベットでエンコードされます。標準的なアルファベットは、A-Z、a-z、0-9、+、/で、=はパディング文字として使用されます。URLセーフのバリエーションもあります。だから、このアプローチは、あなたがそれを格納しながら、MongoDBに直接画像を置くことができます 画像をエンコードし、それを取得しながらデコード、それはそれ自身の欠点のいくつかを持っています。

• base64エンコーディングは、元のバイナリ表現よりもファイルサイズが約33%大きくなるため、より多くのデータが送信されることになります（これはモバイルネットワークでは例外的に苦痛となる可能性があります）。
• IE6、IE7では、データURIがサポートされていません。
• base64でエンコードされたデータは、バイナリデータより処理に時間がかかる可能性があります。

ソース

画像をDATA URIに変換する

A.) キャンバス

画像をImage-Objectに読み込み、canvasにペイントし、canvasをdataURLに変換して返します。

function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

使用方法

convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

対応する入力フォーマット image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) ファイルリーダー

XMLHttpRequestで画像をBLOBとして読み込み、FileReader APIでデータURLに変換する。

function convertFileToBase64viaFileReader(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();
}

この方法

• ブラウザのサポートがない
• は圧縮率が高い
• は、他のファイル形式でも動作します。

使用方法

convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

ソース