Cách thiết lập độ sáng và độ tương phản của hình ảnh với JavaScript

Sử dụng bộ lọc CSS filter với các hàm brightness() và contrast() để điều chỉnh hình ảnh. Lưu ý: Gán filter nhiều lần sẽ ghi đè, cần kết hợp trong một khai báo.

Ví dụ minh họa (đã sửa lỗi ghi đè)

Nhấn nút để áp dụng cả brightness 50% VÀ contrast 50%:

<!DOCTYPE html>
<html>
<body>
  <p>Nhấn nút để thay đổi độ sáng và độ tương phản ảnh.</p>
  <button onclick="display()">Chỉnh sửa ảnh</button><br><br>
  <img id="myID" src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="Thư viện hướng dẫn" width="320" height="320">
  <script>
    function display() {
      // Kết hợp cả hai filter trong một khai báo
      document.getElementById("myID").style.filter = "brightness(50%) contrast(50%)";
    }
  </script>
</body>
</html>

Các hàm filter phổ biến khác

• grayscale(%) – Chuyển xám
• sepia(%) – Màu nâu cũ
• saturate(%) – Độ bão hòa
• hue-rotate(deg) – Xoay màu sắc
• blur(px) – Làm mờ
• invert(%) – Đảo ngược màu

Mẹo: Dùng transition: filter 0.3s để tạo hiệu ứng mượt mà khi thay đổi.