限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery模拟Photoshop的色调曲线操作特效代码

所属分类: 网页特效-其它&杂项    2023-08-13 09:59:10

jquery模拟Photoshop的色调曲线操作特效代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery模拟Photoshop的色调曲线操作特效代码(共11个文件)

    • index.html
    • index.html

使用方法

$('.iocurve').each(function(){
    var $this = $(this);
    var $input = $this.find('.input');
    var $curve = $this.find('.curve div');
    var $output = $this.find('.output');
    var $curvature = $curve.next('input');
    var option = $curve.data('option');
    $input.text(function(){
        var x0 = option.x ? option.x[0] : 0;
        var x1 = option.x ? option.x[1] : 255;
        var y0 = option.y ? option.y[0] : 0;
        var y1 = option.y ? option.y[1] : 255;
        var dx = option.dx || 1;
        var rangeX = x1 - x0;
        var count = (rangeX / dx)|0;
        var dy = (y1 - y0) / count;
        var a = new Array(count);
        for( var i=count; i--; ) a[i] = y0 + dy * i;
        a[count] = y1;
        return a;
    }().join('\r\n'));
    $curve.on('output', function(ev, data){
        for( var i=data.length; i--; ) data[i] = Math.round(data[i]);
        $output.text(data.join('\r\n'));
    });
    if( option.histogram ) option.histogram.data = randomHistogram(option);
    $curve.iocurve(option);
    $input.on('scroll', function(){
        $output.scrollTop($input.scrollTop());
    });
    $output.on('scroll', function(){
        $input.scrollTop($output.scrollTop());
    });
    if( $curvature.length ) $curvature.on('input', function(){
        var v = this.value;
        $curve.trigger('option', [{ curvature: v }]);
    });
    function randomHistogram( option ){
        var rangeX = option.x[1] - option.x[0];
        var count = 1 + (rangeX / option.dx)|0;
        var data = [];
        for( var i=count; i--; ) data[i] = Math.random();
        return data;
    }
});
$('.example .picture-edit').each(function(){
    var $canvas = $(this).find('canvas');
    var $curve = $(this).find('.curve');
    var canvas = $canvas[0];
    var context = canvas.getContext('2d');
    var imgdata0;
    var imgdata1;
    var image = new Image();
    image.onload = function(){
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
        imgdata0 = context.getImageData(0, 0, canvas.width, canvas.height);
        imgdata1 = context.createImageData(canvas.width, canvas.height);
    };
    image.src = $canvas.data('src');
    $curve.iocurve().on('output', function(ev, data){
        if( !imgdata1 ) return;
        for( var i=data.length; i--; ) data[i] = Math.round(data[i]);
        var src = imgdata0.data;
        var dst = imgdata1.data;
        for( var i=0; i<src.length; i+=4 ){
            dst[i] = data[src[i]];
            dst[i+1] = data[src[i+1]];
            dst[i+2] = data[src[i+2]];
            dst[i+3] = src[i+3];
        }
        context.putImageData(imgdata1, 0, 0);
    });
});

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 其它&杂项

jquery根据内容首字母自动滑动定位特效代码

有点类似于手机通讯录按名字首字母查找,大家可以研究一下代码,很实用!
  其它&杂项
 9377  0

javascript网页右侧在线客服悬浮QQ

一款常用的页面右侧悬浮在线客服,始终固定在网页右侧居中位置,滚动页面滚动条也会自动回位。
  其它&杂项
 8229  0

jquery问卷调查自定义表单编辑代码

一款调查问卷管理插件,可自定义添加四种类型:单选、多选、填空、矩阵。
  其它&杂项
 7400  0

纯CSS实现的不重复的table表格背景图片

一款table表格中插入不重复的背景图片特效,将背景大小设置为覆盖整个table,bgimg图片将被缩放以适应表格并覆盖其整个宽度和高度。最后,再将CSS背景图片repeat设置为no repeat。
  其它&杂项
 4404  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论