jQuery滑块动态更改图像

问题描述：

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

这是到目前为止我的代码：

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

感谢您的帮助！

答

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

应该

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

jQuery滑块动态更改图像

相关推荐