Como posso salvar um link (http://example.com/img.png
) no formato do arquivo, que neste caso é .png, utilizando JavaScript e salvando no local storage com $localStorage
do AngularJS?
1 Resposta
Baixando e salvando uma imagem
A seguinte função faz uma requisição para obter os dados da imagem, converte os dados recebidos para base 64 usando o FileReader
e então envia o resultado para uma função callback.
window.URL = window.URL || window.webkitURL;
function downloadImage(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var reader = new FileReader();
reader.onload = function (e) {
callback.call(callbank, e.target.result);
}
reader.readAsDataURL(this.response);
}
};
xhr.send();
}
Uma nota importante é que se a imagem estiver em outro domínio em relação ao script isso só vai funcionar se os cabeçalhos CORS estiverem ativados na imagem.
Em seguida, o código para salvar a imagem no LocalStorage
poderia ser assim:
downloadImage('https://s3-eu-west-1.amazonaws.com/kienzle.geschaeft/yellow_MarkerA.png', function(base64String) {
localStorage.setItem('imagem', base64String);
});
E o código para carregar a imagem para um elemento <img>
assim:
var img = document.createElement('img');
img.src = localStorage.getItem('imagem');
document.body.appendChild(img);
Exemplo funcional no JSFiddle
Nota: não funciona no editor do SO por restrições no local storage.
Nota 2: trechos de código baseados neste excelente artigo.
Salvando uma imagem existente na página atual
A função abaixo recupera o valor em base 64 de uma imagem na página atual:
function toBase64String(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
O código para salvar a imagem para o LocalStorage
é:
localStorage.setItem('minha-imagem', toBase64String(document.getElementById('original')));
E, finalmente, para restaurar a imagem:
var img = document.createElement('img');
img.src = localStorage.getItem('minha-imagem');
document.body.appendChild(img);
Este é o mesmo código anterior, com exceção que eu mudei o nome do elemento armazenado no LocalStorage
.
Exemplo funcional no JSFiddle
Nota: parte do código foi baseada nesta questão do SO.
-
Uma vez, estive estudando compressão de strings para localStorage, mas não cheguei a implementar nada. Provavlemente necessário num caso como este, mas aí não tenho certeza se o
toBase64String
faz alguma compressão. Relacionado: Storing compressed json data in local storage e javascript string compression with localStorage Commented 27/11/2015 às 10:33