javascript - CamanJS 对比效果未正确应用

Question

我正在使用 CamanJS，除了对比度之外，所有效果都运行良好。我不知道为什么，但它破坏了形象。

这是我的 HTML 和 JavaScript，这里还有一个 jsFiddle 示例:http://jsfiddle.net/6sE2x/

      <div id="Content">
            <div class="row" style="margin:0 auto;text-align:center">
                <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" />
            </div>
            <hr />
            <div id="Filters">
                <table style="width:100%">
                    <tr class="Filter">
                        <td class="FilterName" style="width:20%">
                            <label>Brightness:</label>
                        </td>
                        <td class="FilterSetting" style="width:60%">
                            <input type="range" min="-100" max="100" step="1" value="0" data-filter="brightness">
                        </td>
                        <td class="FilterValue" style="width:20%;padding-left:5%">
                           <label>0</label>
                        </td>
                    </tr>
                    <tr class="Filter">
                        <td class="FilterName" style="width:20%">
                            <label>Contrast:</label>
                        </td>
                        <td class="FilterSetting" style="width:60%">
                            <input type="range" min="-100" max="100" step="1" value="0" data-filter="contrast">
                        </td>
                        <td class="FilterValue" style="width:20%;padding-left:5%">
                            <label>0</label>
                        </td>
                    </tr>
                    <tr class="Filter">
                        <td class="FilterName" style="width:20%">
                            <label>Sharpen:</label>
                        </td>
                        <td class="FilterSetting" style="width:60%">
                            <input type="range" min="-100" max="100" step="1" value="0" data-filter="sharpen">
                        </td>
                        <td class="FilterValue" style="width:20%;padding-left:5%">
                            <label>0</label>
                        </td>
                    </tr>
                </table>
            </div>
        </div>    

  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 < 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);
        });
    }

Answer 1

正如 Ömer Akyol 评论的那样，只需将您的值解析为整数即可。为我工作。

parseInt(contrastValue);