home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีตั้งค่าความสว่างและคอนทราสต์ของรูปภาพด้วย JavaScript

ใช้ CSS Filter property ผ่าน JavaScript โดย brightness() สำหรับความสว่าง และ contrast() สำหรับคอนทราสต์ ค่าปกติคือ 100% (หรือ 1)

ตัวอย่าง

<!DOCTYPE html>
<html>
  <body>
    <p>Click below to change the brightness and contrast of the image.</p>
    <button onclick="display()">Edit Image</button><br><br>
    <img id="myID" src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="Tutorials Library" width="320" height="320">
    <script>
      function display() {
        document.getElementById("myID").style.filter = "brightness(50%)";
        document.getElementById("myID").style.filter = "contrast(50%)";
      }
    </script>
  </body>
</html>

หมายเหตุ: ตัวอย่างนี้จะทับค่า filter ครั้งที่สอง ให้รวมในบรรทัดเดียว: filter: brightness(50%) contrast(50%)