Как сделать генератор QR-кодов на HTML и JavaScript — пошаговое руководство

Сегодня разбираем материал freecodecamp.org о теме «Как создать генератор QR-кодов на JavaScript — пошаговое руководство». Практический разбор с шагами и примерами, который можно быстро применить в своей работе.

QR-коды встречаются буквально везде. Вы сканируете их, чтобы открыть сайт, совершить платёж, подключиться к WiFi или скачать приложение.

Большинство разработчиков тянутся к онлайн-инструментам, когда нужно быстро получить QR-код. Но, как и в случае с конвертерами изображений, многие из этих инструментов работают через серверы — а значит, более низкая производительность и иногда ненужная передача данных.

QR-коды можно легко создавать непосредственно в браузере с использованием JavaScript, обходясь без серверной части. В этом руководстве мы рассмотрим процесс разработки от простого HTML-файла до полноценного инструмента, который не требует передачи данных пользователя за пределы браузера.

Что такое QR-код и как он работает

QR-код — это тип штрихкода, который хранит информацию: текст, URL-адреса или контактные данные.

Когда пользователь сканирует его с помощью телефона или сканера, закодированные данные мгновенно декодируются и отображаются.

Под капотом данные преобразуются в паттерн из чёрных и белых квадратов. Эти паттерны следуют определённой структуре, которую сканеры могут надёжно считывать.

Ключевая идея проста: вы задаёте входные данные (текст или URL), а система преобразует их в визуальный код.

По этой теме полезно отдельно посмотреть Создание динамических форм в React и Next.js, чтобы расширить контекст и сравнить подходы.

Настройка проекта

Я намеренно сохраняю структуру проекта минимальной, чтобы сосредоточиться на основной логике, а не на инфраструктуре.

Вам понадобится только:

• HTML-файл
• JavaScript-файл
• библиотека для QR-кодов

Бэкенд не требуется.

На практике этого достаточно, чтобы быстро собрать рабочий прототип и проверить всю пользовательскую цепочку: ввод данных, генерацию изображения, очистку предыдущего результата и дальнейшее скачивание. Такой минимальный старт полезен ещё и тем, что вы сразу видите, где заканчивается логика интерфейса и где начинается ответственность библиотеки, которая кодирует данные в QR-паттерн.

Создание HTML-структуры

Начните с простой разметки:

<input type="text" id="text" aria-label="Введите текст или URL">
<button onclick="generateQR()">Generate QR</button>
<div id="qrcode"></div>

Это даёт пользователям место для ввода данных, запуска генерации и отображения результата.

Если хотите сделать интерфейс удобнее с самого начала, сразу предусмотрите подпись поля, понятный текст на кнопке и отдельный контейнер для результата. Тогда вам будет проще дорабатывать проект: добавлять валидацию, переключатели типов контента и экспорт QR-кода без переписывания базовой разметки.

Добавление JavaScript для генерации QR-кодов

Вместо того чтобы строить логику QR-кодов с нуля, мы воспользуемся JavaScript-библиотекой qr-code-styling.

Она позволяет генерировать настраиваемые QR-коды прямо в браузере, включая поддержку цветов, форм и логотипов.

Подключаем её через CDN (сеть доставки контента):

<script src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>

Теперь добавим основную функцию:

function generateQR() { const text = document.getElementById("text").value; if (!text) { alert("Please enter text or URL"); return; } document.getElementById("qrcode").innerHTML = ""; new QRCode(document.getElementById("qrcode"), { text: text, width: 200, height: 200 });
}

Эта функция считывает ввод, проверяет его, очищает старые результаты и генерирует новый QR-код.

Как генерируется QR-код

Библиотека обрабатывает кодирование внутри.

Когда вы передаёте текст в конструктор QRCode, он:

• преобразует текст в закодированные данные
• генерирует матричный паттерн
• отрисовывает его как изображение в браузере

Всё происходит мгновенно на стороне клиента — никаких запросов к серверу, никаких задержек.

Улучшение пользовательского опыта

Когда базовая версия заработает, начинаешь замечать, что небольшие улучшения кардинально меняют ощущение от инструмента.

Очистка предыдущего QR-кода перед генерацией нового предотвращает накопление нескольких результатов.

Для улучшения удобства добавьте подсказки-заполнители в поле ввода, автоматически фокусируйте ввод при загрузке страницы и обеспечивайте лучшую визуальную обратную связь на кнопках.

Эти детали, хотя и могут показаться мелкими, значительно улучшают общий опыт и делают инструмент более надёжным.

Важные замечания из реальной практики

Правильная валидация ввода

Всегда проверяйте пользовательский ввод перед генерацией QR-кода.

if (!text.trim()) { alert("Please enter valid content"); return;
}

Это предотвращает создание пустых или недействительных QR-кодов.

