Como obter dimensões da imagem em JavaScript

Frequentemente, encontramos situações em que queremos ajustar o tamanho das imagens para a estrutura e o ajuste adequados do Modelo Geral de Objetos do Documento (DOM) ao testar uma página da web ou um site. Por exemplo, no caso de ajustar o espaço a ser reservado para uma imagem específica, ele é carregado. Nesses casos, você pode utilizar os diferentes métodos JavaScript para obter dimensões de imagem em JavaScript.

Este artigo discutirá os métodos para obter dimensões da imagem em JavaScript.

Como obter dimensões da imagem em JavaScript?

Para obter dimensões da imagem em JavaScript, as seguintes abordagens podem ser utilizadas:

• ““largura" e "altura”Propriedades
• ““documento.QuerySelector ()”Método e“ONCLICKEvento
• ““addEventListener ()”Método

Passar pelos métodos discutidos um por um!

Método 1: Obtenha dimensões da imagem em JavaScript usando propriedades de largura e altura

O "altura" e "largura”Propriedades definem a altura e a largura do elemento especificado. Essas propriedades podem ser utilizadas juntamente com uma palavra -chave referente ao objeto atual para obter as dimensões da imagem.

Sintaxe

objeto.estilo.largura

Na sintaxe dada, a largura do objeto especificado será buscada.

objeto.estilo.altura

Aqui, a altura do objeto adicionado será buscada.

Exemplo

Primeiro, crie uma instância da instância HTMLIMAGEELEMEMENT usando o construtor Image () e acesse a imagem a ser acessada para dimensões, especificando seu caminho:

var dimensões = new Image ();
dimensões.src = 'modelo.jpg ';

Em seguida, aplique um evento Onload de modo que, quando a janela carrega, o “largura" e a "altura”Propriedades, juntamente com o objeto, acessam a altura e a largura da imagem específica e exibem -a via alerta:

dimensões.OnLoad = function ()
Alerta (este.largura + 'x' + this.altura);

A saída correspondente será a seguinte:

Método 2: Obtenha dimensões da imagem em JavaScript usando o documento.Método de QuerySelector () e Evento OnClick

O "documento.QuerySelector ()”O método recebe o primeiro elemento que corresponde a um seletor CSS e o“ONCLICK”O evento ocorre quando o usuário clica em um elemento. Esses métodos podem ser usados ​​em combinação para acessar o caminho da imagem e buscar sua dimensão no botão Clique.

Sintaxe

documento.QuerySelector (seletores CSS)

Aqui, "Seletores CSS”Representa um ou mais de um seletores CSS.

objeto.OnClick = imgsize () myscript;

Na sintaxe acima, “imgsize ()”Refere -se à função que será invocada quando um“ONCLICK”O evento é acionado.

Exemplo

No exemplo a seguir, criaremos um botão e anexaremos um evento OnClick a ele que invocaremos a função imgsize () quando acionado:

Obtenha dimensões da imagem

Agora, especifique o caminho da imagem no “" marcação:

Depois disso, defina uma função chamada “imgsize ()”. Em sua definição, acesse a imagem e busque sua largura e altura usando as propriedades de largura e altura, respectivamente, conforme discutido no método anterior, e exiba -a na caixa de alerta:

função imgsize ()
Var Dimensions = Documento.QuerySelector ("#dim");
var largura = dimensões.largura;
altura var = dimensões.altura;
alerta ("largura original =" + largura + "," + "altura original =" + altura);

Saída

Método 3: Obtenha dimensões da imagem em JavaScript usando o método addEventListener ()

O "addEventListener ()”Método anexa um manipulador de eventos a um documento. Este método pode ser implementado para acessar o botão e a imagem criada e aplicar um evento de clique para obter as dimensões da imagem no botão Clique.

Sintaxe

documento.addEventListener (clique, função)

Na sintaxe acima, “clique”Refere -se ao evento especificado e“função”É a função que será invocada, respectivamente.

Exemplo

Primeiro, crie um botão e especifique o caminho da imagem com um determinado valores de altura e largura:

Obtenha dimensões da imagem
= "tamanho">

---

style = "Altura: 300px; largura: 300px;"

Agora, acesse o botão criado e a imagem específica usando o “documento.QuerySelector ()”Método.

Então, adicione o evento “clique”No botão e aplique as propriedades naturais de largura e peso natural, a fim de registrar a largura e a altura originais de uma imagem:

Deixe btn = documento.QuerySelector ('Button');
Let Dimensions = Document.QuerySelector ('#size');
Deixe img = documento.QuerySelector ('img');
btn.addEventListener ('click', () =>
dimensões.INNERTEXT = 'Altura: $ img.NaturalHeight Largura: $ img.naturalWidth ';
);

Saída

Explicamos os métodos mais simples para obter dimensões da imagem em JavaScript.

Conclusão

Para obter dimensões da imagem em JavaScript, utilize o “largura" e "alturaPropriedades para criar um objeto e acessar a largura e a altura da imagem específica, respectivamente, o “documento.QuerySelector ()”Método e“ONCLICK”Evento para acessar o caminho da imagem e obter sua dimensão no botão Clique ou o“addEventListener ()”Método para acessar o botão e a imagem criados e aplicar um evento de clique para obter as dimensões da imagem correspondentes. Este blog explicou os métodos para obter dimensões da imagem em JavaScript.