9

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 1

7

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.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .