Jak obrócić obraz za pomocą JavaScript

Obrót obrazu jest używany przede wszystkim w algorytmach opartych na obrazie. Ta funkcja służy również do ustawiania wyrównania obrazu, zastosowania technik rozpoznawania captcha oraz w przypadku rozwiązywania zagadek opartych na obrazie. W JavaScript możesz wykonać tę funkcję za pomocą funkcji zdefiniowanych przez użytkownika lub za pomocą jakiejś właściwości.

Ten zapis poprowadzi Cię o obracaniu obrazu za pomocą JavaScript.

Jak obrócić obraz za pomocą JavaScript?

W JavaScript rotacja obrazu jest przeprowadzana za pomocą:

• dokument.Metoda QuerySelector ()
• dokument.Metoda getelementById
• właściwość transformacji.

Teraz sprawdzimy każde z wymienionych podejść jeden po drugim!

Metoda 1: Obróć obraz za pomocą JavaScript za pomocą dokumentu.Metoda QuerySelector ()

W JavaScript „The„dokument.QuerySelelect ()”Metoda pobiera pierwszy element, który pasuje do selektora CSS. W naszym scenariuszu wykorzystamy metodę obracania wybranego obrazu zgodnie z określonymi stopniami. W określonym celu ustawimy wartość „styl.Transforwłaściwość obrazu.

Spójrz na podany przykład, aby zrozumieć określoną koncepcję.

Przykład

Przede wszystkim przypiszmy wybrany obraz identyfikator „img”I określ jego źródło„src„W treści pliku HTML:

Następnie dodamy przycisk, aby obrócić obraz w taki sposób, aby po kliknięciu wywoła „Imagerotation ()„Funkcja zdefiniowana w pliku JavaScript:

Obrócić obraz

W pliku JavaScript będziemy uzyskiwać dostęp do drugiego obrazu, który należy obrócić za pomocą jego „obracać się”Id i obracaj”180" stopni. Można to osiągnąć, ustalając wartość „styl.przekształcać„Właściwość dostępnego elementu obrazu:

const rotated = dokument.getElementById („rotate”);
obrócony.styl.transform = „rotacja (180Deg)”;

Wyjście powyższego kodu zostanie wyświetlone w następujący sposób:

Metoda 3: Obróć obraz za pomocą JavaScript przy użyciu właściwości transformacji originy

Ta metoda obejmuje zastosowanie „Transform-origin”Własność, która jest przydatna do ustawiania dokładnej orientacji obraconego obrazu, takiej jak lewica górna, dolna.

Spójrz na dostarczony przykład zrozumienia użycia właściwości transformacji do obracania obrazu.

Przykład

Po pierwsze, uzyskaj dostęp do elementu obrazu za pomocą dokumentu.GetElementById () Metoda i przejście „obracać się”Jako identyfikator wymaganego elementu:

const rotated = dokument.getElementById („rotate”);

Następnie obróć obraz przez „180”Stopnie i dostosowuj jego orientację jako„prawy dolny„Korzystanie z właściwości Transformorigin:

obracać się.styl.transform = „rotacja (180Deg)”;
obracać się.styl.Transformorigin = „Updomowy prawy”;

Dostarczany kod pokaże następujące dane wyjściowe:

Podaliśmy najłatwiejsze metody obracania obrazu za pomocą JavaScript.

Wniosek

Aby obrócić obraz w JavaScript, możesz użyć „dokument.QuerySelelect ()„Metoda, w przypadku rotacji ręcznej”, „dokument.getElementById ()„Metoda dostępu do„ID”Obrazu, który ma zostać obrócony i„Transform-origin„Metoda właściwości do określenia dokładnej orientacji obrazu. W tym artykule prowadzono na temat procedury obracania obrazu za pomocą JavaScript.