Hvordan rotere et bilde med JavaScript

Bildrotasjon brukes først og fremst i bildebaserte algoritmer. Denne funksjonen brukes også til å stille inn justering av et bilde, bruke Captcha-gjenkjennelsesteknikker, og i tilfelle å løse bildebaserte gåter. I JavaScript kan du utføre denne funksjonaliteten ved hjelp av brukerdefinerte funksjoner eller bruke noen eiendommer.

Denne oppskrivningen vil guide deg om å rotere et bilde med JavaScript.

Hvordan rotere et bilde med JavaScript?

I JavaScript blir bildrotasjon utført ved hjelp av:

• dokument.QuerySelector () -metode
• dokument.getElementById -metoden
• Eiendom for transformasjon-opprinnelse.

Vi vil nå sjekke ut hver av de nevnte tilnærmingene en etter en!

Metode 1: Drei et bilde med JavaScript ved hjelp av dokument.QuerySelector () -metode

I JavaScript, "dokument.QuerySelector ()”Metode henter det første elementet som samsvarer med en CSS -velger. I vårt scenario vil vi bruke metoden for å rotere et valgt bilde i henhold til de spesifiserte grader. For det spesifiserte formålet vil vi sette verdien av "stil.transforM Image's Property.

Ta en titt på det undergitte eksemplet for å forstå det uttalte konseptet.

Eksempel

Først av alt vil vi tilordne det valgte bildet en ID “img”Og spesifisere kilden”src”I kroppen til HTML -filen:

Deretter vil vi legge til en knapp for å rotere bildet på en slik måte at når det klikkes, vil den ringe "Imagarotation ()”Funksjon definert i JavaScript -filen:

Roter bildet

I JavaScript -filen får vi tilgang til det andre bildet som må roteres ved hjelp av "rotere”Id og roter det”180”Grader. Dette kan oppnås ved å sette verdien av "stil.forvandle”Eiendom til det tilgjengelige bildeelementet:

const rotert = dokument.getElementById ('roter');
rotert.stil.transform = 'roter (180deg)';

Utgangen fra ovennevnte kode vises som følger:

Metode 3: Drei et bilde med JavaScript ved hjelp av egenskap av transformasjon-opprinnelse

Denne metoden inkluderer bruk av "Transform-origin”Eiendom, som er nyttig for å sette den nøyaktige orienteringen av det roterte bildet, for eksempel øverst til venstre, nede til høyre.

Se på det medfølgende eksemplet for å forstå bruken av egenskapen Transform-Origin for å rotere et bilde.

Eksempel

Først får du tilgang til bildeelementet ved hjelp av dokumentet.getElementById () -metode og passere “rotere”Som en ID for det nødvendige elementet:

const rotert = dokument.getElementById ('roter');

Roter deretter bildet med "180”Grader og juster orienteringen som“Nede til høyre”Bruke transformorigin -egenskapen:

rotere.stil.transform = 'roter (180deg)';
rotere.stil.transformorigin = 'nede til høyre';

Den oppgitte koden vil vise følgende utdata:

Vi har gitt de enkleste metodene for å rotere et bilde ved hjelp av JavaScript.

Konklusjon

For å rotere et bilde i JavaScript, kan du bruke "dokument.QuerySelector ()”Metode, i tilfelle manuell rotasjon,”dokument.getElementById ()”Metode for tilgang til“id”Av bildet som skal roteres, og“Transform-origin”Eiendomsmetode for å spesifisere den nøyaktige orienteringen av bildet. Denne artikkelen ledet om prosedyren for å rotere et bilde ved hjelp av JavaScript.