- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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>
Updated on 23-Jun-2020 12:36:37
- Related Questions & Answers
- Altering the brightness and contrast of an image using JavaFX and OpenCV
- PyTorch – Randomly change the brightness, contrast, saturation and hue of an image
- How to adjust the contrast of an image using contrast() function in Node Jimp?
- How to adjust the contrast of an image in PyTorch?
- How to adjust the brightness of an image in PyTorch?
- How to alter the contrast of an image using Java OpenCV library?
- How to alter the brightness of an image using Java OpenCV library?
- How to change the brightness of an image in OpenCV using C++?
- How to decrease the Brightness of an image in OpenCV using C++?
- JavaFX example to decrease the brightness of an image using OpenCV.
- How to alter the brightness of a grey scale image?
- How to set the size of the background image with JavaScript?
- How to set the widths of the image border with JavaScript?
- Adjusting the Image Contrast using CSS3
- How to set an image as the list-item marker with JavaScript?
Advertisements