sordina · June 9, 2014 02:23
diff --git a/greyimage.html b/greyimage.html
 <html>
 <head>
 <style type="text/css" media="all">
 	canvas {
 		width: 300px;
 		height: 300px;
 		border: 3px solid blue;
 		margin: 5px;
 	}
 	img {
 		width: 300px;
 		height: 300px;
 		border: 3px solid green;
 		margin: 5px;
 	}
 	body {
 		margin: 0;
 		padding: 0;
 	}
 </style>
 <script>

 	var BLOCK_SIZE = 5;

 	function init() {
 		var canvas  = document.getElementById('canvas1')
 		var image   = document.getElementById('image1')
 		var context = canvas.getContext('2d')

 		context.drawImage(image,0,0, canvas.width, canvas.height)

 		for(var i = 0; i < canvas.width; i = i + BLOCK_SIZE) {
 			for(var j = 0; j < canvas.height; j = j + BLOCK_SIZE) {

 				var data1   = context.getImageData(i,j,BLOCK_SIZE,BLOCK_SIZE)
 				var average = mean2(data1,context.createImageData(BLOCK_SIZE,BLOCK_SIZE))
 				context.putImageData(average,i,j)

 			}
 		}
 	}

 	function mean2(data,creation) {
 		var id = data.data
 		var g = 0;
 		for(var i = 0; i < id.length; i = i + 4) {
 			g = g + id[i];
 			g = g + id[i + 1];
 			g = g + id[i + 2];
 		}
 		var l = id.length / 1.3;
 		var outData = creation.data
 		for(var i = 0; i < id.length; i = i + 4) {
 			outData[i + 0] = g/l
 			outData[i + 1] = g/l
 			outData[i + 2] = g/l
 			outData[i + 3] = 255
 		}
 		return creation
 	}

 	function mean(data,creation) {
 		var id = data.data
 		var r = 0;
 		var g = 0;
 		var b = 0;
 		var a = 0;
 		for(var i = 0; i < id.length; i = i + 4) {
 			r = r + id[i];
 			g = g + id[i + 1];
 			b = b + id[i + 2];
 			a = a + id[i + 3];
 		}
 		var l = id.length / 4;
 		var outData = creation.data
 		for(var i = 0; i < id.length; i = i + 4) {
 			outData[i + 0] = r/l
 			outData[i + 1] = g/l
 			outData[i + 2] = b/l
 			outData[i + 3] = a/l
 		}
 		return creation
 	}

 	window.onload = init
 </script>
 </head>
 <body>
 	<img id="image1" src="Lenna.png" />
 	<canvas id="canvas1"> </canvas>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css" media="all">
	canvas {
	width: 300px;
	height: 300px;
	border: 3px solid blue;
	margin: 5px;
	}
	img {
	width: 300px;
	height: 300px;
	border: 3px solid green;
	margin: 5px;
	}
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	<script>

	var BLOCK_SIZE = 5;

	function init() {
	var canvas = document.getElementById('canvas1')
	var image = document.getElementById('image1')
	var context = canvas.getContext('2d')

	context.drawImage(image,0,0, canvas.width, canvas.height)

	for(var i = 0; i < canvas.width; i = i + BLOCK_SIZE) {
	for(var j = 0; j < canvas.height; j = j + BLOCK_SIZE) {

	var data1 = context.getImageData(i,j,BLOCK_SIZE,BLOCK_SIZE)
	var average = mean2(data1,context.createImageData(BLOCK_SIZE,BLOCK_SIZE))
	context.putImageData(average,i,j)

	}
	}
	}

	function mean2(data,creation) {
	var id = data.data
	var g = 0;
	for(var i = 0; i < id.length; i = i + 4) {
	g = g + id[i];
	g = g + id[i + 1];
	g = g + id[i + 2];
	}
	var l = id.length / 1.3;
	var outData = creation.data
	for(var i = 0; i < id.length; i = i + 4) {
	outData[i + 0] = g/l
	outData[i + 1] = g/l
	outData[i + 2] = g/l
	outData[i + 3] = 255
	}
	return creation
	}

	function mean(data,creation) {
	var id = data.data
	var r = 0;
	var g = 0;
	var b = 0;
	var a = 0;
	for(var i = 0; i < id.length; i = i + 4) {
	r = r + id[i];
	g = g + id[i + 1];
	b = b + id[i + 2];
	a = a + id[i + 3];
	}
	var l = id.length / 4;
	var outData = creation.data
	for(var i = 0; i < id.length; i = i + 4) {
	outData[i + 0] = r/l
	outData[i + 1] = g/l
	outData[i + 2] = b/l
	outData[i + 3] = a/l
	}
	return creation
	}

	window.onload = init
	</script>
	</head>
	<body>
	<img id="image1" src="Lenna.png" />
	<canvas id="canvas1"> </canvas>
	</body>
	</html>