HTML上で指定画像をVMYK別に表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CMYKチャンネル分解</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>選択した画像をCMYKを分解表示</h3>
<input type="file" id="imageInput"
accept="image/*"><br><br>
<div>
<canvas id="canvasC"></canvas>
<canvas id="canvasM"></canvas>
<canvas id="canvasY"></canvas>
<canvas id="canvasK"></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 canvasC = document.getElementById("canvasC");
const canvasM = document.getElementById("canvasM");
const canvasY = document.getElementById("canvasY");
const canvasK = document.getElementById("canvasK");
[canvasC, canvasM, canvasY, canvasK].
forEach(canvas => {
canvas.width = width;
canvas.height = height;
});
const ctxC = canvasC.getContext("2d");
const ctxM = canvasM.getContext("2d");
const ctxY = canvasY.getContext("2d");
const ctxK = canvasK.getContext("2d");
ctxC.drawImage(img, 0, 0);
ctxM.drawImage(img, 0, 0);
ctxY.drawImage(img, 0, 0);
ctxK.drawImage(img, 0, 0);
const imageDataC =
ctxC.getImageData(0, 0, width, height);
const imageDataM =
ctxM.getImageData(0, 0, width, height);
const imageDataY =
ctxY.getImageData(0, 0, width, height);
const imageDataK =
ctxK.getImageData(0, 0, width, height);
const dataC = imageDataC.data;
const dataM = imageDataM.data;
const dataY = imageDataY.data;
const dataK = imageDataK.data;
for (let i = 0; i < dataC.length; i += 4) {
const r = dataC[i] / 255;
const g = dataC[i + 1] / 255;
const b = dataC[i + 2] / 255;
// RGB → CMYK 変換
// CMYKの各成分は以下の式で計算
// || 0 はゼロ除算エラー防止処理
const k = 1 - Math.max(r, g, b);
const c = (1 - r - k) / (1 - k) || 0;
const m = (1 - g - k) / (1 - k) || 0;
const y = (1 - b - k) / (1 - k) || 0;
// グレースケール表示
// const gray = (r + g + b) / 3;
// dataK[i] = dataK[i + 1] = dataK[i + 2] = gray;
// 透明度の設定
// dataC[i + 3] = 128; // シアンの透明度を50%にする
// シアン
dataC[i] = (1 - c) * 255;
dataC[i + 1] = 255;
dataC[i + 2] = 255;
// マゼンタ
dataM[i] = 255;
dataM[i + 1] = (1 - m) * 255;
dataM[i + 2] = 255;
// イエロー
dataY[i] = 255;
dataY[i + 1] = 255;
dataY[i + 2] = (1 - y) * 255;
// ブラック
dataK[i] = k * 255;
dataK[i + 1] = k * 255;
dataK[i + 2] = k * 255;
}
ctxC.putImageData(imageDataC, 0, 0);
ctxM.putImageData(imageDataM, 0, 0);
ctxY.putImageData(imageDataY, 0, 0);
ctxK.putImageData(imageDataK, 0, 0);
}
</script>
</body>
</html>
用意した画像
実行したら、処理したい画像ファイルを選択すれば・・・
CMYK別に表示されます。
