jQuery滑块动态改变图像

发布于 2024-11-29 15:27:28 字数 3318 浏览 0 评论 0原文

我正在尝试使用 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-change-style-with-jquery/

感谢您的帮助！

原文

I am trying to use the jQuery UI slider to dynamically change the RGB values of an image. The issue that I am running into is that the slider will not slide when it is attached to my function that should change the values.

Here is my code so far:

<!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>

So far it should only change the red values. Once I get that working the others will be easy to finish.

I found this site that manages to do it, at least from my understanding. The only issue is that the guy uses PHP to handle a lot of the image manipulation instead of Javascript/jQuery. http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/

Thanks for any help!

分享到QQ

分享到微博