<!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>