image2contur (grok-3)

by positroid

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Контурная раскраска</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            text-align: center;
        }
        canvas {
            max-width: 100%;
            border: 1px solid #ccc;
        }
        .controls {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Контурная раскраска</h2>
        <input type="file" id="imageInput" accept="image/*">
        <div class="controls">
            <label>Порог: <input type="range" id="threshold" min="10" max="255" value="100"></label><br>
            <label>Размытие: <input type="range" id="blur" min="0" max="10" value="2"></label><br>
            <label>Детализация: <input type="range" id="detail" min="1" max="10" value="3"></label>
        </div>
        <canvas id="canvas"></canvas>
    </div>

    <script>
        const imageInput = document.getElementById('imageInput');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const thresholdSlider = document.getElementById('threshold');
        const blurSlider = document.getElementById('blur');
        const detailSlider = document.getElementById('detail');

        let originalImage = null;

        imageInput.addEventListener('change', handleImage);
        thresholdSlider.addEventListener('input', processImage);
        blurSlider.addEventListener('input', processImage);
        detailSlider.addEventListener('input', processImage);

        function handleImage(e) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    originalImage = img;
                    canvas.width = img.width;
                    canvas.height = img.height;
                    processImage();
                }
                img.src =...