script.js - master - ShadowCode/QR-generator

script.js
75 строк4 KB
ShadowCode
create: index.html, script.js, style.css
25 май 2026, 17:48
25 май 2026, 17:4887c0ed2
document.addEventListener('DOMContentLoaded', () => {
    const dataInput = document.getElementById('dataInput');
    const generateBtn = document.getElementById('generateBtn');
    const qrcodeOutput = document.getElementById('qrcodeOutput');
    const downloadLink = document.getElementById('downloadLink');
    let qrCodeInstance = null; // Переменная для хранения экземпляра QRCode

    // Функция для генерации QR-кода
    function generateQRCode() {
        const data = dataInput.value.trim(); // Получаем значение из поля ввода и убираем пробелы по краям

        if (!data) {
            alert('Пожалуйста, введите текст или ссылку для генерации QR-кода.');
            qrcodeOutput.innerHTML = '<p>Здесь появится ваш QR-код после генерации.</p>'; // Очищаем вывод
            downloadLink.style.display = 'none'; // Скрываем кнопку скачивания
            return;
        }

        // Очищаем предыдущий QR-код, если он есть
        qrcodeOutput.innerHTML = '';

        try {
            // Создаем новый экземпляр QRCode
            // Параметры:
            // 1. ID элемента, куда вставить QR-код
            // 2. Объект с настройками:
            //    - text: Данные для кодирования
            //    - width: Ширина QR-кода (можно указать в px)
            //    - height: Высота QR-кода
            //    - colorDark: Цвет темных модулей (по умолчанию #000)
            //    - colorLight: Цвет светлых модулей (по умолчанию #fff)
            //    - correctLevel: Уровень коррекции ошибок (L, M, Q, H - чем выше, тем более устойчив к повреждениям)
            qrCodeInstance = new QRCode(qrcodeOutput, {
                text: data,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H // Уровень H - максимальная коррекция
            });

            // После генерации QR-кода, показываем ссылку для скачивания
            // Теперь нужно преобразовать canvas в изображение для скачивания
            setTimeout(() => { // Небольшая задержка, чтобы canvas успел отрисоваться
                const canvas = qrcodeOutput.querySelector('canvas');
                if (canvas) {
                    // Преобразуем canvas в Data URL (PNG)
                    const qrCodeDataURL = canvas.toDataURL('image/png');
                    // Устанавливаем атрибут href для ссылки скачивания
                    downloadLink.href = qrCodeDataURL;
                    downloadLink.style.display = 'block'; // Показываем кнопку скачивания
                }
            }, 100); // Задержка в 100 миллисекунд

        } catch (error) {
            console.error("Ошибка при генерации QR-кода:", error);
            qrcodeOutput.innerHTML = '<p>Произошла ошибка при генерации QR-кода.</p>';
            downloadLink.style.display = 'none'; // Скрываем кнопку скачивания
        }
    }

    // Обработчик клика по кнопке "Сгенерировать QR-код"
    generateBtn.addEventListener('click', generateQRCode);

    // Опционально: Генерация по нажатию Enter в поле ввода
    dataInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            generateQRCode();
        }
    });

    // Начальная очистка вывода при загрузке страницы
    qrcodeOutput.innerHTML = '<p>Здесь появится ваш QR-код после генерации.</p>';
    downloadLink.style.display = 'none';
});