画像補正アプリ

ここに画像をドラッグ＆ドロップしてください
<!DOCTYPE html>
<html>
<head>
	<title>画像補正アプリ</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
		}

		h1 {
			margin: 20px 0 0 20px;
			color: #555;
		}

		#dropzone {
			border: 5px dashed #ccc;
			padding: 20px;
			margin: 20px;
			text-align: center;
			cursor: pointer;
		}

		#image {
			max-width: 100%;
			display: none;
		}
	</style>
</head>
<body>
	<h1>画像補正アプリ</h1>

	<div id="dropzone">ここに画像をドラッグ＆ドロップしてください</div>

	<img id="image">

	<script>
		const dropzone = document.getElementById('dropzone');
		const image = document.getElementById('image');

		dropzone.addEventListener('dragover', function(e) {
			e.preventDefault();
			dropzone.style.borderColor = '#0077ff';
		});

		dropzone.addEventListener('dragleave', function(e) {
			e.preventDefault();
			dropzone.style.borderColor = '#ccc';
		});

		dropzone.addEventListener('drop', function(e) {
			e.preventDefault();
			dropzone.style.borderColor = '#ccc';

			const file = e.dataTransfer.files[0];

			const reader = new FileReader();
			reader.addEventListener('load', function() {
				const imgData = reader.result;

				image.src = imgData;
				image.style.display = 'block';

				const canvas = document.createElement('canvas');
				const ctx = canvas.getContext('2d');

				const img = new Image();
				img.addEventListener('load', function() {
					canvas.width = img.width;
					canvas.height = img.height;

					ctx.drawImage(img, 0, 0);

					const imageData = ctx.getImageData(0, 0, img.width, img.height);
					const data = imageData.data;

					for (let i = 0; i < data.length; i += 4) {
						const r = data[i];
						const g = data[i + 1];
						const b = data[i + 2];

						// 明るさムラ補正
						const avg = (r + g + b) / 3;
						const diffR = r - avg;
						const diffG = g - avg;
						const diffB = b - avg;
						data[i] = r - diffR;
						data[i + 1] = g - diffG;
						data[i + 2] = b - diffB;

						// ホワイトバランス調整
						data[i] = data[i] * 1.2;
						data[i + 1] = data[i + 1] * 1.1;
						data[i + 2] = data[i + 2] * 0.9;

						// ガンマ補正
						data[i] = Math.pow(data[i] / 255, 1.3) * 255;
						data[i + 1] = Math.pow(data[i + 1] / 255, 1.3) * 255;
						data[i + 2] = Math.pow(data[i + 2] / 255, 1.3) * 255;
					}

					ctx.putImageData(imageData, 0, 0);

					const newImgData = canvas.toDataURL('image/jpeg', 0.9);

					image.src = newImgData;
				});

				img.src = imgData;
			});

			reader.readAsDataURL(file);
		});
	</script>
</body>
</html>

（ジョーク：明るさムラ補正は、パン屋さんがたまにやっている「しっかり焼きあがった部分には大根おろしを塗って食べる」という補正と同じような効果があります）