How to set the brightness and contrast of an image with JavaScript?

Javascript Web Development Front End Scripts

To set the brightness, use the brightness property and for contrast, use the contrast property.

Example

You can try to run the following code to use image filters with JavaScript −

<!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>

Sharon Christine

Published on 27-Feb-2018 12:18:48

Previous Page Print Page