HTML5 и JS: как заменить исходное изображение на уменьшенное

Быстрый ответ

Если требуется преобразовать измерения изображения перед его отправкой на сервер, воспользуйтесь элементом <canvas> из спецификации HTML5. Он обладает встроенными функциональными возможностями для масштабирования изображения, выбранного пользователем через элемент <input type="file">.

document.getElementById('imageInput').onchange = function(e) {
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      let canvas = document.createElement('canvas');
      canvas.width = 100; // Задайте требуемые размеры
      canvas.height = 100; // Определите высоту и ширину 
      let ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      console.log(canvas.toDataURL()); // Изображение отмасштабировано и готово к использованию
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(e.target.files[0]);
};

Присвойте canvas.width и canvas.height нужные значения, и метод drawImage соответственно подстроит размер изображения. Метод canvas.toDataURL() выдаст вам результат в формате base64.

Подробное руководство по изменению размеров изображений

Давайте разберём процесс масштабирования изображений более детально, при этом добавим немного юмора для легкости восприятия.

Эффективная переработка изображений вида "большого разрешения"

Для работы с большими файлами ключевым является понятие об удержании производительности и выбегании от перегрузки памяти. Используйте метод URL.createObjectURL, который лучше всего идет в связке с большими изображениями, нежели классические Data URL.

document.getElementById('imageInput').onchange = function(e) {
  const file = e.target.files[0];
  if (file.type.match(/image.*/)) {
    const img = new Image();
    img.onload = function() {
      // Поздравляем: изображение уменьшено!
      URL.revokeObjectURL(img.src); // Освобождаем память
    };
    img.src = URL.createObjectURL(file);
  }
};

Подробнее об этом расскажет наш спикер на видео

Сохраняем пропорции, избегаем искажений

При изменении размера важно сохранить пропорции, чтобы изображение не исказилось. Рассчитайте новые параметры, основываясь на максимально допустимых размерах. Используйте метод canvas.toDataURL с выбором качества, чтобы контролировать конечный результат:

// В путь: по прямому курсу к станции "Сокращение размеров"

canvas.toDataURL('image/jpeg', 0.9); // Сохраняем качество в 90%

Преобразуем canvas в Blob

Если формат base64 вам не подходит, можно провести конвертацию данных с canvas в blob. Ниже представлена функция для выполнения этой задачи:

function canvasToBlob(canvas, callback) {
  canvas.toBlob(function(blob) {
    callback(blob);
  }, 'image/jpeg', 0.9); // Blob обязательно станет популярен
}

Отправляем артовый Blob на сервер

После преобразования можно отправить blob на сервер. Для этих целей отлично подойдут FormData и асинхронный запрос через XMLHttpRequest или fetch. Важным также является правильная обработка ошибок:

function uploadImage(blob) {
  let formData = new FormData();
  formData.append('image', blob, 'image.jpg');

  // Здесь AJAX вам в помощь...
}

canvasToBlob(canvas, function(blob) {
  uploadImage(blob); // И будем работать с blob'ами
});

Управляем ориентацией и выбираем формат

Не стоит забывать о ориентации: перед изменением размера обработаем EXIF-данные для правильного поворота изображения. Для создания компактных снимков используем формат webp через canvas.toDataURL('image/webp'), если эта деталь важна для оптимизации процесса.

Визуализация

Меняемый размер изображения перед его отправкой на сервер – это и есть тот случай, когда почтовый сервис способен превратить большие посылки в компактные письма:

До: [🖼️📦]     --> Большое изображение в большом коробе
Процесс: [🤏✉️]  --> Ужимаем до размеров конверта
После: [🖼️✉️]    --> Изображение укладывается в конверт и готово к отправке

Итак, задача состоит в том, чтобы уменьшить объем данных без ущерба для качества с целью облегчения процесса загрузки.

От новичка до героя в области изменения размера изображений

Рассмотрим некоторые дополнительные аспекты масштабирования изображений и сохранения их визуального качества.

Основные проблемы и способы их решения

Работа с HTML5 и Canvas API может столкнуться с трудностями, связанными с MIME-типами, лимитами размера файла или политикой закрытости источников (same-origin). Здесь важно проводить проверку типов файлов, правильную обработку ошибок и учитывать ограничения в области безопасности.

Современное использование JavaScript

При использовании async/await код становится более структурированным и помогает грамотно управлять асинхронными действиями:

async function processImage(file) {
  // Элегантный и отлично обдуманный асинхронный код...
}

Вспомогательные функции

Создавайте универсальные функции для манипуляций с размерами изображений, это сделает обработку изображений в приложении более стандартизированной и унифицированной.

FormData

Если форма включает и какие-то другие данные, вы можете заменить исходное изображение в FormData на тот измененный вариант, используя тот же ключ. Это поможет сохранить структуру данных.

Полезные материалы

1. Canvas API – Web API | MDN — все об HTML5 Canvas API и обработке изображений.
2. Как разработать HTML5-загрузчик изображений – Mozilla Hacks — детальное руководство по HTML5 и File API
3. HTML DOM Input FileUpload Object — справочник по элементам загрузки файлов HTML.
4. Изменени размера изображения с помощью Canvas, перетаскивания и File API — блог о том, как использовать Canvas для манипуляций с изображениями.
5. GitHub – rossturner/HTML5-ImageUploader — наглядный пример из жизни репозитория GitHub, демонстрирующий возможности библиотеки для загрузки и изменения размеров изображений.
6. Чтение файлов в JavaScript — все о работе с файлами в современном JavaScript.