Languages

Menu
Sites
Language
how to change the image view effect.

i want to on click event change a image color..Ex:-my original image is colorful then afert clicking a button  image color is black and white and other color also..

 

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

used all the css code but doesn't work...

List

Responses

4 Replies
pius lee

tizen 2.3 does not support css3 filter effect.

check following url for supported css list

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom

Anyway, but you can make grayscale image with canvas like this.

<!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) {
		var brightness = 0.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * 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>

 

ashish kumar

i want to degian http://www.phpied.com/files/canvas/pixels.html this type of application in tizen...so how can convert image color to grayscale using jquery..

pius lee

Hey, jquery is not magic stick, you can see pixel converting function in your refered url, just set that into my grayscale function.

In grascale functon in my comment, you can see that manipulate four(r,g,b,a) pixels in the "for" loop. just apply the function at that.

ashish kumar

Hi pius lee,

                   i have changed the "for loop" code but here no any effect. i think some think are missing can u write the full code because i have try many type but in tizen not work..