title: CamanJS contrast effect isn't applied properly
body: <p>I'm using CamanJS and the effects all work fine except Contrast. I don't know why but it messes up the image. </p>
  
  <p>Here's my HTML and JavaScript, also there is a jsFiddle example here : <a href="http://jsfiddle.net/6sE2x/" rel="nofollow">http://jsfiddle.net/6sE2x/</a>  </p>
  
  <pre><code>      &lt;div id="Content"&gt;
              &lt;div class="row" style="margin:0 auto;text-align:center"&gt;
                  &lt;img id="camanImage"      src="data:image/gif;base64,R0lGODdhXgGWAOMAAMzMzJaWlre3t6Ojo5ycnKqqqr6+vsXFxbGxsQAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAXgGWAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+BSAgMEAQQFBhkB6+zt7BoHBeUBAwJCBe8X7vvr8PLr9cIBODDPHQIM/PZlEMBvwA8DBQMgTNhuYUNwBCketECx4gUD/hQL9ECgUF/Hfh9DfotIYIC7dBXaDShAsyZNDBHJtbOXAyK/iQBt2sQpMyLPbQzZ8cwIkKPSDyTZwXS5jkCOqD9NrjvKAWuAqeyscqMaYKMErwdiPvVQUKQEkFJvJGVHVqLWAFw3tJ0Adx1MbfHMVTjQ7q+EnR4Ix52w98Y8BAfm2nW6NXFhCo25HTB8eO0ExB3mip2A1eENAwXSApAMFK8H0RVKC5yg2K/ayh3wNaXAWm87s15Hf+hN2XVuuhWIC0R7u+y/c5wnkHXLt51qde1GR5w83GNxBM/RYZheoW+A6xgzf+5oFjO79gMva9iXtnY+EMopnIQvoSB8+9Fp/lNTduh11lFeAPg3GGgZgPcbAF4VwB8H+a13oAUKUmAfgtrsQ0CBBtJV13nNIcigBlhZlaEIFYYI0IgFnhgih9nsMwCIAJB141sP6ueZhcZxUBBsJLSYI12qmQefjAAw2aGHOK4Gn26C+YiblUFuINmPIRgpgQBThlVicTRu49NuHZiHHpNOEpWdCV5ioCaWJnL5jXkBXgCge+v81+YFW5YZmneWLdbfewva+Q15Hpy4ogR7fuDOCXG2xtWj8Rm6nJiN/shodexECag7glJIaKdXHrkOdTyGOtuXp873I5WmTVBpBdsJx2KsHJxIa3K8WnMAArpCyCltBdRKm3yw/lYV27FdhYVokcHGoyykzK4GrbHOIsXlr6RxOeeymqrnm1/b4scrVnmNi2257LCKDZGMTdtsleF2y2cA1OHpgWxkTTjofbxtmyKG8YJq2zb21cocljsCoKQFXoGl7wYbauvqrgRDnGSPFFQsAVnFYkOlOTol/KxMMF6Qk1G5kVxvUAJbUFNdNa0sojs4vvynNSMSeEHQbZrnzrXY2esVSr12ZAHRikpMEdKAER3x0AkJuiWaTW+cabDFZVUB1FpfJBBq5bRUqsTPEQAZB/HME9AHBV1bV8l3iV1e229j/A89a78q+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlTphnrvnmnHfu+eeghy766KSXbvrpqKeu+uqst+7667DHLvvstNdu++2456777rz37vvvwAcv/PDEF2/88cgnr/zyzDfv/PPQRy/99HNEAAA7" /&gt;
              &lt;/div&gt;
              &lt;hr /&gt;
              &lt;div id="Filters"&gt;
                  &lt;table style="width:100%"&gt;
                      &lt;tr class="Filter"&gt;
                          &lt;td class="FilterName" style="width:20%"&gt;
                              &lt;label&gt;Brightness:&lt;/label&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterSetting" style="width:60%"&gt;
                              &lt;input type="range" min="-100" max="100" step="1" value="0" data-filter="brightness"&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterValue" style="width:20%;padding-left:5%"&gt;
                             &lt;label&gt;0&lt;/label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="Filter"&gt;
                          &lt;td class="FilterName" style="width:20%"&gt;
                              &lt;label&gt;Contrast:&lt;/label&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterSetting" style="width:60%"&gt;
                              &lt;input type="range" min="-100" max="100" step="1" value="0" data-filter="contrast"&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterValue" style="width:20%;padding-left:5%"&gt;
                              &lt;label&gt;0&lt;/label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="Filter"&gt;
                          &lt;td class="FilterName" style="width:20%"&gt;
                              &lt;label&gt;Sharpen:&lt;/label&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterSetting" style="width:60%"&gt;
                              &lt;input type="range" min="-100" max="100" step="1" value="0" data-filter="sharpen"&gt;
                          &lt;/td&gt;
                          &lt;td class="FilterValue" style="width:20%;padding-left:5%"&gt;
                              &lt;label&gt;0&lt;/label&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
  
    var filters = []; 
     $(function () {
  
              $(".FilterSetting input").each(function () {
                  filters.push({
                      "name": $(this).data("filter"),
                      "value": $(this).val()
                  });
              });
              $("#Filters").on("mouseup", ".FilterSetting input", function () {
                  var filter = $(this).data("filter");
                  var value = $(this).val();
                        $(this).parent().parent().find(".FilterValue").children("label").html(value);
                  for (var i = 0; i &lt; filters.length; i++) {
                      if (filters[i].name == filter) {
                          filters[i].value = value;
  
                      }
                  }
                  changeImageFeatures();
              });
          });
  
     function changeImageFeatures() {
          var brightnessValue = filters[0].value;
          var contrastValue = filters[1].value;
          var sharpenValue = filters[2].value;
  
          Caman("#camanImage", function () {
              this.revert(false);
  
                  this.brightness(brightnessValue);
  
  
                  this.contrast(contrastValue);
  
  
                  this.sharpen(sharpenValue);
  
              this.render();
          });
          Caman.Event.listen(Caman("#camanImage"), "processComplete", function (job) {
              console.log("Finished:", job.name);
          });
      }
  </code></pre>