Обработка длинных данных

QR-коды могут хранить много данных, но очень длинный текст делает их плотными и трудными для сканирования.

В реальных инструментах лучше:

• ограничивать длину ввода
• или направлять пользователей к URL-адресам вместо длинного текста

Настройка размера QR-кода

Вы можете управлять размером вывода:

width: 300,
height: 300

Большие размеры улучшают надёжность сканирования, особенно для печатных QR-кодов.

Распространённые ошибки, которых следует избегать

Отсутствие очистки предыдущего вывода

Если не сбрасывать контейнер, QR-коды будут накапливаться — пользователь увидит стопку изображений вместо одного актуального результата.

Пропуск валидации

Пользователи могут сгенерировать пустые или сломанные QR-коды, если не добавить проверку на входе.

Использование слишком большого объёма данных

Плотные QR-коды труднее сканировать: чем больше данных, тем мельче квадраты и выше вероятность ошибок при считывании.

Как можно расширить этот проект

На мой взгляд, именно здесь проект становится по-настоящему интересным — когда базовая версия уже работает и можно двигаться дальше.

Вы можете позволить пользователям скачивать QR-коды как изображения, настраивать цвета или даже встраивать логотипы внутрь кода.

Вы также можете поддержать различные типы QR-кодов: WiFi, визитные карточки или платёжные форматы.

Эти улучшения делают инструмент более удобным и функциональным, что позволяет эффективно решать задачи пользователей.

Почему браузерные инструменты хорошо подходят для этого

Современные браузеры достаточно мощны, чтобы справляться с такими задачами, как генерация QR-кодов, без какого-либо сервера.

Это делает ваш инструмент:

• быстрее (нет времени на загрузку)
• более приватным (данные остаются локальными)
• дешевле (нет затрат на бэкенд)

Поэтому современные инструменты всё чаще полагаются на клиентскую обработку — и мы убедились, что это рациональное архитектурное решение.

Демонстрация: как работает генератор QR-кодов

Вот как финальный инструмент работает на практике.

Сначала пользователь выбирает тип контента, для которого хочет сгенерировать QR-код: URL, текст или другие поддерживаемые форматы.

Затем он вводит необходимые данные в зависимости от своего выбора. Например, если выбран URL, достаточно просто вставить ссылку в поле ввода.

После этого пользователь может настроить дизайн QR-кода. Это включает такие параметры, как изменение цвета переднего плана и фона, выбор различных стилей точек, настройка уровней коррекции ошибок и даже добавление логотипа в центр QR-кода.

По мере того как пользователь обновляет входные данные и настройки, QR-код мгновенно генерируется в браузере и обновляется в реальном времени.

Когда результат устраивает, пользователь может скачать QR-код в различных форматах: PNG, JPG или SVG. В более продвинутых версиях он также может поделиться им напрямую через такие платформы, как WhatsApp.

Генерация и настройка в реальном времени делают инструмент быстрым, гибким и практичным для повседневного использования.

В этом руководстве мы собрали генератор QR-кодов на JavaScript, который работает полностью в браузере.

По ходу разобрали, как принимать пользовательский ввод, динамически генерировать QR-коды, проверять входные данные и улучшать удобство использования с помощью небольших, но ощутимых доработок. На нашем опыте именно эти детали отделяют рабочий прототип от инструмента, которым хочется пользоваться. Также стало понятно, как этот базовый инструмент можно расширить до более полноценного продукта.

Тот же подход применим ко многим браузерным инструментам. Как только вы разберётесь, как эффективно использовать браузерные API (программные интерфейсы приложений), вы сможете создавать быстрые, приватные и масштабируемые приложения без зависимости от бэкенда.

Ответы на эти вопросы могут быть для вас полезными

Нужен ли сервер для генерации QR-кодов с помощью этого подхода?

Нет. Вся генерация происходит на стороне клиента с помощью библиотеки qr-code-styling. Данные пользователя не покидают браузер.

Какой максимальный объём данных можно закодировать в QR-код?

Технически QR-коды поддерживают до нескольких тысяч символов, но на практике длинный текст делает код плотным и трудным для сканирования. Лучше использовать короткие URL или ограничивать длину ввода.

Можно ли скачать сгенерированный QR-код как изображение?

Да, это одно из расширений базовой версии. Библиотека qr-code-styling поддерживает экспорт в форматы PNG, JPG и SVG.

Как добавить логотип внутрь QR-кода?

Библиотека qr-code-styling поддерживает встраивание изображения в центр кода через параметры конфигурации. Это не требует изменения базовой логики генерации.

Почему QR-код не сканируется после генерации?

Чаще всего причина — слишком большой объём данных или слишком маленький размер вывода. Попробуйте увеличить параметры width и height до 300 и выше, а также сократить входной текст.