HTML上で指定画像をRGB別に表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>RGBチャンネル分解</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 10px;
background-color: black;
color: white;
}
canvas {
margin: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>選択した画像をRGBを分解表示</h3>
<input type="file" id="imageInput"
accept="image/*"><br><br>
<div>
<canvas id="canvasR"></canvas>
<canvas id="canvasG"></canvas>
<canvas id="canvasB"></canvas>
</div>
<script>
const img = new Image();
const fileInput =
document.getElementById("imageInput");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
img.onload = processImage;
};
reader.readAsDataURL(file);
}
});
function processImage() {
const width = img.width;
const height = img.height;
// 各キャンバス設定
const canvasR = document.getElementById("canvasR");
const canvasG = document.getElementById("canvasG");
const canvasB = document.getElementById("canvasB");
[canvasR, canvasG, canvasB].forEach(canvas => {
canvas.width = width;
canvas.height = height;
});
const ctxR = canvasR.getContext("2d");
const ctxG = canvasG.getContext("2d");
const ctxB = canvasB.getContext("2d");
ctxR.drawImage(img, 0, 0);
ctxG.drawImage(img, 0, 0);
ctxB.drawImage(img, 0, 0);
// getImageData() でピクセルデータを取得
const imageDataR =
ctxR.getImageData(0, 0, width, height);
const imageDataG =
ctxG.getImageData(0, 0, width, height);
const imageDataB =
ctxB.getImageData(0, 0, width, height);
const dataR = imageDataR.data;
const dataG = imageDataG.data;
const dataB = imageDataB.data;
// data[i] (R), data[i+1] (G), data[i+2] (B) を個別に操作
for (let i = 0; i < dataR.length; i += 4) {
const r = dataR[i];
const g = dataR[i + 1];
const b = dataR[i + 2];
// 赤のみ（緑・青を0にする）
dataR[i] = r;
dataR[i + 1] = 0;
dataR[i + 2] = 0;
// 緑のみ（赤・青を0にする）
dataG[i] = 0;
dataG[i + 1] = g;
dataG[i + 2] = 0;
// 青のみ（赤・緑を0にする）
dataB[i] = 0;
dataB[i + 1] = 0;
dataB[i + 2] = b;
}
// putImageData() で加工後の画像を表示
ctxR.putImageData(imageDataR, 0, 0);
ctxG.putImageData(imageDataG, 0, 0);
ctxB.putImageData(imageDataB, 0, 0);
}
</script>
</body>
</html>
用意した画像
実行したら、処理したい画像ファイルを選択すれば・・・
RGB別に表示されます。
