Posso pensar em fazer de duas maneiras:
1.
Armazenando o arquivo no sistema de arquivos em qualquer diretório (digamos
dir1 ) e renomeá-lo, o que garante que o nome seja exclusivo para cada arquivo (pode ser um carimbo de data/hora) (digamos xyz123.jpg ) e, em seguida, armazenando esse nome em algum banco de dados. Então, ao gerar o JSON, você extrai esse nome de arquivo e gera uma URL completa (que será http://example.com/dir1/xyz123.png ) e insira-o no JSON. 2.
Codificação de Base 64, é basicamente uma maneira de codificar dados binários arbitrários em texto ASCII. São necessários 4 caracteres por 3 bytes de dados, além de potencialmente um pouco de preenchimento no final. Essencialmente, cada 6 bits da entrada é codificado em um alfabeto de 64 caracteres. O alfabeto "padrão" usa A-Z, a-z, 0-9 e + e /, com =como caractere de preenchimento. Existem variantes seguras para URL. Portanto, essa abordagem permitirá que você coloque sua imagem diretamente no MongoDB, enquanto a armazena Codifica a imagem e decodifica enquanto a busca, tem algumas de suas desvantagens:
- A codificação base64 torna os tamanhos de arquivo aproximadamente 33% maiores do que suas representações binárias originais, o que significa mais dados no fio (isso pode ser excepcionalmente doloroso em redes móveis)
- URIs de dados não são compatíveis com IE6 ou IE7.
- os dados codificados em base64 podem demorar mais para serem processados do que os dados binários.
Fonte
Convertendo Imagem em URI DE DADOS
A.) Tela
Carregue a imagem em um Image-Object, pinte-a em uma tela e converta a tela de volta em um 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;
}
Uso
convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
Formatos de entrada compatíveis
image/png , image/jpeg , image/jpg , image/gif , image/bmp , image/tiff , image/x-icon , image/svg+xml , image/webp , image/xxx B.) Leitor de Arquivos
Carregue a imagem como blob via XMLHttpRequest e use a API FileReader para convertê-la em uma URL de dados.
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();
}
Esta abordagem
- falta de suporte ao navegador
- tem melhor compactação
- funciona também para outros tipos de arquivo.
Uso
convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
// Base64DataURL
});
Fonte
