HTML上で指定した画像とそのネガを表示します。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ファイル読み込みとネガ表示</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.image-box {
display: flex;
flex-direction: column;
align-items: center;
}
img {
max-width: 300px;
height: auto;
border: 2px solid #ccc;
border-radius: 10px;
}
.negative img {
filter: invert(1);
}
.caption {
margin-top: 10px;
font-size: 14px;
color: #333;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h2>画像とネガ画像を表示</h2>
<p>画像ファイルを選択してください:</p>
<input type="file" id="fileInput" accept="image/*">
<!--accept="image/*" で画像ファイルのみに制限-->
<div id="imageContainer" class="container hidden">
<div class="image-box">
<img id="originalImage" alt="オリジナル画像">
<div class="caption">オリジナル画像</div>
</div>
<div class="image-box negative">
<img id="negativeImage" alt="ネガ画像">
<div class="caption">ネガ画像</div>
</div>
</div>
<script>
document.getElementById("fileInput").
addEventListener("change", function(event) {
const file = event.target.files[0];
if (file) {
// FileReader を使用して選択したファイルを読み込む
const reader = new FileReader();
reader.onload = function(e) {
const imageSrc = e.target.result;
// オリジナル画像を表示
const originalImage =
document.getElementById("originalImage");
originalImage.src = imageSrc;
// ネガ画像を表示
// ネガ画像の表示は .negative クラスで制御
const negativeImage = document.
getElementById("negativeImage");
negativeImage.src = imageSrc;
// コンテナを表示
// 初期状態では画像表示エリアを非表示 (.hidden) にし、
// 画像が読み込まれた後に表示
document.getElementById("imageContainer").
classList.remove("hidden");
};
// readAsDataURL を使い、画像をデータURLとして取得
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
<!-- index.html -->
実行したら［ファイルを表示］で処理ファイルを指定すれば・・・
一気に両方を表示します。
