Come ruotare un'immagine con JavaScript

La rotazione dell'immagine è utilizzata principalmente negli algoritmi basati sull'immagine. Questa funzione viene anche utilizzata per impostare l'allineamento di un'immagine, applicare le tecniche di riconoscimento CAPTCHA e, in caso di risoluzione degli enigmi basati su immagini. In JavaScript, è possibile eseguire questa funzionalità con l'aiuto di funzioni definite dall'utente o utilizzando alcune proprietà.

Questo articolo ti guiderà sulla rotazione di un'immagine con JavaScript.

Come ruotare un'immagine con JavaScript?

In JavaScript, la rotazione dell'immagine viene eseguita usando:

• documento.Metodo QuerySelector ()
• documento.Metodo getElementByID
• Proprietà di origine trasformata.

Ora controlleremo ciascuno degli approcci menzionati uno per uno!

Metodo 1: ruotare un'immagine con JavaScript usando il documento.Metodo QuerySelector ()

In JavaScript, il "documento.QuerySelector ()"Il metodo recupera il primo elemento che corrisponde a un selettore CSS. Nel nostro scenario, utilizzeremo il metodo per ruotare un'immagine selezionata in base ai gradi specificati. Ai fini specificati, imposteremo il valore di "stile.transforM Proprietà dell'immagine.

Dai un'occhiata all'esempio di seguito per capire il concetto dichiarato.

Esempio

Prima di tutto, assegneremo l'immagine selezionata un ID "img"E specifica la sua fonte"src"Nel corpo del file HTML:

Successivamente, aggiungeremo un pulsante per ruotare l'immagine in modo tale che quando viene cliccato chiamerà "Immagerotazione ()"Funzione definita nel file JavaScript:

Ruota l'immagine

Nel file JavaScript, accederemo alla seconda immagine che deve essere ruotata usando la sua "ruotare"Id e ruotalo"180" gradi. Questo può essere ottenuto impostando il valore di "stile.trasformare"Proprietà dell'elemento immagine accessibile:

const ruotato = documento.getElementById ('rotato');
ruotato.stile.trasform = 'rote (180DEG)';

L'output del codice sopra verrà visualizzato come segue:

Metodo 3: ruotare un'immagine con JavaScript usando la proprietà Transform-Origin

Questo metodo include l'uso del "Transform-origin"Proprietà, utile per impostare l'esatto orientamento dell'immagine ruotata come in alto a sinistra, in basso a destra.

Guarda l'esempio fornito per comprendere l'uso della proprietà di origine trasformata per la rotazione di un'immagine.

Esempio

In primo luogo, accedi all'elemento immagine utilizzando il documento.metodo e pass e pass "ruotare"Come ID dell'elemento richiesto:

const ruotato = documento.getElementById ('rotato');

Quindi, ruota l'immagine di “180"Gradi e regola il suo orientamento come"in basso a destra"Utilizzando la proprietà Transforingorigin:

ruotare.stile.trasform = 'rote (180DEG)';
ruotare.stile.trasformorigin = 'in basso a destra';

Il codice fornito mostrerà il seguente output:

Abbiamo fornito i metodi più semplici per ruotare un'immagine usando JavaScript.

Conclusione

Per ruotare un'immagine in JavaScript, puoi usare il "documento.QuerySelector ()"Metodo, in caso di rotazione manuale,"documento.getElementById ()Metodo "per accedere al"id"Dell'immagine da ruotare e"Transform-origin"Metodo della proprietà per specificare l'esatto orientamento dell'immagine. Questo articolo ha guidato la procedura di rotazione di un'immagine usando JavaScript.