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

OK - 这几乎适用于亮度高达+和下

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

Answer 2

看起来你现在可以做到这一点与ctx.filter = "...";。见this MDN article。

例子：

ctx.filter = 'blur(5px) hue-rotate(45deg)'; 
ctx.font = '48px serif'; 
ctx.strokeText('Hello world', 50, 100);