使用jquery更改圖像的R，G，B？

我想用jQuery改變圖像的R，G，B顏色。我將圖像轉換爲畫布，但它不起作用請修復我的錯誤或我錯過了什麼。使用jquery更改圖像的R，G，B？

這次我只是改變紅色，如果這個作品休息可以做到相同。

這裏是我的代碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 


    <script type="text/javascript"> 

    function redSwitch() { 

     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('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').val(); 

     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; 
       } 
      } 
     } 

    } 


    $(document).ready(function(){ 

       $('#red').change(function(){ 
     redSwitch(); 
    });}); 
    </script> 
</head> 
<body> 

<img id="pic" src="pool.jpg" /> 

<input type="range" id="red" min="-255" max="255" value="0" /> 


</body> 
</html>

來源

2013-05-16 abdul quadir

與您的代碼，你得到源圖像數據的確改變它，但從來沒有畫回來的問題。首先，您需要定義的，而不是在每個變化創造它的畫布靜態標籤：

<canvas id="main"></canvas>

其次，在更改回調從#main獲取上下文：

var canvas = $('#main')[0]; 
var ctx = canvas.getContext('2d');

最後，你的像素操作後完成後，繪製改變字節#main：

ctx.putImageData(imgPixels, 0, 0);

而且一個側面說明：你不需要創建圖像元素的克隆，利用現有的，因爲你不修改它：

var photo = $('#pic')[0];

來源

2013-05-16 08:31:06 Tommi

使用jquery更改圖像的R，G，B？

回答

相關問題