altbdoor · November 9, 2016 10:03
diff --git a/img_to_html_css_pixels.html b/img_to_html_css_pixels.html
 <!doctype html>
 <html>
 <head>
 	<style>
 		/* default css */
 		#output {box-shadow:0 0 5px red; position:relative}
 		.output-block {width:1px; height:1px; position:absolute}
 	</style>
 	<style id="stylesheet"></style>
 </head>
 <body>
 	<input type="file" id="input-file">
 	<canvas id="canvas" style="display:none"></canvas>
 	<p id="status">Ready</p>
 	<div id="output"></div>
 	
 	<script>
 		// http://stackoverflow.com/questions/667045/getpixel-from-html-canvas
 		function rgbToHex (r, g, b) {
 			if (r > 255 || g > 255 || b > 255) {
 				throw "Invalid color component";
 			}
 			
 			var c = ((r << 16) | (g << 8) | b).toString(16);
 			return ("000000" + c).slice(-6);
 		}
 		
 		// http://stackoverflow.com/questions/13938686/can-i-load-a-local-file-into-an-html-canvas-element
 		document.getElementById('input-file').onchange = function () {
 			var file = this.files[0];
 			var fr = new FileReader();
 			
 			fr.onload = function () {
 				var img = new Image();
 				img.onload = function () {
 					var canvas = document.getElementById("canvas");
 					canvas.width = img.width;
 					canvas.height = img.height;
 					
 					var output = document.getElementById("output");
 					output.innerHTML = '';
 					output.style.width = img.width + 'px';
 					output.style.height = img.height + 'px';
 					
 					var ctx = canvas.getContext("2d");
 					ctx.drawImage(img, 0, 0);
 					
 					var uniqueColors = [];
 					var uniqueColorsText = '';
 					
 					var status = document.getElementById('status');
 					
 					for (var i=0; i<canvas.height; i++) {
 						for (var j=0; j<canvas.width; j++) {
 							var data = ctx.getImageData(j, i, 1, 1).data;
 							var color = rgbToHex(data[0], data[1], data[2]);
 							var div = document.createElement('div');
 							
 							div.className = 'output-block hex-' + color;
 							div.style.top = i + 'px';
 							div.style.left = j + 'px';
 							
 							output.appendChild(div);
 							
 							if (uniqueColors.indexOf(color) === -1) {
 								uniqueColors.push(color);
 								
 								uniqueColorsText += '.hex-' + color + '{background-color:#' + color + '}';
 							}
 							
 							status.innerHTML = 'Processing x' + j + ' y' + i;
 						}
 					}
 					
 					document.getElementById('stylesheet').innerHTML = uniqueColorsText;
 				};
 				img.src = fr.result;
 			};
 			fr.readAsDataURL(file);
 			
 			console.log(file);
 		};
 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>
	/* default css */
	#output {box-shadow:0 0 5px red; position:relative}
	.output-block {width:1px; height:1px; position:absolute}
	</style>
	<style id="stylesheet"></style>
	</head>
	<body>
	<input type="file" id="input-file">
	<canvas id="canvas" style="display:none"></canvas>
	<p id="status">Ready</p>
	<div id="output"></div>

	<script>
	// http://stackoverflow.com/questions/667045/getpixel-from-html-canvas
	function rgbToHex (r, g, b) {
	if (r > 255 \|\| g > 255 \|\| b > 255) {
	throw "Invalid color component";
	}

	var c = ((r << 16) \| (g << 8) \| b).toString(16);
	return ("000000" + c).slice(-6);
	}

	// http://stackoverflow.com/questions/13938686/can-i-load-a-local-file-into-an-html-canvas-element
	document.getElementById('input-file').onchange = function () {
	var file = this.files[0];
	var fr = new FileReader();

	fr.onload = function () {
	var img = new Image();
	img.onload = function () {
	var canvas = document.getElementById("canvas");
	canvas.width = img.width;
	canvas.height = img.height;

	var output = document.getElementById("output");
	output.innerHTML = '';
	output.style.width = img.width + 'px';
	output.style.height = img.height + 'px';

	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0);

	var uniqueColors = [];
	var uniqueColorsText = '';

	var status = document.getElementById('status');

	for (var i=0; i<canvas.height; i++) {
	for (var j=0; j<canvas.width; j++) {
	var data = ctx.getImageData(j, i, 1, 1).data;
	var color = rgbToHex(data[0], data[1], data[2]);
	var div = document.createElement('div');

	div.className = 'output-block hex-' + color;
	div.style.top = i + 'px';
	div.style.left = j + 'px';

	output.appendChild(div);

	if (uniqueColors.indexOf(color) === -1) {
	uniqueColors.push(color);

	uniqueColorsText += '.hex-' + color + '{background-color:#' + color + '}';
	}

	status.innerHTML = 'Processing x' + j + ' y' + i;
	}
	}

	document.getElementById('stylesheet').innerHTML = uniqueColorsText;
	};
	img.src = fr.result;
	};
	fr.readAsDataURL(file);

	console.log(file);
	};
	</script>
	</body>
	</html>