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/

어떤 도움을 주셔서 감사합니다!

출처

2011-08-14 Daniel Flynn

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

해야

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

출처

2011-08-14 15:32:29 scessor

jQuery 슬라이더 동적으로 이미지 변경

답변

관련 문제