Javascript - DOM Image Object

Para cada tag <img> em uma página HTML, um Image é criado. O objeto document possui a lista de imagens inseridas no documento.

 document.images  

Instâncias deste objeto podem ser inseridas no DOM para exibir imagens dinamicamente, assim como manipular seu estilo. Este post possui três técnicas que podem ser úteis em um projeto web:

- Obter largura e altura de uma imagem;
- Abrir imagens codificadas em base64;
- Abrir imagens pela url e obter a mesma codificada em base64;


Obtendo as dimensões de uma imagem via javascript

Para obter as dimensões de uma imagem, basta acessar suas propriedades width e height depois de esta estar completamente carregada. É bom sempre utilizar uma nova instância para que o estilo da página não modifique seu tamanho.

var foto = new Image();  
   
// Evento disparado assim que a imagem é completamente carregada  
foto.onload = function(){  
  console.log('Largura: ' + this.width);  
  console.log('Altura: ' + this.height);  
}  
  
foto.src = 'http://url-da-minha-foto.com/foto.jpg';  

Exibindo imagens codificadas em base64

Segundo uma descrição encontrada na wikipedia, Base64 é um método para codificação de dados para transferência na Internet (codificação MIME para transferência de conteúdo) . É utilizado frequentemente para transmitir dados binários por meios de transmissão que lidam apenas com texto, como por exemplo para enviar arquivos anexos por email.

Exibir imagens codificadas em base64 no browser é tão simples como abri-las por um link como pode ser visto nas linhas abaixo:

 var imagem = new Image();  
   
 var imageData = 'INSIRA AQUI SEU JPEG EM BASE64';  
    
 imagem.src = "data:image/jpeg;base64," + imageData;  
   
 minhaDiv.appendChild(imagem);  

Obtendo uma imagem em base64 através de sua url 

Abrir a url de imagem e salvá-la em base64 é uma tarefa que deve ser feita no lado do servidor. Mas, se por algum motivo for necessário implementar no lado do cliente (em uma aplicação Cordova/Phonegap por exemplo) esta técnica pode ser muito útil:

 canvas = document.createElement('canvas');  
   
 canvas.width = 800;  
   
 canvas.height = 600;  
   
 document.body.appendChild(canvas);  
   
 context = canvas.getContext('2d');  
   
 var image = new Image();  
   
 image.onload = function()  
 {  
      context.drawImage(image, 0, 0);  
   
      var base64 = canvas.toDataURL();  
   
      console.log(base64);       
 };  
   
 image.src = 'http://www.meu-dominio.com/assets/img/minha-imagem.png';