image2contur (chatGPT o3-mini-hight)

by positroid

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Контурная раскраска изображения</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    canvas {
      border: 1px solid #ccc;
      margin-top: 10px;
    }
    .controls {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Контурная раскраска изображения</h1>
  <input type="file" id="imageLoader" accept="image/*">
  <div class="controls">
    <label for="threshold">Порог: <span id="thresholdValue">128</span></label><br>
    <input type="range" id="threshold" min="0" max="255" value="128">
  </div>
  <canvas id="canvas"></canvas>

  <script>
    const imageLoader = document.getElementById('imageLoader');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const thresholdSlider = document.getElementById('threshold');
    const thresholdValueDisplay = document.getElementById('thresholdValue');

    let originalImage = null;

    imageLoader.addEventListener('change', handleImage, false);
    thresholdSlider.addEventListener('input', () => {
      thresholdValueDisplay.textContent = thresholdSlider.value;
      if(originalImage) {
        processImage();
      }
    });

    function handleImage(e) {
      const reader = new FileReader();
      reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
          // Сохраняем исходные данные изображения для повторной обработки
          originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
          processImage();
        }
        img.src = event.target.result;
      }
      reader.readAsDataURL(e.target.files[0]);
    }

    function processImage() {
      if (!originalImage) return;

      const width = originalImage.width;
      const height =...