Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale.
My objective is to increase and decrease the brightness of the image.
Here is the current code:
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);
}
})();
EDIT: copy and paste it
<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>