Категории

• Главная
• 1С
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• macOS
• mysql
• php
• Windows
• Безопасность
• Железо
• Защита данных
• Простотак
• Сети LAN
• Создание сайтов
• Электрика

HTML + JavaScript - изменение размера картинки

23.01.2026 | коды из категории: Создание сайтов

Загрузи свою картинку и измени её размер

Скачать изображение

html

  <h1>Загрузи свою картинку и измени её размер</h1>

  <div class="upload-area">
    <label for="imageUpload">Выбери файл изображения:</label>
    <input type="file" id="imageUpload" accept="image/*">
  </div>

  <div class="controls hidden" id="resizeControls">
    <label for="widthSlider">Ширина: <span id="widthValue">300</span> px</label>
    <input type="range" id="widthSlider" min="50" max="1200" value="300">

    <label for="heightSlider">Высота: <span id="heightValue">200</span> px</label>
    <input type="range" id="heightSlider" min="50" max="800" value="200">
  </div>
  
  <img id="resizableImage" src="" alt="Твоя картинка" class="hidden">
<button id="downloadBtn" class="hidden">Скачать изображение</button>

java-script

  <script>
    const fileInput = document.getElementById('imageUpload');
    const img = document.getElementById('resizableImage');
    const resizeControls = document.getElementById('resizeControls');

    const widthSlider = document.getElementById('widthSlider');
    const heightSlider = document.getElementById('heightSlider');
    const widthValue = document.getElementById('widthValue');
    const heightValue = document.getElementById('heightValue');

    // Обработка выбора файла
    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file || !file.type.startsWith('image/')) {
        alert('Пожалуйста, выберите изображение (например, JPG, PNG).');
        return;
      }

      const reader = new FileReader();
      reader.onload = (event) => {
        img.src = event.target.result;
        img.classList.remove('hidden');

        // Показываем элементы управления
        resizeControls.classList.remove('hidden');
downloadBtn.classList.remove('hidden');
        // Устанавливаем начальные значения слайдеров по реальному размеру картинки
        img.onload = () => {
          widthSlider.value = img.naturalWidth;
          heightSlider.value = img.naturalHeight;
          widthValue.textContent = img.naturalWidth;
          heightValue.textContent = img.naturalHeight;

          // Применяем начальный размер
          img.style.width = img.naturalWidth + 'px';
          img.style.height = img.naturalHeight + 'px';
        };
      };
      reader.readAsDataURL(file);
    });

    // Изменение ширины
    widthSlider.addEventListener('input', () => {
      const w = widthSlider.value;
      img.style.width = w + 'px';
      widthValue.textContent = w;
    });

    // Изменение высоты
    heightSlider.addEventListener('input', () => {
      const h = heightSlider.value;
      img.style.height = h + 'px';
      heightValue.textContent = h;
    });
// Кнопка "Скачать"
const downloadBtn = document.getElementById('downloadBtn');

downloadBtn.addEventListener('click', () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Устанавливаем размеры canvas по текущему отображаемому размеру изображения
  const displayWidth = parseInt(img.style.width) || img.naturalWidth;
  const displayHeight = parseInt(img.style.height) || img.naturalHeight;

  canvas.width = displayWidth;
  canvas.height = displayHeight;

  // Рисуем изображение на canvas
  ctx.drawImage(img, 0, 0, displayWidth, displayHeight);

  // Преобразуем в ссылку для скачивания
  const link = document.createElement('a');
  link.download = 'изменённое-изображение.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
});
  </script>

css

  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
    }
    .upload-area {
      margin-bottom: 20px;
    }
    .controls {
      margin: 20px 0;
    }
    label {
      display: block;
      margin: 10px 0 5px;
    }
    input[type="range"] {
      width: 300px;
    }
    img#resizableImage {
      margin-top: 15px;
      border: 1px solid #ddd;
      max-width: 100%;
      height: auto;
      display: block;
    }
    .hidden {
      display: none;
    }
  </style>

← Назад к списку