Hướng dẫn javascript rotate image - javascript xoay hình ảnh

Question

Tìm hiểu làm thế nào để xoay hình ảnh với JavaScript. Mã ví dụ bao gồm.

Nội dung chính Show

Xoay hình ảnh bằng một nút bấm
Làm thế nào để bạn xoay một đối tượng trong JavaScript?
Làm thế nào để bạn xoay trong hình ảnh?
Làm cách nào để xoay hình ảnh trong HTML?
Làm cách nào để xoay hình ảnh trong React JS?

Khi bạn cần xoay hình ảnh bằng JavaScript, bạn cần thêm kiểu transform: rotate(x) CSS vào phần tử hình ảnh bạn muốn xoay.

Ví dụ: hãy để nói rằng bạn có thẻ <img> sau trong dự án của mình:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript rotate images</title>
  </head>
  <body>
    <img id="img" src="https://via.placeholder.com/350x150.png" />
  </body>
</html>

Để xoay hình ảnh, bạn có thể chọn phần tử bằng document.querySelector('#img') và sau đó nối thuộc tính

document.querySelector("#img").style.transform = "rotate(90deg)";

0 vào phần tử. Thuộc tính

document.querySelector("#img").style.transform = "rotate(90deg)";

1 chấp nhận tham số góc tròn được đo bằng 360 độ.360 degrees.

Mã JavaScript sau đây sẽ xoay hình ảnh 90 độ:

document.querySelector("#img").style.transform = "rotate(90deg)";

Kiểu transform: rotate(x) sẽ được thêm vào thẻ HTML <img> của bạn như sau:

<body>
  <img
    id="img"
    src="https://via.placeholder.com/350x150.png"
    style="transform: rotate(90deg);"
  />
</body>

Nó tùy thuộc vào bạn có bao nhiêu độ bạn muốn xoay <img>. Để lật ngược hình ảnh, bạn có thể sử dụng thuộc tính

document.querySelector("#img").style.transform = "rotate(90deg)";

5:

document.querySelector("#img").style.transform = "rotate(360deg)";

Xoay hình ảnh bằng một nút bấm

Nếu bạn cần xoay hình ảnh khi nhấp vào nút, bạn có thể tạo chức năng JavaScript để xoay hình ảnh. Sau đó, bạn cần gán chức năng đó cho thuộc tính

document.querySelector("#img").style.transform = "rotate(90deg)";

6 của nút:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript rotate images</title>
  </head>
  <body>
    <img id="img" src="https://via.placeholder.com/350x150.png" />
    <button onClick="rotateImg()">Rotate Image</button>
    <script>
      function rotateImg() {
        document.querySelector("#img").style.transform = "rotate(90deg)";
      }
    </script>
  </body>
</html>

Bạn cũng có thể xoay thêm hình ảnh 90 độ mỗi khi nút được nhấp bằng cách đầu tiên tạo một biến giữ góc xoay.

Hãy xem ví dụ sau:

<body>
  <img id="img" src="https://via.placeholder.com/350x150.png" />
  <button onClick="rotateImg()">Rotate Image</button>
  <script>
    let rotation = 0;
    function rotateImg() {
      rotation += 90; // add 90 degrees, you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }
      document.querySelector("#img").style.transform = `rotate(${rotation}deg)`;
    }
  </script>
</body>

Cuối cùng, bạn có thể xoay hình ảnh ngược chiều kim đồng hồ bằng cách thêm một số âm thay vì dương. Mã sau đây cho thấy cách bạn có thể xoay hình ảnh -45 độ:

document.querySelector("#img").style.transform = "rotate(-45deg)";

Và đó là cách mà bạn có thể xoay hình ảnh bằng JavaScript. Hãy thoải mái sửa đổi mã khi bạn thấy phù hợp.

Làm thế nào để bạn xoay một đối tượng trong JavaScript?

Phương thức xoay () cho phép bạn xoay một đối tượng vẽ trên khung vẽ. Phương thức xoay () chấp nhận một góc xoay trong radian. Nếu góc dương, vòng quay theo chiều kim đồng hồ. Trong trường hợp góc là âm, vòng quay ngược chiều kim đồng hồ. allows you to rotate a drawing object on the canvas. The rotate() method accepts a rotation angle in radians. If the angle is positive, the rotation is clockwise. In case the angle is negative, the rotation is counterclockwise.