Question

我正在尝试使用滑块和画布更改图像的颜色但无法获得转换后的图像。通过滑动滑块获得r，g，b值并将其传递给colorchanger（）函数，并在那里给出图像像素的值..当我从refreshSwatch函数调用colorchanger（）函数时滑块停止工作。

     <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider - Colorpicker</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      #red, #green, #blue {
        float: left;
        clear: left;
        width: 300px;
        margin: 15px;
      }
      #swatch {
        width: 120px;
        height: 100px;
        margin-top: 18px;
        margin-left: 350px;
        background-image: none;
      }
      #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; }
      </style>
      <script>

       $(document).ready(function() {

      function hexFromRGB(r, g, b) {
        var hex = [
          r.toString( 16 ),
          g.toString( 16 ),
          b.toString( 16 )
        ];
        $.each( hex, function( nr, val ) {
          if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
          }
        });

        ctx.drawImage(imgData,0,0);
        return hex.join( "" ).toUpperCase();
      }
      function refreshSwatch() {
         red = $( "#red" ).slider( "value" ),
          green = $( "#green" ).slider( "value" ),
          blue = $( "#blue" ).slider( "value" );
          var hex = hexFromRGB( red, green, blue );
colorchanger(red,green,blue);
        $( "#swatch" ).css( "background-color", "#" + hex );
      }

          var red,green,blue;
          var c=document.getElementById("myCanvas");
          var ctx=c.getContext("2d");
          var img=document.getElementById("scream");
          ctx.drawImage(img,0,0);
          var imgData=ctx.getImageData(0,0,c.width,c.height);

          function colorchanger(r,g,b)
          {
              for (var i=0;i<imgData.data.length;i+=4)
                {
                imgData.data[i]=imgData.data[i]+r;
                imgData.data[i+1]=imgData.data[i+1]+g;
                imgData.data[i+2]=imgData.data[i+2]+b;
                imgData.data[i+3]=255;
                }
                ctx.putImageData(imgData,0,0);
                return ;
          }

        $( "#red, #green, #blue" ).slider({
          orientation: "horizontal",
          range: "min",
          max: 255,
          value: 127,
          slide: refreshSwatch,
          change: refreshSwatch
        });

        $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
        $( "#blue" ).slider( "value", 60 );

      </script>
    </head>
    <body class="ui-widget-content" style="border:0;">

    <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
      <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>

    </p>

    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>

    <div id="swatch" class="ui-widget-content ui-corner-all"></div>

     <img id="scream" src="pics/editedshirt.png" alt="The Scream" width="220" height="277">
    <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
    </canvas>
    </body>
    </html>

想要使用jquery canvas动态更改图像的颜色

0 个答案: