Как изменить размер изображения, сохранив соотношение сторон в JavaScript

Как изменить размер изображения, сохранив соотношение сторон в JavaScript

Как изменить размер изображения, сохранив соотношение сторон в 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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий