Question

我正在尝试为此页面网址创建功能：http://camanjs.com/examples/用于图片过滤器。

我尝试过这段代码。

 var img_map = Caman("#test-canvas", "../images/test1_640.jpg");

//update brightness
   function update_brightness(value){
        //img_map.revert();
        img_map.brightness(value).render();
   }

//update contrast
    function update_contrast(value){
        //img_map.revert();
        img_map.contrast(value).render();
   }

图片上的更改与我推荐的网站不同。主要问题是当我增加任何控制然后它工作正常。但是当我尝试降低控制值时，它就不起作用了。

控制我使用的亮度或对比度值＆＃34;范围＆＃34;输入

        <img id="test-image" src="../images/test1_640.jpg" />
        <canvas id="test-canvas"></canvas>
brightness
<input onchange="update_brightness(this.value);" type ="range" min ="-100" max="100" step ="10" value ="0"/>

contrast
<input onchange="update_contrast(this.value);" type="range" min="-100" max="100" step="" value="0">

Answer 1

编辑：我刚刚将coffeescript编译成JavaScript并将其放入我自己的回购中（希望）更容易使用：

https://github.com/nbieber/CamanJS-example

您可以在此处找到原始来源：https://github.com/meltingice/CamanJS-Site/blob/master/_assets/javascripts/examples.js.coffee

但是，这是在coffeescript中。

Answer 2

您可以添加

this.revert(true);

在您的update_brightness和update_contrast函数中。

function update_brightness(value){
    //img_map.revert();
    this.revert(true);
    img_map.brightness(value).render();

}

有没有人在网站上有源caman js的例子？

2 个答案: