Neste artigo você vai aprender como pegar altura e largura de imagem com JavaScript, vem conferir como é simples!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Pegar a altura e largura de uma imagem que está no HTML é uma tarefa comum em desenvolvimento web.
Isso pode ser necessário para ajustar o tamanho de uma imagem de acordo com a resolução do dispositivo do usuário ou para realizar outras tarefas relacionadas à imagem.
Neste artigo, discutiremos várias maneiras de pegar a altura e largura de uma imagem que está no HTML com JavaScript.
Usando o método naturalWidth e naturalHeight
Uma maneira de pegar a altura e largura de uma imagem que está no HTML é usar os métodos naturalWidth e naturalHeight do objeto HTMLImageElement.
Esses métodos retornam a largura e altura naturais da imagem, sem levar em conta o redimensionamento que possa ocorrer em elementos HTML. Aqui está um exemplo de como usá-los:
<img id="imagem" src="caminho-da-imagem.jpg">
const image = document.getElementById('imagem');
image.onload = function() {
const height = this.naturalHeight;
const width = this.naturalWidth;
console.log(`A imagem tem ${height}px de altura e ${width}px de largura`);
}
Nesse exemplo, selecionamos o elemento img que contém a imagem usando o método getElementById() do objeto document.
Definimos a propriedade onload do elemento img para uma função que será executada quando a imagem for carregada.
Na função onload, pegamos a altura e largura da imagem usando os métodos naturalHeight e naturalWidth do elemento img.
Usando a propriedade clientWidth e clientHeight
Uma maneira mais simples de pegar a altura e largura de uma imagem que está no HTML é usar as propriedades clientWidth e clientHeight do elemento HTML que contém a imagem.
Essas propriedades retornam a altura e largura do elemento, incluindo o redimensionamento que possa ocorrer em CSS ou JavaScript.
Aqui está um exemplo de como usá-las:
<div id="container"> <img src="caminho-da-imagem.jpg"> </div>
const container = document.getElementById('container');
const image = container.getElementsByTagName('img')[0];
const height = container.clientHeight;
const width = container.clientWidth;
console.log(`O contêiner tem ${height}px de altura e ${width}px de largura`);
Nesse exemplo, selecionamos o elemento HTML que contém a imagem usando o método getElementById() do objeto document.
Em seguida, selecionamos o elemento img usando o método getElementsByTagName() do elemento HTML.
Em seguida, pegamos a altura e largura do contêiner usando as propriedades clientHeight e clientWidth do elemento HTML.
Usando o método getBoundingClientRect()
Outra maneira de pegar a altura e largura de uma imagem que está no HTML é usar o método getBoundingClientRect() do elemento HTML que contém a imagem.
Esse método retorna um objeto DOMRect que contém as coordenadas do retângulo que circunda o elemento, incluindo as coordenadas x, y, a largura e a altura do retângulo.
Aqui está um exemplo de como usá-lo:
<div id="container"> <img src="caminho-da-imagem.jpg"> </div>
const container = document.getElementById('container');
const image = container.getElementsByTagName('img')[0];
const rect = container.getBoundingClientRect();
const height = rect.height;
const width = rect.width;
console.log(`O contêiner tem ${height}px de altura e ${width}px de largura`);
Nesse exemplo, selecionamos o elemento HTML que contém a imagem usando o método getElementById() do objeto document.
Em seguida, selecionamos o elemento img usando o método getElementsByTagName() do elemento HTML.
Em seguida, pegamos o objeto DOMRect que contém as coordenadas do retângulo que circunda o elemento usando o método getBoundingClientRect() do elemento HTML.
Por fim, pegamos a altura e largura do retângulo usando as propriedades height e width do objeto DOMRect.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Pegar a altura e largura de uma imagem que está no HTML é uma tarefa essencial em desenvolvimento web.
Neste artigo, discutimos várias maneiras de pegar a altura e largura de uma imagem com JavaScript, incluindo o uso dos métodos naturalWidth e naturalHeight do objeto HTMLImageElement, as propriedades clientWidth e clientHeight do elemento HTML que contém a imagem e o método getBoundingClientRect() do elemento HTML que contém a imagem.
Cada método tem suas próprias vantagens e desvantagens, dependendo do contexto e da necessidade do desenvolvedor.
É importante escolher a solução mais adequada para cada caso e sempre considerar as implicações de desempenho do código.
Com essas técnicas, você poderá trabalhar com imagens de forma mais precisa e adaptativa em sua aplicação web.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!