Question

我正在尝试使用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。 http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/

感谢您的帮助！

Answer 1

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

应该是

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

jQuery滑块动态改变图像

1 个答案: