¿Cómo se coloca un archivo de imagen en un objeto json?

Puedo pensar en hacerlo de dos maneras:

1.

Almacenar el archivo en el sistema de archivos en cualquier directorio (digamos dir1 ) y cambiarle el nombre, lo que garantiza que el nombre sea único para cada archivo (puede ser una marca de tiempo) (por ejemplo, xyz123.jpg ), y luego almacenar este nombre en alguna base de datos. Luego, mientras genera el JSON, extrae este nombre de archivo y genera una URL completa (que será https://example.com/dir1/xyz123.png ) e insértelo en el JSON.

2.

Codificación Base 64, es básicamente una forma de codificar datos binarios arbitrarios en texto ASCII. Se necesitan 4 caracteres por 3 bytes de datos, más potencialmente un poco de relleno al final. Esencialmente, cada 6 bits de la entrada están codificados en un alfabeto de 64 caracteres. El alfabeto "estándar" usa A-Z, a-z, 0-9 y + y /, con =como carácter de relleno. Hay variantes seguras para URL. Entonces, este enfoque le permitirá colocar su imagen directamente en MongoDB, mientras la almacena. Codifique la imagen y decodifique mientras la recupera, tiene algunos inconvenientes:

• La codificación base64 hace que los archivos sean aproximadamente un 33 % más grandes que sus representaciones binarias originales, lo que significa más datos en el futuro (esto puede ser excepcionalmente doloroso en las redes móviles)
• Los URI de datos no son compatibles con IE6 o IE7.
• Es posible que los datos codificados en base64 tarden más en procesarse que los datos binarios.

Fuente

Conversión de imagen a URI DE DATOS

A.) Lienzo

Cargue la imagen en un objeto de imagen, píntela en un lienzo y vuelva a convertir el lienzo en una URL de datos.

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

Uso

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

Formatos de entrada admitidos image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx

B.) Lector de archivos

Cargue la imagen como blob a través de XMLHttpRequest y use la API de FileReader para convertirla en una URL de datos.

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

Este enfoque

• carece de compatibilidad con el navegador
• tiene mejor compresión
• también funciona para otros tipos de archivos.

Uso

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

Fuente