HTML5 Canvas contrast filter

Question

How can i adjust the contrast of an image using HTML5 Canvas pixel manipulation capabilities ? I already succeeded in changing the brightness of the image quite easily, but contrast seems to be a little bit more complex.

Does anyone know of an algorithm i can follow or perhaps sample javascript code i could take ideas from ?

thanks in advance for any help regarding this issue.

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

Since you said you already adjusted the brightness and it sounds like all you need is the algorithm for contrast adjusting here's a thread for a C# method (Look at Update 2), the logic of the code is sound and will work in any program:

Adjust the contrast of an image in C# efficiently - Stack Overflow

edited May 23 '17 at 12:01

Community

1
1

answered Jun 20 '12 at 19:14

TheZ

3,663
19
34

Thanks, i managed to re-write it in javascript and it worked perfectly using a -100 to 100 range slider. – mfreitas Jun 21 '12 at 15:41
Thanks! I too rewrote it in JS for my use! – Rutwick Gangurde Dec 31 '12 at 09:59

score 1 · Answer 2 · answered Mar 27 '17 at 09:11

i will post demo in which all filter. you can easily use this on canvas by id or class. but problem is that you can't render this with canvas means you don't save this or preview. Because canvas can't render style.

code

<!-- canvas -->
<html>
<head>
<style>
img {
    width: 33%;
    height: auto;
    float: left;
}
.origional {filter:none;}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
//origional canvas image
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("origional");
   ctx.drawImage(img, 0, 0,300,300);

   $('#button').click(function() {
    canvas.classList.add("origional");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});

   $('#button1').click(function() {
    canvas.classList.add("blur");
    canvas.classList.remove("origional");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});

   $('#button2').click(function() {
    canvas.classList.add("brightness");
    canvas.classList.remove("blur");
    canvas.classList.remove("origional");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button3').click(function() {
    canvas.classList.add("contrast");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("origional");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button4').click(function() {
    canvas.classList.add("grayscale");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("origional");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button5').click(function() {
    canvas.classList.add("huerotate");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("origional");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button6').click(function() {
    canvas.classList.add("invert");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("origional");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button7').click(function() {
    canvas.classList.add("opacity");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("origional");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button8').click(function() {
    canvas.classList.add("saturate");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("origional");
    canvas.classList.remove("sepia");
    canvas.classList.remove("shadow");
});
   $('#button9').click(function() {
    canvas.classList.add("sapia");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("origional");
    canvas.classList.remove("shadow");
});
   $('#button10').click(function() {
    canvas.classList.add("shadow");
    canvas.classList.remove("blur");
    canvas.classList.remove("brightness");
    canvas.classList.remove("contrast");
    canvas.classList.remove("grayscale");
    canvas.classList.remove("huerotate");
    canvas.classList.remove("invert");
    canvas.classList.remove("opacity");
    canvas.classList.remove("saturate");
    canvas.classList.remove("sepia");
    canvas.classList.remove("origional");
});
});
</script>
</head>
<body>
<h1>
canvas
</h1>
<canvas id="canvas" width="300" height="300" ></canvas>
<br>
<div ><input type="button" id="button" value="origional" />
<input type="button" id="button1" value="blur" />
<input type="button" id="button2" value="brightness" /> 
<input type="button" id="button3" value="contrast" /> 
<input type="button" id="button4" value="grayscale" /> 
<input type="button" id="button5" value="huerotate" /> 
<input type="button" id="button6" value="invert" /> 
<input type="button" id="button7" value="opacity" /> 
<input type="button" id="button8" value="saturate" /> 
<input type="button" id="button9" value="sepia" /> 
<input type="button" id="button10" value="shadow" />  
</div>
<br>
<!-- image -->
<h1>
image
</h1>
<img id="origional" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img id="blur" class="blur" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="https://lh5.googleusercontent.com/-bSF6HLBpWZU/AAAAAAAAAAI/AAAAAAAAABI/6UVYOKY6QhE/photo.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>

Here Live Demo

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Check out Pixastic provides a ton of great effects, you can play with a sample Editor to see some of the capabilities. Pixastic brightness/contrast example

Heres a demo I whipped up of a contrasted Mario.

Live Demo

also checkout the pixastic github source code for the contrast method for ideas on how it works to implement into your code if you don't want to use the whole library.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 20 '12 at 19:12

Loktar

34,764
7
90
104

1

thats a really nice plugin i must say, but i found the one @TheZ sugested to be much easier to understand. Anyhow i will definitely use it in another project so thanks a lot for suggesting it! – mfreitas Jun 21 '12 at 15:46
It's indeed a great plugin... until you bind a lot of event handlers to the same Canvas! Try it! – Rutwick Gangurde Dec 31 '12 at 09:28

HTML5 Canvas contrast filter

3 Answers3