javascript - html5 - 亮度、对比度、饱和度、色相如何上下调整？

Question

我如何上下应用亮度而不是灰色？ 我一直在努力，但我只能把它变成灰色。

我的目标是调高和调低它的亮度。

当前代码:

HTML

<h1>Effects Brightness</h1>
<table>
  <tr>
    <td style="vertical-align:text-top;">
      <h2>BEFORE effect</h2>      
      <img id="cvs-src" src="/images/a.jpg" width=640 height=480/> 
    </td>

    <td>
      <h2>AFTER effect</h2>
      <canvas width=1024 height=768></canvas> 
    </td>    
  </tr> 
</table>

JS

(function() {
  window.onload = greyImages;

  function greyImages() {
    var img = document.getElementById("cvs-src");
    var imageData; 
    var px; 
    var length; 
    var i = 0; 
    var grey;

    var can = document.getElementsByTagName("canvas")[0].getContext('2d');    
    can.drawImage(img, 0, 0);
    imageData = can.getImageData(0, 0, 1024, 768);
    px = imageData.data;
    length = px.length;

    for ( ; i < length; i+= 4 ) {
      grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
      px[i] = px[i+1] = px[i+2] = grey;
      grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
      px[i] = px[i+1] = px[i+2] = grey;
      grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
      px[i] = px[i+1] = px[i+2] = grey;    
    }

    can.putImageData(imageData, 0, 0);      
  }
})();

编辑:复制并粘贴

<script> 
function greyImages() {
  var img = document.getElementById("cvs-src");
  var imageData; 
  var px; 
  var length; 
  var i = 0; 
  var grey;
  var can = document.getElementsByTagName("canvas")[0].getContext('2d');    
  can.drawImage(img, 0, 0);
  imageData = can.getImageData(0, 0, 1024, 768);
  px = imageData.data;
  length = px.length;
  for ( ; i < length; i+= 4 ) {
    grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
    px[i] =  grey;     
  }
  can.putImageData(imageData, 0, 0);        
}  

</script> 

<h1>Effects</h1>
<table>
  <tr>
    <td style="vertical-align:text-top;">
      <h2>BEFORE effect</h2>      
      <button id="take" onclick="greyImages();" />
Download: http://people.opera.com/shwetankd/webm/sunflower.webm

      <video id="cvs-src" autoplay="autoplay" src="/images/1.webm"  
             type="video/webm" width=640 height=480></video>
    </td>

    <td>
      <h2>AFTER effect</h2>
      <canvas width=1024 height=768></canvas> 
    </td>    
  </tr> 
</table>

Answer 1

好的 - 这几乎适用于亮度调高+和亮度调低-

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
function greyImages() {
  var img = document.getElementById("cvs-src");
  var imageData; 
  var px; 
  var length; 
  var i = 0; 
  var grey;
  var can = document.getElementsByTagName("canvas")[0].getContext('2d');    
  can.drawImage(img, 0, 0);
  imageData = can.getImageData(0, 0, 1024, 768);
  px = imageData.data;
  length = px.length;

  // Grey
  //  for ( ; i < length; i+= 4 ) {
  //    grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
  //    px[i] =  grey;
  //    grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
  //    px[i] = px[i+1] = px[i+2] = grey;      
  //  }  

  // Bright up / down
  for ( ; i < length; i+= 4 ) {   
    px[i]   -= 40 ;
    px[i+1] -= 40 ;
    px[i+2] -= 40 ;        
  }  


  // Threshold 
  //  for ( ; i < length; i+= 4) {
  //    var r = px[i];
  //    var g = px[i+1];
  //    var b = px[i+2];
  //    grey= (0.2126*r + 0.7152*g + 0.0722*b >= 150) ? 255 : 0;
  //    px[i] = px[i+1] = px[i+2] = grey;
  //  }   

  can.putImageData(imageData, 0, 0);
} 

$(document).ready(function() {

});
</script> 

<h1>Effects</h1>
<table>
  <tr>
    <td style="vertical-align:text-top;">
      <h2>Original</h2>      
      <button id="take" onclick="greyImages();" />          
      <video id="cvs-src" autoplay="autoplay" src="/images/1.webm"  
             type="video/webm" width=640 height=480></video>
    </td>

    <td>
      <canvas width=1024 height=768></canvas> 
    </td>    
  </tr> 
</table>