Como pegar largura e altura de imagem com JavaScript

Neste artigo você vai aprender a como pegar largura e altura de imagem com JavaScript, de uma maneira simples e eficaz

Fala programador(a), beleza? Bora aprender mais sobre manipulação de imagens com JavaScript!

Temos duas formas de obter a largura e a altura de uma imagem com JS

Podemos selecioná-la no DOM e utilizar as propriedades clientWidth e clientHeight

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Ou carregar uma imagem, que não precisa estar na tela, e com ajuda classe Image pegar os valores de width e height

Vamos ver os dois casos!

const img = new Image();

img.onload = function() {
  console.log(`width: ${this.width} - height: ${this.height}`)
}

img.src = 'https://images-na.ssl-images-amazon.com/images/I/814ZtMT9dxL.png';

Aqui pegamos uma imagem externa a partir de uma URL, e após o carregamento da mesma com a função onload

Conseguimos extrair sua altura e largura, com base nas propriedades utilizadas

Agora vejamos o segundo caso:

const img = document.getElementById('id_da_imagem'); 

const width = img.clientWidth;
const height = img.clientHeight;

Agora selecionamos uma imagem por id, você pode utilizar qualquer método de seleção de DOM

E depois acessamos sua altura com clientHeight e sua largura com clientWidth

Pronto! Temos agora duas possibilidades de obter as dimensões de uma imagem com JavaScript!

Agora basta escolher a abordagem que mais tem relação com o seu projeto, e aplicar a funcionalidade no seu código

Lembre-se também de alterar os valores propostos pelos valores reais, que o seu projeto contém

Conclusão

Neste artigo você viu como pegar largura e altura de imagem com JavaScript

Utilizamos duas abordagens distintas:

• Instanciando a classe Image com uma imagem externa;
• Resgatando uma imagem que está presente no DOM, e extraindo os valores;

Com as duas conseguimos ter a altura e a largura da figura

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!