Grayscale filter with Canvas
By pius lee
Webkit in Tizen 2.3 does not have css3 filter.
Grayscale with canvas is useful when you want show few grayscale image on page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- original image for comparing -->
<img src="images/face.jpg">
<!-- drawing canvas for filtering image -->
<canvas id="filtercanvas" width="250" height="333"></canvas>
<script>
function grayscale(img) {
var canvas = document.getElementById("filtercanvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var img_data = ctx.getImageData(0, 0, img.width, img.height);
var data = img_data.data;
for (var i=0; i<data.length; i+=4) {
// YCbCr Luma = 0.299*r + 0.587*g + 0.114*b
var brightness = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
data[i] = brightness;
data[i+1] = brightness;
data[i+2] = brightness;
}
ctx.putImageData(img_data, 0, 0);
}
var img = new Image();
img.onload = function() { grayscale(this); }
img.src = "images/face.jpg";
</script>
</body>
</html>