Доброго времени суток! Сегодня рассмотрим с Вами как преобразовать изображение из формата PNG в формат JPEG прямо в браузере с сохранением соотношения сторон.
Доброго времени суток! Сегодня рассмотрим с Вами как преобразовать изображение из формата PNG в формат JPEG прямо в браузере с сохранением соотношения сторон.
Код с комментариями:
// Экспортируем функцию pngToJpeg для доступа из других модулей
/**
* @param {String} pngFile - объект File, полученный при выборе пользователем файла с устройства
*/
export function pngToJpeg(pngFile, maxWidth = 1200) {
// Создаем новое обещание (Promise), чтобы асинхронно выполнить операции с изображением
return new Promise((resolve, reject) => {
// Создаем новый объект FileReader для чтения содержимого файла
const reader = new FileReader();
// Устанавливаем обработчик события загрузки файла
reader.onload = () => {
// Создаем новый объект Image для загрузки изображения
const img = new Image();
// Устанавливаем обработчик события загрузки изображения
img.onload = () => {
// Создаем новый элемент canvas и получаем его 2D контекст для рисования
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// Вычисляем соотношение сторон исходного изображения
const aspectRatio = img.width / img.height;
// Рассчитываем новые размеры изображения на основе максимальной ширины и соотношения сторон
const newWidth = maxWidth;
const newHeight = newWidth / aspectRatio;
// Устанавливаем новые размеры для элемента canvas
canvas.width = newWidth;
canvas.height = newHeight;
// Рисуем изображение на canvas с новыми размерами
context.drawImage(img, 0, 0, newWidth, newHeight);
// Преобразуем содержимое canvas в объект Blob с форматом JPEG и передаем его как результат обещания
canvas.toBlob((blob) => {
resolve(blob);
}, 'image/jpeg');
};
// Устанавливаем обработчик события ошибки при загрузке изображения
img.onerror = (error) => {
reject(error);
};
// Устанавливаем источник изображения для объекта Image (приводит к тому, что изображение начинает загружаться)
img.src = reader.result;
};
// Устанавливаем обработчик события ошибки чтения файла
reader.onerror = (error) => {
reject(error);
};
// Читаем содержимое файла в формате Data URL с помощью FileReader
reader.readAsDataURL(pngFile);
});
}
Данный код конвертирует изображение из формата PNG в формат JPEG с сохранение соотношения сторон.
