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á 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 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('http://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('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
Fuente