Cómo rotar una imagen con JavaScript

La rotación de la imagen se utiliza principalmente en algoritmos basados ​​en imágenes. Esta característica también se utiliza para establecer la alineación de una imagen, aplicar técnicas de reconocimiento de captcha y en caso de resolver acertijos basados ​​en imágenes. En JavaScript, puede realizar esta funcionalidad con la ayuda de funciones definidas por el usuario o usar alguna propiedad.

Este artículo le guiará sobre la rotación de una imagen con JavaScript.

Cómo rotar una imagen con JavaScript?

En JavaScript, la rotación de la imagen se lleva a cabo usando:

• documento.método QuerySelector ()
• documento.Método GetElementByID
• propiedad de origen transformado.

Ahora veremos cada uno de los enfoques mencionados uno por uno!

Método 1: Gire una imagen con JavaScript usando el documento.método QuerySelector ()

En JavaScript, el "documento.QuerySelector ()"El método recupera el primer elemento que coincide con un selector CSS. En nuestro escenario, utilizaremos el método para rotar una imagen seleccionada de acuerdo con los grados especificados. Para el propósito especificado, estableceremos el valor del "estilo.transformaciónM PROPIEDAD DE IMAGEN.

Eche un vistazo al ejemplo dado a continuación para comprender el concepto declarado.

Ejemplo

En primer lugar, asignaremos a la imagen seleccionada una identificación "img"Y especifique su fuente"SRC"En el cuerpo del archivo HTML:

A continuación, agregaremos un botón para rotar la imagen de tal manera que cuando se haga clic se llame al "ROTACION DE IMAGEN()Función "definida en el archivo JavaScript:

Rotar la imagen

En el archivo JavaScript, accederemos a la segunda imagen que debe rotarse utilizando su "girar"Id y girarlo"180"Grados. Esto se puede lograr estableciendo el valor del "estilo.transformar"Propiedad del elemento de imagen accedido:

const rotado = documento.getElementById ('Rotar');
girado.estilo.transform = 'Rotate (180deg)';

La salida del código anterior se mostrará de la siguiente manera:

Método 3: Gire una imagen con JavaScript utilizando la propiedad de origen transformado

Este método incluye el uso del "transformaciónPropiedad ", que es útil para establecer la orientación exacta de la imagen girada, como la parte superior izquierda, la parte inferior derecha.

Mire el ejemplo proporcionado para comprender el uso de la propiedad Transform-Origin para rotar una imagen.

Ejemplo

En primer lugar, acceda al elemento de imagen usando el documento.método getElementById () y pasar "girar"Como ID del elemento requerido:

const rotado = documento.getElementById ('Rotar');

Luego, gire la imagen de "180"Grados y ajustar su orientación como"abajo a la derecha"Usando la propiedad Transformorigin:

girar.estilo.transform = 'Rotate (180deg)';
girar.estilo.transformorigin = 'Bottom Right';

El código proporcionado mostrará la siguiente salida:

Hemos proporcionado los métodos más fáciles para rotar una imagen usando JavaScript.

Conclusión

Para rotar una imagen en JavaScript, puede usar el "documento.QuerySelector ()"Método, en caso de rotación manual", "documento.getElementById ()"Método para acceder al"identificación"De la imagen que se girará, y"transformación"Método de propiedad para especificar la orientación exacta de la imagen. Este artículo guió sobre el procedimiento de girar una imagen usando JavaScript.