jQuery滑块动态更改图像_Jquery_Image_Dynamic_Rgb_Uislider

jQuery滑块动态更改图像

jquery image dynamic

jQuery滑块动态更改图像,jquery,image,dynamic,rgb,uislider,Jquery,Image,Dynamic,Rgb,Uislider,我尝试使用jQuery UI滑块动态更改图像的RGB值。我遇到的问题是，当滑块连接到应该更改值的函数时，它不会滑动以下是我目前的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/base/jquery.ui.all.css"> <script src=

我尝试使用jQuery UI滑块动态更改图像的RGB值。我遇到的问题是，当滑块连接到应该更改值的函数时，它不会滑动

以下是我目前的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/base/jquery.ui.all.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script src="../js/ui/jquery.ui.core.js"></script>
    <script src="../js/ui/jquery.ui.widget.js"></script>
    <script src="../js/ui/jquery.ui.mouse.js"></script>
    <script src="../js/ui/jquery.ui.slider.js"></script>>
    <style>
    #red, #green, #blue {
        float: left;
        clear: left;
        width: 300px;
        margin: 10px;
    }
    #red .ui-slider-range { background: #ef2929; }
    #red .ui-slider-handle { border-color: #ef2929; }
    #green .ui-slider-range { background: #8ae234; }
    #green .ui-slider-handle { border-color: #8ae234; }
    #blue .ui-slider-range { background: #729fcf; }
    #blue .ui-slider-handle { border-color: #729fcf; }
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>

    function redSwitch() {

        var canvas = document.createElement('canvas');
        var ctx = canvas.getctx('2d');

        var photo = new Image();
        photo.src = $('#pic').attr('src');

        canvas.width = photo.width;
        canvas.height = photo.height; 

        ctx.drawImage(photo, 0, 0); 

        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var val = $('#red').slider("value");

        for(var y=0; y<imgPixels.height; y++)
        {
            for(var x=0; x<imgPixels.width; x++)
            {
                var i = (y * 4) * imgPixels.width + x * 4;
                if(imgPixels.data[i]+val > 255)
                {
                    imgPixels.data[i] = 255;
                }
                else
                {
                    imgPixels.data[i] = imgPixels.data[i]+val;
                }
            }
        }

    }

    $(function() {
        $( "#red").slider({
            orientation: "horizontal",
            range: "max",
            min:-255,
            max: 255,
            value: 0,
            slide: redSwitch,
            change: redSwitch
        });

        $( "#green").slider({
            orientation: "horizontal",
            range: "max",
            min:-255,
            max: 255,
            value: 0,

        });

        $( "#blue").slider({
            orientation: "horizontal",
            range: "max",
            min:-255,
            max: 255,
            value: 0,

        });
    });
    </script>
</head>
<body>

<img id="pic" src="../../images/pictures/adam/pic01.jpg" />

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>



</body>
</html>

到目前为止，它应该只更改红色值。一旦我得到了那份工作，其他人就很容易完成了

我发现这个网站能够做到这一点，至少据我所知。唯一的问题是，这个家伙使用PHP来处理大量的图像操作，而不是Javascript/jQuery

谢谢你的帮助

var ctx = canvas.getctx('2d');

应该是

var ctx = canvas.getContext('2d');