Comment mettre un fichier image dans un objet json ?

Je peux penser à le faire de deux manières :

1.

Stockage du fichier dans le système de fichiers dans n'importe quel répertoire (disons dir1 ) et en le renommant, ce qui garantit que le nom est unique pour chaque fichier (peut être un horodatage) (disons xyz123.jpg ), puis en stockant ce nom dans une base de données. Ensuite, lors de la génération du JSON, vous extrayez ce nom de fichier et générez une URL complète (qui sera http://example.com/dir1/xyz123.png ) et insérez-le dans le JSON.

2.

Encodage Base 64, c'est essentiellement un moyen d'encoder des données binaires arbitraires dans du texte ASCII. Il faut 4 caractères pour 3 octets de données, plus potentiellement un peu de remplissage à la fin. Essentiellement, chaque 6 bits de l'entrée est codé dans un alphabet de 64 caractères. L'alphabet "standard" utilise A-Z, a-z, 0-9 et + et /, avec =comme caractère de remplissage. Il existe des variantes sécurisées pour les URL. Cette approche vous permettra donc de mettre votre image directement dans la MongoDB, tout en la stockant. Encodez l'image et décodez-la en la récupérant, elle a certains de ses propres inconvénients :

• L'encodage base64 augmente la taille des fichiers d'environ 33 % par rapport à leurs représentations binaires d'origine, ce qui signifie plus de données sur le fil (cela peut être extrêmement pénible sur les réseaux mobiles)
• Les URI de données ne sont pas pris en charge sur IE6 ou IE7.
• Les données encodées en base64 peuvent prendre plus de temps à traiter que les données binaires.

Source

Convertir l'image en URI de données

A.) Toile

Chargez l'image dans un objet image, peignez-la sur un canevas et reconvertissez le canevas en une URL de données.

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

Utilisation

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

Formats d'entrée pris en charge image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) Lecteur de fichiers

Chargez l'image en tant que blob via XMLHttpRequest et utilisez l'API FileReader pour la convertir en URL de données.

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

Cette approche

• manque de compatibilité avec les navigateurs
• a une meilleure compression
• fonctionne également pour d'autres types de fichiers.

Utilisation

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

Source