ccloli/histogram-grayscale.html

## 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>