Обрезка изображений в соответствии с пропорциями с помощью JavaScript

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

Содержание

Почему это нужно?
Шаг 1: Загрузка информации об изображении
Шаг 2: Приведение пропорций изображения к квадрату
Шаг 3: Функция преобразования пропорций изображения с изменяемыми параметрами
Использование функции
Заключение
Визуальный пример

Почему это нужно?

Когда мы загружаем изображения, иногда необходимо, чтобы они соответствовали определенным пропорциям. Например, фотография профиля может требовать квадратной формы, а обложка для социальной сети — соотношения 16:9.

Шаг 1: Загрузка информации об изображении

Для начала нам потребуется источник данных. Пусть это будет ссылка на исходное изображение:

const imageURL = 'path/to/our/image.jpeg';

Чтобы обрезать изображение до нужных пропорций, нам нужен доступ к его исходным параметрам. Мы загрузим URL в элемент <img>:

const inputImage = new Image();
inputImage.src = imageURL;

Затем перенесем картинку на холст (canvas), что позволит нам манипулировать параметрами изображения:

inputImage.onload = () => {
const outputImage = document.createElement('canvas');
outputImage.width = inputImage.naturalWidth;
outputImage.height = inputImage.naturalHeight;
const ctx = outputImage.getContext('2d');
ctx.drawImage(inputImage, 0, 0);
document.body.appendChild(inputImage);
document.body.appendChild(outputImage);
};
inputImage.src = imageURL;

Шаг 2: Приведение пропорций изображения к квадрату

Теперь мы можем обрезать картинку до квадрата (соотношение сторон 1:1):

const outputImageAspectRatio = 1;

inputImage.onload = () => {
const inputWidth = inputImage.naturalWidth;
const inputHeight = inputImage.naturalHeight;
const inputImageAspectRatio = inputWidth / inputHeight;

let outputWidth = inputWidth;
let outputHeight = inputHeight;
if (inputImageAspectRatio > outputImageAspectRatio) {
outputWidth = inputHeight * outputImageAspectRatio;
} else if (inputImageAspectRatio < outputImageAspectRatio) {
outputHeight = inputHeight / outputImageAspectRatio;
}

const outputX = (outputWidth - inputWidth) * .5;
const outputY = (outputHeight - inputHeight) * .5;

const outputImage = document.createElement('canvas');
outputImage.width = outputWidth;
outputImage.height = outputHeight;
const ctx = outputImage.getContext('2d');
ctx.drawImage(inputImage, outputX, outputY);

document.body.appendChild(inputImage);
document.body.appendChild(outputImage);
};
inputImage.src = imageURL;

Шаг 3: Функция преобразования пропорций изображения с изменяемыми параметрами

Теперь преобразуем наш код в универсальную функцию для обрезки изображений с любым соотношением сторон:

/**
* @param {string} url - The source image
* @param {number} aspectRatio - The aspect ratio
* @return {Promise<HTMLCanvasElement>} A Promise that resolves with the resulting image as a canvas element
*/
function crop(url, aspectRatio) {
return new Promise(resolve => {
const inputImage = new Image();
inputImage.onload = () => {
const inputWidth = inputImage.naturalWidth;
const inputHeight = inputImage.naturalHeight;
const inputImageAspectRatio = inputWidth / inputHeight;

let outputWidth = inputWidth;
let outputHeight = inputHeight;
if (inputImageAspectRatio > aspectRatio) {
outputWidth = inputHeight * aspectRatio;
} else if (inputImageAspectRatio < aspectRatio) {
outputHeight = inputHeight / aspectRatio;
}

const outputX = (outputWidth - inputWidth) * .5;
const outputY = (outputHeight - inputHeight) * .5;

const outputImage = document.createElement('canvas');
outputImage.width = outputWidth;
outputImage.height = outputHeight;
const ctx = outputImage.getContext('2d');
ctx.drawImage(inputImage, outputX, outputY);
resolve(outputImage);
};
inputImage.src = url;
});
}

Использование функции

Теперь мы можем вызвать эту функцию и получить изображение с нужным соотношением сторон:

crop('path/to/our/image.jpeg', 1).then(canvas => {
document.body.appendChild(canvas);
});

crop('path/to/our/image.jpeg', 16/9).then(canvas => {
document.body.appendChild(canvas);
});

Заключение

С помощью HTML Canvas API и базовых математических расчетов мы создали функцию, которая облегчает обрезку изображений до заданных пропорций. Эта функция полезна для подготовки фотографий для социальных сетей, профилей пользователей и других целей.

Учтите:

Браузеры мобильных устройств могут считывать параметры изображения из EXIF заголовков, что может вызвать проблемы.
Использование слишком больших изображений может привести к переполнению памяти для элемента canvas.
Изменение размеров маленьких картинок может значительно ухудшить их качество.

Визуальный пример

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

Это изображение помогает понять, как эффективно обрезать изображения с помощью JavaScript и HTML canvas.