html中亮度怎么写,html5 - 如何做亮度，对比度，饱和度，色调上下？

我怎样才能应用亮度而不是灰色？ 我一直在尝试，但我只能把它变成灰色。html5 - 如何做亮度，对比度，饱和度，色调上下？

我的目标是让它亮度上下。

当前代码：

HTML

Effects Brightness

BEFORE effect

AFTER effect

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

}

})();

编辑：复制并粘贴

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

}

Effects

BEFORE effect Download: http://people.opera.com/shwetankd/webm/sunflower.webm type="video/webm" width=640 height=480>

AFTER effect

+0

我什么confused..brightness？ –

+0

[如何降低图像在CSS中的亮度]可能的重复(http://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css) –

+0

视频文件和图像文件可以是任何东西在CANVAS中捕获。 –