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
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!