Категории

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

Java-script уменьшения картинки по кнопке

<div style="max-width: 600px; margin: 20px auto; font-family: sans-serif;">
  <h3>Уменьшить изображение</h3>
  <input type="file" id="imageUpload" accept="image/*" />
  <br><br>
  <label>Уменьшить на: 
    <select id="scalePercent">
      <option value="75">25%</option>
      <option value="50" selected>50%</option>
      <option value="25">75%</option>
      <option value="10">90%</option>
    </select>
  </label>
  <br><br>
  <button onclick="resizeImage()">Уменьшить и скачать</button>
  <br><br>
  <canvas id="previewCanvas" style="display:none;"></canvas>
</div>

<script>
function resizeImage() {
  const fileInput = document.getElementById('imageUpload');
  const file = fileInput.files[0];
  if (!file) {
    alert('Сначала выберите изображение!');
    return;
  }

  const percent = parseInt(document.getElementById('scalePercent').value);
  const scale = percent / 100;

  const img = new Image();
  img.src = URL.createObjectURL(file);

  img.onload = function () {
    const canvas = document.getElementById('previewCanvas');
    const ctx = canvas.getContext('2d');

    const newWidth = img.width * scale;
    const newHeight = img.height * scale;

    canvas.width = newWidth;
    canvas.height = newHeight;

    ctx.drawImage(img, 0, 0, newWidth, newHeight);

    // Скачиваем как JPEG с качеством 0.85 (можно изменить)
    const link = document.createElement('a');
    link.download = 'resized-image.jpg';
    link.href = canvas.toDataURL('image/jpeg', 0.85);
    link.click();

    URL.revokeObjectURL(img.src); // освобождаем память
  };
}
</script>

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