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

Al fin luego de tanto batallar pudimos hallar el arreglo de este rompecabezas que agunos usuarios de nuestro espacio han tenido. Si tienes alguna información que compartir no dejes de dejar tu información.

Solución:

Se me ocurre hacerlo de dos formas:

1.

Almacenar el archivo en el sistema de archivos en cualquier directorio (digamos dir1) y renombrándolo, lo que garantiza que el nombre sea único para cada archivo (puede ser una marca de tiempo) (digamos 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á http://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 AZ, az, 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('http://bit.ly/18g0VNp', function(base64Img)
    // Base64DataURL
);

Formatos de entrada admitidosimage/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('http://bit.ly/18g0VNp', function(base64Img)
    // Base64DataURL
);

Fuente

El formato JSON solo puede contener esos tipos de valor:

• string
• número
• objeto
• array
• true
• false
• null

Una imagen es del tipo “binario” que no es ninguno de esos. Entonces no puedes directamente insertar una imagen en JSON. Lo que puede hacer es convertir la imagen en una representación textual que luego se puede usar como una imagen normal. string.

La forma más común de lograrlo es con lo que se llama base64. Básicamente, en lugar de codificarlo como 1 y 0s, utiliza un rango de 64 caracteres lo que hace que la representación textual sea más compacta. Entonces, por ejemplo, el número ’64’ en binario se representa como 1000000mientras que en base64 es simplemente un carácter: =.

Hay muchas formas de codificar tu imagen en base64 dependiendo de si quieres hacerlo en el navegador o no.

Tenga en cuenta que si está desarrollando una aplicación web, será mucho más eficiente almacenar imágenes por separado en forma binaria y almacenar rutas a esas imágenes en su JSON o en otro lugar. Eso también permite que el navegador de su cliente almacene en caché las imágenes.

Usar esquema de URL de datos: https://en.wikipedia.org/wiki/Data_URI_scheme

En este caso usas eso string directamente en html:

Sección de Reseñas y Valoraciones

Recuerda que te brindamos la opción de valorar este post si atinaste tu dilema justo a tiempo.

---

---

Utiliza Nuestro Buscador