Просмотр архива скрипт ФриЛенсера ДЕМО Дерьмо (Рукожопная Версия)


<?php

document.addEventListener('DOMContentLoaded', function () {

    // Назначение классов и размеров

    const targetClass = '.category-box'; // Замените на название вашего класса

    const containerWidth = 317; // Необходимая ширина

    const containerHeight = 180; // Необходимая высота



    // Получаем все изображения с данным классом

    const imagesToProcess = document.querySelectorAll(`${targetClass} img`);



    imagesToProcess.forEach(function(image) {

        // Запрашиваем полное изображение и ожидаем его загрузки

        const fullSizeImage = new Image();

        fullSizeImage.crossOrigin = 'anonymous'; // Чтобы избежать проблем с CORS

        fullSizeImage.src = image.src;



        fullSizeImage.onload = function() {

            // Создаем canvas для операции обрезки

            const canvas = document.createElement('canvas');

            const ctx = canvas.getContext('2d');



            // Рассчитываем отношение сторон контейнера и изображения

            const aspectRatioContainer = containerWidth / containerHeight;

            const aspectRatioImage = fullSizeImage.width / fullSizeImage.height;



            // Определяем прямоугольник обрезки

            let cropWidth, cropHeight, xOffset, yOffset;

            

            if (aspectRatioImage > aspectRatioContainer) {

                // Картинка шире, обрезаем края слева-справа

                cropWidth = fullSizeImage.height * aspectRatioContainer;

                cropHeight = fullSizeImage.height;

                xOffset = (fullSizeImage.width - cropWidth) / 2;

                yOffset = 0;

            } else {

                // Картинка выше, обрезаем сверху-снизу

                cropWidth = fullSizeImage.width;

                cropHeight = fullSizeImage.width / aspectRatioContainer;

                xOffset = 0;

                yOffset = (fullSizeImage.height - cropHeight) / 2;

            }



            // Обрезаем изображение

            canvas.width = containerWidth;

            canvas.height = containerHeight;

            ctx.drawImage(fullSizeImage, xOffset, yOffset, cropWidth, cropHeight, 0, 0, containerWidth, containerHeight);



            // Преобразуем в PNG (больше подходит для сохранения качества)

            const croppedImageUrl = canvas.toDataURL('image/png');



            // Заменяем исходное изображение на обрезанное

            image.src = croppedImageUrl;

        };

    });

});

?>