Como girar uma imagem com javascript

A rotação da imagem é usada principalmente em algoritmos baseados em imagem. Esse recurso também é usado para definir o alinhamento de uma imagem, aplicar técnicas de reconhecimento de captcha e, no caso de resolver enigmas baseados em imagem. No JavaScript, você pode executar essa funcionalidade com a ajuda de funções definidas pelo usuário ou usando alguma propriedade.

Este artigo irá guiá-lo sobre girar uma imagem com javascript.

Como girar uma imagem com javascript?

No JavaScript, a rotação da imagem é realizada usando:

• documento.Método querySelector ()
• documento.getElementById Método
• Propriedade de Origin Transform.

Vamos agora verificar cada uma das abordagens mencionadas uma a uma!

Método 1: gire uma imagem com javascript usando o documento.Método querySelector ()

Em JavaScript, o “documento.QuerySelector ()”O método recupera o primeiro elemento que corresponde a um seletor CSS. Em nosso cenário, utilizaremos o método para girar uma imagem selecionada de acordo com os graus especificados. Para o propósito especificado, definiremos o valor do “estilo.transforPropriedade da M Image.

Dê uma olhada no exemplo abaixo para entender o conceito declarado.

Exemplo

Primeiro de tudo, atribuiremos à imagem selecionada um id “img”E especifique sua fonte“src”No corpo do arquivo html:

Em seguida, adicionaremos um botão para girar a imagem de tal maneira que, quando for clicada, ele chamará o “ImageroTation ()”Função definida no arquivo JavaScript:

Gire a imagem

No arquivo JavaScript, acessaremos a segunda imagem que precisa ser girada usando seu “girar"Id e gire"180”Graus. Isso pode ser alcançado definindo o valor do “estilo.transformar”Propriedade do elemento de imagem acessado:

const girar = documento.getElementById ('girate');
girado.estilo.transform = 'girate (180deg)';

A saída do código acima será exibida da seguinte forma:

Método 3: Gire uma imagem com JavaScript usando a propriedade Transform-Origin

Este método inclui o uso do “Origina de transformação".

Veja o exemplo fornecido para entender o uso da propriedade Transform-Origin para girar uma imagem.

Exemplo

Em primeiro lugar, acesse o elemento de imagem usando o documento.getElementById () método e passe “girar”Como um ID do elemento necessário:

const girar = documento.getElementById ('girate');

Então, gire a imagem por “180`` Graus e ajuste sua orientação como “canto inferior direito”Usando a propriedade TransformGin:

girar.estilo.transform = 'girate (180deg)';
girar.estilo.TransformOnGin = 'inferior direito';

O código fornecido mostrará a seguinte saída:

Fornecemos os métodos mais fáceis para girar uma imagem usando JavaScript.

Conclusão

Para girar uma imagem em JavaScript, você pode usar o “documento.QuerySelector ()”Método, em caso de rotação manual,“documento.getElementById ()”Método para acessar o“eu ia"Da imagem a ser girada e"Origina de transformação”Método da propriedade para especificar a orientação exata da imagem. Este artigo guiou sobre o procedimento de girar uma imagem usando JavaScript.