画像をリサイズして表示、または保存する

以下が、JavaScriptを使って複数の画像を一括でリサイズして表示し、JPG形式で保存できるアプリの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
	<title>画像リサイズアプリ</title>
	<meta charset="utf-8">
	<style>
		body {
			padding: 20px;
		}
		h1 {
			text-align: center;
			margin-bottom: 20px;
		}
		form {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			max-width: 800px;
			margin: 0 auto;
			text-align: center;
		}
		.image-container {
			margin: 10px;
			text-align: center;
		}
		.image-container img {
			max-width: 600px;
			max-height: 400px;
			background-color: #ffffff;
		}
		.buttons-container {
			flex-basis: 100%;
			margin-top: 20px;
			text-align: center;
		}
		button {
			font-size: 16px;
			padding: 10px 20px;
			background-color: #4CAF50;
			color: #FFFFFF;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>画像をリサイズして表示、または保存する</h1>
	<form>
		<label for="file-input">画像を選択してください（複数可）：</label>
		<input type="file" id="file-input" name="image" multiple accept="image/*">
		<div class="buttons-container">
			<button type="button" onclick="displayResizedImages()">リサイズして表示</button>
			<button type="button" onclick="saveResizedImages()">リサイズして保存</button>
		</div>
	</form>
	<div id="images-container"></div>
	<script>
		function displayResizedImages() {
			var imagesContainer = document.getElementById('images-container');
			imagesContainer.innerHTML = '';
			var files = document.getElementById('file-input').files;

			for (var i = 0; i < files.length; i++) {
				var imageContainer = document.createElement('div');
				imageContainer.classList.add('image-container');

				var img = document.createElement('img');
				img.onload = function() {
					if (this.width > 600) {
						this.height *= (600 / this.width);
						this.width = 600;
					}

					if (this.height > 400) {
						this.width *= (400 / this.height);
						this.height = 400;
					}
				};

				img.src = window.URL.createObjectURL(files[i]);

				imageContainer.appendChild(img);
				imagesContainer.appendChild(imageContainer);
			}
		}

		function saveResizedImages() {
			var files = document.getElementById('file-input').files;

			for (var i = 0; i < files.length; i++) {
				var img = new Image();
				var reader = new FileReader();
				reader.onload = function(e) {
					img.onload = function() {
						if (this.width > 600) {
							this.height *= (600 / this.width);
							this.width = 600;
						}

						if (this.height > 400) {
							this.width *= (400 / this.height);
							this.height = 400;
						}

						var canvas = document.createElement('canvas');
						canvas.width = this.width;
						canvas.height = this.height;
						var ctx = canvas.getContext('2d');
						ctx.drawImage(this, 0, 0, this.width, this.height);

						var anchor = document.createElement('a');
						anchor.href = canvas.toDataURL('image/jpeg', 0.8);
						anchor.download = 'resized_' + files[i].name.replace(/\.[^/.]+$/, "") + '.jpg';
						anchor.style.display = 'none';
						document.body.appendChild(anchor);
						anchor.click();
					};
					img.src = e.target.result;
				};
				reader.readAsDataURL(files[i]);
			}
		}
	</script>
</body>
</html>
```

ジョークとして、以下のような文言を追加してみました。

<h1>画像をリサイズして表示、または保存する</h1>

「今回のアプリの開発者は、元々はめっぽう料理が得意だったそうだが、その後、画像処理にも興味を持ったらしい。その理由を聞くと、<strong>'料理写真が美味しそうに見せるため'</strong>だった。その熱意がこのアプリに現れているというわけだ！」