camanjs - 有人在现场有源代码 caman js 示例吗？

Question

我正在尝试创建类似于此页面 url 的功能： 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();
   }

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

为了控制亮度或对比度的值，我使用了“范围”输入。

        <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并将其放入我自己的repo中以便（希望）更容易使用：

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

---

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

不过，它在咖啡脚本中。

Answer 2

你可以加

this.revert(true);

在您的 update_brightness 和 update_contrast 函数中。

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

}