javascript - 如何使用 jQuery/Ajax 设置图像的黄色和白色亮度？

Question

我正在尝试开发一个简单的页面，我可以在其中更改图像亮度。我希望根据带有步长值的滚动条在图像上产生黄色和白色的灯光效果。

这是我的滚动条代码:

<input type="range" value="0.5" step="0.01" max="1" min="0" name="imp_bright_range">

这是我的图像代码:

 <div><img src="myimage.jpg" /></div>

我指的是这些例子http://pixastic.com/lib/docs/#how和 http://mezzoblue.github.io/PaintbrushJS/demo/index.html但没有成功。

我应该引用什么脚本示例？

Answer 1

你必须投票给我，因为我编辑了演示超过 1 小时。

js代码如下:

$(function() {
    var isPressed = false;
    var pic = $('.pic');
    var scroller = $('.scroller');
    var scroller_container = $('.scroller-container');
    var scroller_container_offset_x = scroller_container.offset().left;

    scroller.mousedown(function() {
        isPressed = true;
    });
    $(document).mouseup(function() {
        isPressed = false;
    });
    $(document).mousemove(function(e) {
        if(!isPressed) return;
        var left_boundary = scroller_container_offset_x;
        var right_boundary = scroller_container_offset_x + 300 - 20;
        var current_scroller_x = scroller.offset().left;
        var point_x = e.clientX;
        var current_sepia = ((current_scroller_x - left_boundary) / 280).toFixed(1);
        console.log('scroller_x:' + current_scroller_x);
        console.log('left_boundary:' + left_boundary);

        if(current_scroller_x >= left_boundary && current_scroller_x <= right_boundary && point_x > left_boundary && point_x < right_boundary) {
            scroller.css('left', point_x);
            console.log(e.clientX + '|' + e.clientY);
        }
        if(point_x <= left_boundary){
            scroller.css('left', left_boundary);
        }
        if(point_x >= right_boundary){
            scroller.css('left', right_boundary);
        }
        pic.css({
            '-webkit-filter': 'sepia('+current_sepia+')',
            'filter': 'sepia('+current_sepia+')'
        });
    });
});

这是一个演示，希望对您有帮助:)。

scroller-filter-demo