Come si inserisce un file immagine in un oggetto json?

Posso pensare di farlo in due modi:

1.

Memorizzazione del file nel file system in qualsiasi directory (ad esempio dir1 ) e rinominandolo per garantire che il nome sia univoco per ogni file (potrebbe essere un timestamp) (ad esempio xyz123.jpg ), e quindi memorizzare questo nome in alcuni DataBase. Quindi, durante la generazione del JSON, estrai questo nome file e generi un URL completo (che sarà http://example.com/dir1/xyz123.png )e inserirlo nel JSON.

2.

Codifica Base 64, è fondamentalmente un modo per codificare dati binari arbitrari in testo ASCII. Occorrono 4 caratteri per 3 byte di dati, più potenzialmente un po' di riempimento alla fine. In sostanza, ogni 6 bit dell'input è codificato in un alfabeto di 64 caratteri. L'alfabeto "standard" utilizza A-Z, a-z, 0-9 e + e /, con =come carattere di riempimento. Esistono varianti sicure per gli URL. Quindi questo approccio ti consentirà di inserire la tua immagine direttamente nel MongoDB, mentre la memorizzi Codifica l'immagine e decodifica durante il recupero, ha alcuni dei suoi svantaggi:

• La codifica base64 aumenta le dimensioni dei file di circa il 33% rispetto alle loro rappresentazioni binarie originali, il che significa più dati lungo il cavo (questo potrebbe essere eccezionalmente doloroso sulle reti mobili)
• Gli URI di dati non sono supportati su IE6 o IE7.
• L'elaborazione dei dati codificati in base64 potrebbe richiedere più tempo rispetto ai dati binari.

Fonte

Conversione dell'immagine in URI DATI

A.) Tela

Carica l'immagine in un oggetto immagine, dipingila su una tela e riconverti la tela in un 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;
}

Utilizzo

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

Formati di input supportati image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) Lettore di file

Carica l'immagine come BLOB tramite XMLHttpRequest e utilizza l'API FileReader per convertirla in un URL di dati.

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

Questo approccio

• Manca il supporto del browser
• ha una migliore compressione
• funziona anche per altri tipi di file.

Utilizzo

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

Fonte