kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head><title>BASE 64 Data</title></head>
<body>
	<canvas width="500" height="200"></canvas>
	<script>
		window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                     window.MozBlobBuilder || window.MSBlobBuilder;
		window.URL = window.URL || window.webkitURL;
		window.onload = function(){
			var canvas = document.querySelector('canvas');
			var context = canvas.getContext('2d');
			//console.log(context);
			var xhr = new XMLHttpRequest();
			xhr.open('GET','blob.png',true);
			xhr.responseType = 'arraybuffer';
			xhr.onload = function(e){
				if(this.status === 200)
				{

					var blob = new Blob([this.response], {type: 'image/png'});
					var img = document.createElement('img');
					    img.onload = function(e) {
					      window.URL.revokeObjectURL(img.src);
					    };
					    img.src = window.URL.createObjectURL(blob);
					    document.body.appendChild(img);

					var bytes = new Uint8Array(this.response);
					var bytesLength = new Uint8ClampedArray(this.response);
					var imageData = context.getImageData(0,0,canvas.width, canvas.height);
					// for (var i=0; i<bytes.length; i++) {
					//     image.data[i] = bytes[i];
					// }

					imageData.data.set(bytesLength);
					context.putImageData(imageData, 0, 0);

					var img = document.createElement('img');
					img.src = 'data:image/png;base64,'+encode(bytes);
					document.body.appendChild(img);

				}
			}
			xhr.send();
		}
		function encode (input) {
		    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
		    var output = "";
		    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
		    var i = 0;

		    while (i < input.length) {
		        chr1 = input[i++];
		        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
		        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

		        enc1 = chr1 >> 2;
		        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
		        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
		        enc4 = chr3 & 63;

		        if (isNaN(chr2)) {
		            enc3 = enc4 = 64;
		        } else if (isNaN(chr3)) {
		            enc4 = 64;
		        }
		        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
		                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
		    }
		    return output;
		}

		function init(){
			var canvas = document.getElementsByTagName('canvas')[0];
			var canvasWidth  = canvas.width;
			var canvasHeight = canvas.height;
			var ctx = canvas.getContext('2d');
			var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

			var buf = new ArrayBuffer(imageData.data.length);
			var buf8 = new Uint8ClampedArray(buf);
			var data = new Uint32Array(buf);

			for (var y = 0; y < canvasHeight; ++y) {
			    for (var x = 0; x < canvasWidth; ++x) {
			        var value = x * y & 0xff;

			        data[y * canvasWidth + x] =
			            (255   << 24) |    // alpha
			            (value << 16) |    // blue
			            (value <<  8) |    // green
			             value;            // red
			    }
			}

			imageData.data.set(buf8);

			ctx.putImageData(imageData, 0, 0);
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>BASE 64 Data</title></head>
	<body>
	<canvas width="500" height="200"></canvas>
	<script>
	window.BlobBuilder = window.BlobBuilder \|\| window.WebKitBlobBuilder \|\|
	window.MozBlobBuilder \|\| window.MSBlobBuilder;
	window.URL = window.URL \|\| window.webkitURL;
	window.onload = function(){
	var canvas = document.querySelector('canvas');
	var context = canvas.getContext('2d');
	//console.log(context);
	var xhr = new XMLHttpRequest();
	xhr.open('GET','blob.png',true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(e){
	if(this.status === 200)
	{

	var blob = new Blob([this.response], {type: 'image/png'});
	var img = document.createElement('img');
	img.onload = function(e) {
	window.URL.revokeObjectURL(img.src);
	};
	img.src = window.URL.createObjectURL(blob);
	document.body.appendChild(img);

	var bytes = new Uint8Array(this.response);
	var bytesLength = new Uint8ClampedArray(this.response);
	var imageData = context.getImageData(0,0,canvas.width, canvas.height);
	// for (var i=0; i<bytes.length; i++) {
	// image.data[i] = bytes[i];
	// }

	imageData.data.set(bytesLength);
	context.putImageData(imageData, 0, 0);

	var img = document.createElement('img');
	img.src = 'data:image/png;base64,'+encode(bytes);
	document.body.appendChild(img);

	}
	}
	xhr.send();
	}
	function encode (input) {
	var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
	var output = "";
	var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
	var i = 0;

	while (i < input.length) {
	chr1 = input[i++];
	chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
	chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

	enc1 = chr1 >> 2;
	enc2 = ((chr1 & 3) << 4) \| (chr2 >> 4);
	enc3 = ((chr2 & 15) << 2) \| (chr3 >> 6);
	enc4 = chr3 & 63;

	if (isNaN(chr2)) {
	enc3 = enc4 = 64;
	} else if (isNaN(chr3)) {
	enc4 = 64;
	}
	output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
	keyStr.charAt(enc3) + keyStr.charAt(enc4);
	}
	return output;
	}

	function init(){
	var canvas = document.getElementsByTagName('canvas')[0];
	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;
	var ctx = canvas.getContext('2d');
	var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

	var buf = new ArrayBuffer(imageData.data.length);
	var buf8 = new Uint8ClampedArray(buf);
	var data = new Uint32Array(buf);

	for (var y = 0; y < canvasHeight; ++y) {
	for (var x = 0; x < canvasWidth; ++x) {
	var value = x * y & 0xff;

	data[y * canvasWidth + x] =
	(255 << 24) \| // alpha
	(value << 16) \| // blue
	(value << 8) \| // green
	value; // red
	}
	}

	imageData.data.set(buf8);

	ctx.putImageData(imageData, 0, 0);
	}
	</script>
	</body>
	</html>