jsonオブジェクトに画像ファイルをどのように配置しますか？

私はそれを2つの方法で行うことを考えることができます：

1。

ファイルシステムの任意のディレクトリ（dir1など）にファイルを保存する）名前を変更して、名前がすべてのファイルで一意になるようにします（タイムスタンプの場合もあります）（たとえば、xyz123.jpg ）、この名前をデータベースに保存します。次に、JSONの生成中に、このファイル名をプルして完全なURL（http://example.com/dir1/xyz123.png）を生成します。）そしてそれをJSONに挿入します。

2。

Base 64エンコーディング、これは基本的に、ASCIIテキストで任意のバイナリデータをエンコードする方法です。 3バイトのデータごとに4文字が必要であり、最後に少しパディングされる可能性があります。基本的に、入力の各6ビットは64文字のアルファベットでエンコードされます。「標準」アルファベットは、A-Z、a-z、0-9、および+と/を使用し、パディング文字として=を使用します。 URLセーフなバリアントがあります。したがって、このアプローチでは、画像をMongoDBに直接配置し、保存しながら画像をエンコードし、フェッチしながらデコードすることができます。これには、いくつかの欠点があります。

base64エンコーディングでは、ファイルサイズが元のバイナリ表現よりも約33％大きくなります。これは、ネットワーク上のデータが増えることを意味します（これは、モバイルネットワークでは非常に苦痛になる可能性があります）
データURIはIE6またはIE7ではサポートされていません。
base64でエンコードされたデータは、バイナリデータよりも処理に時間がかかる場合があります。

ソース

画像をDATAURIに変換する

A。）キャンバス

画像をImage-Objectにロードし、キャンバスにペイントして、キャンバスを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。）FileReader

XMLHttpRequestを介して画像をblobとしてロードし、FileReaderAPIを使用してデータ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
});

ソース