Как изменить размер изображения, сохранив соотношение сторон в JavaScript
Изменение размера изображения – это частая задача при работе с фотографиями. Однако важно не только уменьшить или увеличить размер, но и сохранить соотношение сторон, чтобы не было искажений и не потерь качества. В этой статье мы рассмотрим, как выполнить эту задачу средствами JavaScript, когда пользователь открывает изображение в браузере.
1. HTML-разметка:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изменение размера изображения</title>
</head>
<body>
<!-- Элемент для загрузки файла изображения -->
<input type="file" id="fileInput" accept="image/*" onchange="resizeImage()">
<!-- Элемент canvas, который будет использован для отображения обрезанного изображения. -->
<canvas id="canvas"></canvas>
<script>
function resizeImage() {
const input = document.getElementById('fileInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
const reader = new FileReader();
reader.onload = function(e) {
image.src = e.target.result;
};
input.addEventListener('change', function() {
const file = input.files[0];
if (file) {
reader.readAsDataURL(file);
}
});
image.onload = function() {
const aspectRatio = image.width / image.height; // вычисляем соотношение сторон
// Устанавливаем новые размеры
const newWidth = 600; // Желаемая ширина
const newHeight = newWidth / aspectRatio;
// Устанавливаем размер canvas
canvas.width = newWidth;
canvas.height = newHeight;
// Отрисовываем изображение на Canvas с новыми размерами
ctx.drawImage(image, 0, 0, newWidth, newHeight);
};
}
</script>
</body>
</html>
Этот пример позволяет легко изменять размер изображений, учитывая при этом соотношение сторон. Этот способ подходит для случаев, когда где необходимо обрезать изображения перед их загрузкой на сервер.
Кстати, с помощью JavaScript можно создавать современные и функциональные приложения, которые, часто, не отличить от обычных нативный приложений. Об этом и многом другом из мира JavaScript Вы можете узнать из моего видеокурса Программирование на JavaScript с Нуля до Гуру 2.0
-
Создано 05.02.2024 08:12:56
-
Михаил Русаков
Комментарии (1):
Здравствуйте, Михаил. Подскажите пожалуйста. Почему скрипт спотыкается при загрузке первого изображение? Второе, третье и т.д. он уменьшает. Но первое нужно указать, затем сменить имя файла. Вот пример: https://codepen.io/Lebedev-Alexandr/pen/pomogVM И еще вопрос: Как далее передать уменьшенное изображение на загрузку на сервер? Спасибо.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.