sourabh2k15/imageprocessing.html

## imageprocessing.html
<!DOCTYPE html>
<html>
	<head>
		<title>image processing </title>
	</head>
	<body>
		<canvas id='picasso' style='border:1px solid red,float:left' width=400 height=300></canvas>
		<canvas id='picasso2'  width=400 height=300></canvas>

		<script type='text/javascript'>
			var picasso = document.getElementById('picasso');
			var picasso2 = document.getElementById('picasso2');
			var ctx     = picasso.getContext('2d');
			var ctx2    = picasso2.getContext('2d');

			var height  = picasso.height;
			var width   = picasso.width;
			var imagedata = 0;
			ctx.fillStyle = '#FF0000';
			ctx.fillRect(0,0,width,height);
			var image = new Image();
			image.src = 'back.jpg';
			image.onload = function(){
 				ctx.drawImage(this,0,0,width,height);
			}

			var Ychannel= [],Cbchannel=[],Crchannel=[],Rchannel=[],Bchannel=[],Gchannel=[];
			var Ydata,Cbdata,Crdata,Rdata,Gdata,Bdata;

			setTimeout(function(){
				imagedata = ctx.getImageData(0,0,width,height);
				var rgbarr = [];
				var rgbindex = [];
				for(var j=0;j<256;j++){
					rgbarr[j]= 0;
					rgbindex[j] = j;
				}
				var data = imagedata.data;
                                var datastring = "";
				var Y,Cb,Cr,R,G,B;
				for(var i=0;i<data.length;i+=4){
					//inflating the luminance channel
					R = data[i];
					G = data[i+1];
					B = data[i+2];

					Rchannel[i] = R;
					Rchannel[i+1] = 0;
					Rchannel[i+2] = 0;
					Rchannel[i+3] = 255;

					Y = 0.299*data[i]+0.587*data[i+1]+0.114*data[i+2];

					Ychannel[i]   = Y;
					Ychannel[i+1] = Y;
					Ychannel[i+2] = Y;
					Ychannel[i+3] = 255;

					// inflating the chroma channel for blue
					Cb = -0.148*data[i]-0.291*data[i+1]+0.439*data[i+2];
					Cbchannel[i]   = Cb;
					Cbchannel[i+1] = Cb;
					Cbchannel[i+2] = Cb;
					Cbchannel[i+3] = 255;

					// inflating the chroma channel for red;
					Cr = 0.439*data[i]-0.368*data[i+1]-0.071*data[i+2];
					Crchannel[i]   = Cr;
					Crchannel[i+1] = Cr;
					Crchannel[i+2] = Cr;
					Crchannel[i+3] = 255;

					//counting the frequencies of shades from white- 0 to black - 255 for drawing hostogram and huffman coding
					rgbarr[data[i]]++;
					rgbarr[data[i+1]]++;
					rgbarr[data[i+2]]++;

					// the raw binary code string without any compression
					datastring+=getbinary(data[i])+getbinary(data[i+1])+getbinary(data[i+2]);

				}
				Rdata = ctx2.createImageData(width,height);
				imagedata.data = Rchannel;
				ctx2.putImageData(imagedata,0,0);
			//	console.log("datastring length is : "+datastring.length);

			//	console.log("spitting the frequencies array\n");
			//	console.log(rgbarr);

			//	console.log("spitting the indexes array\n");
			//	console.log(rgbindex);
				console.log(data);
				console.log(Rchannel);
			},1000);

			function getbinary(n){
				var b = "";
				while(n>0){
					b+=n%2;
					n = (n-n%2)/2;
				}
                                b = b.split("").reverse().join("");
				return b;
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>image processing </title>
	</head>
	<body>
	<canvas id='picasso' style='border:1px solid red,float:left' width=400 height=300></canvas>
	<canvas id='picasso2' width=400 height=300></canvas>

	<script type='text/javascript'>
	var picasso = document.getElementById('picasso');
	var picasso2 = document.getElementById('picasso2');
	var ctx = picasso.getContext('2d');
	var ctx2 = picasso2.getContext('2d');

	var height = picasso.height;
	var width = picasso.width;
	var imagedata = 0;
	ctx.fillStyle = '#FF0000';
	ctx.fillRect(0,0,width,height);
	var image = new Image();
	image.src = 'back.jpg';
	image.onload = function(){
	ctx.drawImage(this,0,0,width,height);
	}

	var Ychannel= [],Cbchannel=[],Crchannel=[],Rchannel=[],Bchannel=[],Gchannel=[];
	var Ydata,Cbdata,Crdata,Rdata,Gdata,Bdata;

	setTimeout(function(){
	imagedata = ctx.getImageData(0,0,width,height);
	var rgbarr = [];
	var rgbindex = [];
	for(var j=0;j<256;j++){
	rgbarr[j]= 0;
	rgbindex[j] = j;
	}
	var data = imagedata.data;
	var datastring = "";
	var Y,Cb,Cr,R,G,B;
	for(var i=0;i<data.length;i+=4){
	//inflating the luminance channel
	R = data[i];
	G = data[i+1];
	B = data[i+2];

	Rchannel[i] = R;
	Rchannel[i+1] = 0;
	Rchannel[i+2] = 0;
	Rchannel[i+3] = 255;

	Y = 0.299data[i]+0.587data[i+1]+0.114*data[i+2];

	Ychannel[i] = Y;
	Ychannel[i+1] = Y;
	Ychannel[i+2] = Y;
	Ychannel[i+3] = 255;

	// inflating the chroma channel for blue
	Cb = -0.148data[i]-0.291data[i+1]+0.439*data[i+2];
	Cbchannel[i] = Cb;
	Cbchannel[i+1] = Cb;
	Cbchannel[i+2] = Cb;
	Cbchannel[i+3] = 255;

	// inflating the chroma channel for red;
	Cr = 0.439data[i]-0.368data[i+1]-0.071*data[i+2];
	Crchannel[i] = Cr;
	Crchannel[i+1] = Cr;
	Crchannel[i+2] = Cr;
	Crchannel[i+3] = 255;

	//counting the frequencies of shades from white- 0 to black - 255 for drawing hostogram and huffman coding
	rgbarr[data[i]]++;
	rgbarr[data[i+1]]++;
	rgbarr[data[i+2]]++;

	// the raw binary code string without any compression
	datastring+=getbinary(data[i])+getbinary(data[i+1])+getbinary(data[i+2]);

	}
	Rdata = ctx2.createImageData(width,height);
	imagedata.data = Rchannel;
	ctx2.putImageData(imagedata,0,0);
	// console.log("datastring length is : "+datastring.length);

	// console.log("spitting the frequencies array\n");
	// console.log(rgbarr);

	// console.log("spitting the indexes array\n");
	// console.log(rgbindex);
	console.log(data);
	console.log(Rchannel);
	},1000);

	function getbinary(n){
	var b = "";
	while(n>0){
	b+=n%2;
	n = (n-n%2)/2;
	}
	b = b.split("").reverse().join("");
	return b;
	}
	</script>
	</body>
	</html>