- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the brightness and contrast of an image with JavaScript?
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>
Advertisements