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: 10px;
background-color: black;
color: white;
}
canvas {
background: black;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<h3>選択した画像をモノカラーに変換</h3>
<input type="file" id="imageInput"
accept="image/*"><br><br>
<label for="colorPicker">変換する色：</label>
<input type="color" id="colorPicker"
value="#ff0000"> 
<button onclick="convertImage()">作成</button>
<br><br>
<canvas id="canvas"></canvas>
<script>
const fileInput =
document.getElementById("imageInput");
const colorPicker =
document.getElementById("colorPicker");
const canvas =
document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
// 画像を選択
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 = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
};
reader.readAsDataURL(file);
}
});
function convertImage() {
if (!img.src) return;
ctx.drawImage(img, 0, 0);
const imageData =
ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const selectedColor = hexToRgb(colorPicker.value);
for (let i = 0; i < data.length; i += 4) {
let gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
if (gray < 128) {
data[i] = selectedColor.r;
data[i + 1] = selectedColor.g;
data[i + 2] = selectedColor.b;
} else {
data[i] = data[i + 1] = data[i + 2] = 255; // 白
}
}
ctx.putImageData(imageData, 0, 0);
}
function hexToRgb(hex) {
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
}
</script>
</body>
</html>
実行したら、処理したい画像ファイルを選択します。
ファイルを表示したら［変換する色］を設定して［作成］クリックすると・・・
指定色と白のモノカラーになります。
処理後でも［変換する色］を再指定して［作成］クリックすると・・・
処理結果に反映されます。
