Слайдер jQuery, динамически изменяющий изображение - PullRequest
Новая
       8

Слайдер jQuery, динамически изменяющий изображение

0 голосов
/ 14 августа 2011

Я пытаюсь использовать ползунок 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/

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 14 августа 2011 
var ctx = canvas.getctx('2d');

должно быть 

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