ccloli · June 21, 2017 13:30
diff --git a/histogram-grayscale.html b/histogram-grayscale.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>图像直方图对比</title>
 	<style>
 	* {
 		box-sizing: border-box;
 	}
 	.box {
 		margin: 0 auto;
 		width: 50em;
 	}
 	.sec {
 		padding: 1em;
 		width: 50%;
 		float: left;
 	}
 	.img-wrapper {
 		width: 100%;
 		height: 14em;
 		position: relative;
 		margin: 1em 0;
 		border: 1px solid #eeeeee;
 	}
 	.img {
 		max-width: 100%;
 		max-height: 14em;
 		display: block;
 		position: absolute;
 		left: 0;
 		right: 0;
 		top: 0;
 		bottom: 0;
 		margin: auto;
 	}
 	.img-origin,
 	.img-wrapper:hover .img-grayscale {
 		display: none;
 	}
 	.img-wrapper:hover .img-origin {
 		display: block;
 	}
 	.result {
 		width: 100%;
 		height: 12.5em;
 	}
 	</style>
 </head>
 <body>
 	<div class="box">
 		<h1>图像直方图对比</h1>
 		<div class="sec">
 			<input type="file" class="file" accept="image/*">
 			<div class="img-wrapper">
 				<img class="img img-grayscale">
 				<img class="img img-origin">
 			</div>
 			<canvas width="368" height="200" class="result"></canvas>
 		</div>
 		<div class="sec">
 			<input type="file" class="file" accept="image/*">
 			<div class="img-wrapper">
 				<img class="img img-grayscale">
 				<img class="img img-origin">
 			</div>
 			<canvas width="368" height="200" class="result"></canvas>
 		</div>
 	</div>
 	<script>
 	(function(){
 		'use strict';

 		var tempCanvas = document.createElement('canvas');

 		function canvasInit(canvas, width, height) {
 			canvas.width = width || canvas.offsetWidth;
 			canvas.height = height || canvas.offsetHeight;
 			canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
 		}

 		function drawImage(file, imgWrapper, result) {
 			var url = URL.createObjectURL(file);
 			var img = new Image();
 			img.addEventListener('load', function(){
 				drawGrayscale(img, imgWrapper, result);
 			});
 			img.src = url;
 			imgWrapper.querySelector('.img-origin').src = url;
 		}

 		function gray(r, g, b) {
 			return Math.round(0.11 * r + 0.59 * g + 0.3 * b);
 		}

 		function drawGrayscale(img, imgWrapper, result) {
 			canvasInit(tempCanvas, img.width, img.height);
 			var canvasContext = tempCanvas.getContext('2d');
 			canvasContext.drawImage(img, 0, 0);
 			var source = canvasContext.getImageData(0, 0, img.width, img.height);
 			var data = source.data;

 			var grayscale = new Array(256);
 			for (var i = 0; i < 256; i++) {
 				grayscale[i] = 0;
 			}
 			
 			var max = 0;
 			for (var i = 0, g; i < data.length; i += 4) {
 				g = gray(data[i], data[i + 1], data[i + 2]);
 				grayscale[g] = (grayscale[g] || 0) + 1;
 				data[i] = data[i + 1] = data[i + 2] = g;
 				
 				if (grayscale[g] > max) {
 					max = grayscale[g];
 				}
 			}
 			canvasContext.putImageData(source, 0, 0);
 			drawResult(grayscale, max, result);

 			tempCanvas.toBlob(function(blob){
 				var url = URL.createObjectURL(blob);
 				imgWrapper.querySelector('.img-grayscale').src = url;
 			});
 		}

 		function drawResult(grayscale, max, result) {
 			canvasInit(result);
 			var canvasContext = result.getContext('2d');
 			var gradient = canvasContext.createLinearGradient(0, 0, result.width, 0);
 			gradient.addColorStop(0, '#000000');
 			gradient.addColorStop(1, '#ffffff');
 			canvasContext.fillStyle = gradient;
 			canvasContext.fillRect(0, 182, result.width, 18);

 			var cellWidth = result.width / 256;
 			grayscale.forEach(function(elem, index){
 				var gs = ('0' + index.toString(16)).substr(-2);
 				var offset = (max - elem) / max * 180;
 				canvasContext.fillStyle = '#333333';
 				canvasContext.fillRect(index * cellWidth, offset, cellWidth, 180 - offset);
 			});
 		}

 		document.querySelectorAll('.sec').forEach(function(elem){
 			var file = elem.querySelector('.file');
 			var imgWrapper = elem.querySelector('.img-wrapper');
 			var result = elem.querySelector('.result');

 			file.addEventListener('change', function(){
 				drawImage(file.files[0], imgWrapper, result);
 			});
 		});
 	})();
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>图像直方图对比</title>
	<style>
	* {
	box-sizing: border-box;
	}
	.box {
	margin: 0 auto;
	width: 50em;
	}
	.sec {
	padding: 1em;
	width: 50%;
	float: left;
	}
	.img-wrapper {
	width: 100%;
	height: 14em;
	position: relative;
	margin: 1em 0;
	border: 1px solid #eeeeee;
	}
	.img {
	max-width: 100%;
	max-height: 14em;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	}
	.img-origin,
	.img-wrapper:hover .img-grayscale {
	display: none;
	}
	.img-wrapper:hover .img-origin {
	display: block;
	}
	.result {
	width: 100%;
	height: 12.5em;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<h1>图像直方图对比</h1>
	<div class="sec">
	<input type="file" class="file" accept="image/*">
	<div class="img-wrapper">
	<img class="img img-grayscale">
	<img class="img img-origin">
	</div>
	<canvas width="368" height="200" class="result"></canvas>
	</div>
	<div class="sec">
	<input type="file" class="file" accept="image/*">
	<div class="img-wrapper">
	<img class="img img-grayscale">
	<img class="img img-origin">
	</div>
	<canvas width="368" height="200" class="result"></canvas>
	</div>
	</div>
	<script>
	(function(){
	'use strict';

	var tempCanvas = document.createElement('canvas');

	function canvasInit(canvas, width, height) {
	canvas.width = width \|\| canvas.offsetWidth;
	canvas.height = height \|\| canvas.offsetHeight;
	canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
	}

	function drawImage(file, imgWrapper, result) {
	var url = URL.createObjectURL(file);
	var img = new Image();
	img.addEventListener('load', function(){
	drawGrayscale(img, imgWrapper, result);
	});
	img.src = url;
	imgWrapper.querySelector('.img-origin').src = url;
	}

	function gray(r, g, b) {
	return Math.round(0.11 * r + 0.59 * g + 0.3 * b);
	}

	function drawGrayscale(img, imgWrapper, result) {
	canvasInit(tempCanvas, img.width, img.height);
	var canvasContext = tempCanvas.getContext('2d');
	canvasContext.drawImage(img, 0, 0);
	var source = canvasContext.getImageData(0, 0, img.width, img.height);
	var data = source.data;

	var grayscale = new Array(256);
	for (var i = 0; i < 256; i++) {
	grayscale[i] = 0;
	}

	var max = 0;
	for (var i = 0, g; i < data.length; i += 4) {
	g = gray(data[i], data[i + 1], data[i + 2]);
	grayscale[g] = (grayscale[g] \|\| 0) + 1;
	data[i] = data[i + 1] = data[i + 2] = g;

	if (grayscale[g] > max) {
	max = grayscale[g];
	}
	}
	canvasContext.putImageData(source, 0, 0);
	drawResult(grayscale, max, result);

	tempCanvas.toBlob(function(blob){
	var url = URL.createObjectURL(blob);
	imgWrapper.querySelector('.img-grayscale').src = url;
	});
	}

	function drawResult(grayscale, max, result) {
	canvasInit(result);
	var canvasContext = result.getContext('2d');
	var gradient = canvasContext.createLinearGradient(0, 0, result.width, 0);
	gradient.addColorStop(0, '#000000');
	gradient.addColorStop(1, '#ffffff');
	canvasContext.fillStyle = gradient;
	canvasContext.fillRect(0, 182, result.width, 18);

	var cellWidth = result.width / 256;
	grayscale.forEach(function(elem, index){
	var gs = ('0' + index.toString(16)).substr(-2);
	var offset = (max - elem) / max * 180;
	canvasContext.fillStyle = '#333333';
	canvasContext.fillRect(index * cellWidth, offset, cellWidth, 180 - offset);
	});
	}

	document.querySelectorAll('.sec').forEach(function(elem){
	var file = elem.querySelector('.file');
	var imgWrapper = elem.querySelector('.img-wrapper');
	var result = elem.querySelector('.result');

	file.addEventListener('change', function(){
	drawImage(file.files[0], imgWrapper, result);
	});
	});
	})();
	</script>
	</body>
	</html>