Масштабирование изображения для canvas без обрезки в JS

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

Для масштабирования изображения под размеры холста с сохранением пропорций, можно воспользоваться таким кодом на JavaScript:

const canvas = document.getElementById('canvasID');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  let scale = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width – img.width * scale) / 2;
  let y = (canvas.height – img.height * scale) / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистка холста
  ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
};

img.crossOrigin = "Anonymous"; // Обход ограничений на кросс-доменные запросы
img.src = 'image.jpg'; // Путь до нужного изображения

Этот код загружает изображение, вычисляет коэффициент масштабирования, определяет координаты для центрирования и рисует изображение на холсте.

Разбор кода

В этом разделе подробно разъяснена логика работы данного кода, роль каждой команды, а также взаимодействие всех элементов между собой для корректного отображения изображения на холсте.

Сохранение пропорций изображения

При масштабировании крайне важно сохранить пропорции изображения. Для этого определяем соотношение размеров через Math.min(), выбирая меньшее из отношений размеров холста к размерам изображения.

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

Сохранение качества изображения

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

Работа с изображениями из различных источников

Могут возникнуть сложности при обработке изображений, загруженных из разных доменов. Установив атрибут crossOrigin в значение "Anonymous", мы обеспечиваем корректную работу с такими изображениями.

Подготовка холста

Перед тем как нанести на него изображение, холст необходимо очистить от предыдущих изображений. Для этого применяется метод clearRect().

Позиционирование изображения

Для центрирования изображения на холсте вычисляем координаты x и y. Это поможет нам правильно разместить изображение.

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

Процесс масштабирования в наглядной форме:

До масштабирования:
🖼️ Холст
🏞️ Исходное изображение

В процессе масштабирования:
🖼️ Холст
🏞️⇒🖼️ Адаптация изображения с сохранением пропорций для размещения на холсте

После масштабирования:
🖼️ Холст
🖼️ с 🏞️ Изображение, идеально вписавшееся в рамки холста

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

Более глубоко о масштабировании изображений

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

Контролируя размер холста и применяя расчёты для корректного размещения, мы устанавливаем границы отображения в команде drawImage. Именно это позволяет нам достичь идеальной центрированности изображения.

Очистка холста после работы

Как и после окончания рисования, следует привести рабочую область в порядок. В случае с холстом, по завершению масштабирования, необходимо вновь применить исходный масштаб.

Точное позиционирование

Иногда требуются небольшие коррективы в позиционировании изображения, чтобы оно идеально вписалось в контекст. Для этого можно использовать значения offsetX и offsetY, учитывая границы и отступы.

Создание холста на ходу

Порой возникает необходимость в создании нового холста в процессе работы. Такие задачи появляются, например, при изменениях содержимого страницы, и в таких ситуациях холст создается программно.

Адаптивность с учетом разнообразия устройств

Сегодня адаптация под различные устройства невероятно важна. Для этого задействуются CSS-медиазапросы или свойство background-size: cover, которые позволяют сохранить пропорции изображений на холсте.

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

1. Использование изображений – Веб-API | MDN — инструкция по масштабированию изображений для элемента HTML5 Canvas.
2. aspect-ratio | CSS-Tricks — статьи о свойстве aspect-ratio в CSS, которое помогает сохранять пропорции изображений.
3. web.dev — коллекция статей о современных методах в веб-разработке, включая разработку адаптивных изображений.
4. Масштабирование изображения под размер холста – Stack Overflow — обсуждение вопроса адаптации изображения под размеры холста с использованием JavaScript.
5. Отключение интерполяции при масштабировании <canvas> – Stack Overflow — способы сохранения качества изображения при трансформации на холсте Canvas.
6. CanvasRenderingContext2D: метод scale() – Веб-API | MDN — описание метода scale() для масштабирования на холсте HTML5.
7. Как создать адаптивные изображения — урок по созданию адаптивных изображений для всех типов устройств.