Mini QR: бесплатный генератор и сканер QR-кодов онлайн

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

На странице работает бесплатный генератор и сканер QR-кодов без регистрации. Выберите заготовку, введите свои данные и настройте внешний вид. Мастерская обрабатывает данные и выбранные изображения в браузере. Для работы с камерой потребуется отдельное разрешение; сканирование файла доступно без камеры.

Mini QR: готовое приложение и движок генерации

Mini QR — открытое веб-приложение на Vue 3. В нём есть оформление кодов, шаблоны данных, экспорт и сканирование. Репозиторий содержит интерфейс и внутренний модуль построения QR. В проверенной версии 0.30.2 package.json отмечен как private: true: установка вымышленного пакета командой npm install mini-qr здесь не нужна.

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

Как создать первый код в мастерской

Сначала выберите один из шести готовых стилей в начале панели. Затем задайте назначение: ссылка, текст, Wi-Fi или контакт. Заполните поля и посмотрите на предварительный результат. Стиль можно менять независимо от содержимого: при подборе цвета не придётся заново вводить адрес или данные контакта.

Настройте размер, цвет элементов, фон и форму квадратов по углам. Для первого результата оставьте контрастный тёмный рисунок на светлом фоне. Добавлять логотип удобнее после того, как обычный код уже читается.

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

Ссылка, текст, Wi-Fi и контакт: четыре полезных примера

Ссылка. Для инструкции к изделию используйте полный адрес с https://, например https://example.org/instructions. Откройте его заранее и убедитесь, что посетитель увидит нужную страницу. Сократите ненужные параметры: длинная строка создаёт более плотный рисунок.

Текст. Короткая заметка может содержать название оборудования, номер помещения или пояснение к экспонату. Человек прочитает эти данные после сканирования, даже если текст не является ссылкой. Для большой инструкции удобнее дать адрес страницы и обновлять её содержимое.

Wi-Fi. Заполните имя сети, пароль и выбранный тип защиты. Например, гостевая сеть может быть записана так:

WIFI:T:WPA;S:Workshop Guest;P:guest-2026;;

Мастерская формирует строку из отдельных полей. Не собирайте её простым соединением значений: служебные символы в имени сети или пароле требуют экранирования. Напечатанный Wi-Fi-код передаёт пароль любому, кто его прочитает, поэтому для посетителей удобно завести отдельную гостевую сеть. Предложение подключения зависит от приложения сканирования на телефоне.

Контакт. Для визитки подходят имя, организация, телефон, почта и сайт. Заполните только актуальные данные. Пример содержимого vCard:

BEGIN:VCARD
VERSION:3.0
N:Смирнов;Алексей;;;
FN:Алексей Смирнов
ORG:Студия Пример
TEL:+79990000000
EMAIL:hello@example.org
URL:https://example.org
END:VCARD

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

Настройка цветов и форм без потери читаемости

Палитра должна помогать отделять элементы от фона. Например, для спокойной визитки подойдёт тёмный бирюзовый рисунок на белом фоне. Для упаковки можно взять основной цвет бренда, если он достаточно тёмный. Слабый контраст увеличивает зависимость результата от освещения и качества камеры.

Узор внутри кода и три угловых маркера настраиваются отдельно. Начните с обычных квадратов, затем попробуйте округление или точки. Меняйте по одному параметру и повторяйте проверку. Так проще понять, какой вариант повлиял на распознавание.

Не накладывайте текст или иллюстрации вплотную к коду. Чистое поле вокруг него — часть рабочего изображения. Для обычного QR требуется свободная область шириной не менее четырёх модулей с каждой стороны; модуль — одна маленькая ячейка рисунка. В мастерской отступ задаётся именно в модулях. Правило свободной зоны у DENSO WAVE.

Логотип и коррекция ошибок: что проверить

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

У QR есть четыре уровня коррекции: L, M, Q и H. Повышение уровня добавляет избыточные данные и может увеличить плотность или размер рисунка. Коррекция помогает восстановить информацию при некоторых повреждениях, но не гарантирует чтение произвольного логотипа, плохой печати или слабого контраста. Объяснение коррекции ошибок у DENSO WAVE.

В мастерской исходно выбран Q; с логотипом используется H. Проверяйте итог после каждого заметного изменения размера картинки. Проценты коррекции нельзя превращать в правило «можно закрыть столько же площади»: важны расположение перекрытия и структура конкретного кода.

Сканирование изображения и камеры

В разделе сканирования выберите изображение с QR-кодом. Это удобно для проверки файла перед отправкой в печать или для чтения кода со снимка экрана. Сначала посмотрите распознанную строку. Ссылка открывается отдельным действием: результат сканирования сам по себе не подтверждает надёжность адреса.

Для живого сканирования запустите камеру и подтвердите запрос браузера. Если доступ запрещён, камера отсутствует или занята другим приложением, используйте загрузку изображения. После работы остановите камеру кнопкой в панели.

Браузерный доступ к камере требует защищённого контекста, обычно HTTPS, и разрешения пользователя. Для локальной разработки подходит localhost. Доступность функции зависит также от браузера, устройства и настроек разрешений; одинаковое поведение на всех телефонах не обещается. Условия работы камеры в браузере.

PNG, SVG и JPG: что выбрать для результата

PNG удобен для вставки в презентацию, документ и сообщение. Скачивайте изображение с запасом размера и уменьшайте его при размещении. Растягивание маленького файла делает границы менее чёткими. SVG подходит для макета, где требуется масштабирование без потери геометрии: например, для наклейки или плаката. JPG пригодится, если принимающая программа требует этот формат, однако для чётких границ сначала рассмотрите PNG или SVG.

Размер изображения в пикселях не определяет удачный размер на бумаге. Напечатайте пробный экземпляр, проверьте его с обычного расстояния, затем при менее ярком освещении. Если код будет на витрине, проверьте его через стекло; если на упаковке — на готовой поверхности. Сохраняйте белое поле при обрезке и размещении.

Конфигурацию можно сохранить в JSON и загрузить позже: так остаются данные и выбранное оформление. Для повторения мастерской в своём проекте скачайте исходники из нижнего блока. Файл QR, конфигурация и исходный проект решают разные задачи.

Пример генерации в собственном проекте

В скачиваемом учебном проекте модуль Mini QR расположен в src/vendor/mini-qr/qr-code. Пример ниже предназначен для src/main.ts этого проекта. На странице должен существовать контейнер <div id="qr-preview"></div>.

import { createQRCode } from "./vendor/mini-qr/qr-code";

const container = document.querySelector("#qr-preview");
if (!(container instanceof HTMLElement)) {
  throw new Error("Контейнер QR-кода не найден");
}

const qr = createQRCode({
  data: "https://example.org/instructions",
  size: 320,
  margin: 4,
  errorCorrectionLevel: "Q",
  dots: { shape: "square", color: "#153b40" },
  cornerSquares: { shape: "square", color: "#153b40" },
  cornerDots: { shape: "square", color: "#153b40" },
  background: { color: "#ffffff" },
});

qr.attachTo(container);

// Строка SVG для сохранения или дальнейшей обработки.
const svg = qr.toSVGString();

// При удалении этого экрана освободите ресурсы экземпляра:
// qr.dispose();

attachTo отображает результат, toSVGString возвращает SVG, а toPNGBlob и toJPGBlob позволяют получить растровые файлы. В полном примере есть настройки, обработка скачивания и сканер. Импорт относится к исходнику в архиве, а не к опубликованному npm-пакету Mini QR.

Как запустить пример или разместить Mini QR у себя

Для нашего учебного архива установите Node.js и выполните команды из README в распакованной папке. Сначала установите зависимости, затем запустите режим разработки. После настройки создайте production-сборку и размещайте полученную папку dist на веб-сервере. Для страницы на PHP готовые файлы сборки подключаются как обычные статические ресурсы.

Если нужен весь интерфейс автора, клонируйте официальный репозиторий и следуйте инструкции самостоятельного размещения. Она описывает сборку Vite и варианты с Docker. Параметры VITE_* задаются при сборке: изменение таких настроек требует пересборки.

Mini QR распространяется по GPL-3.0. В учебном архиве сохранены исходники модуля и лицензионные уведомления. Если распространяете свою производную сборку, учитывайте условия лицензии; скачанный SVG — изображение результата, а архив проекта содержит программный код.

Можно ли изменить ссылку после печати

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

Для смены назначения используйте адрес перенаправления, которым управляете сами: например, постоянную страницу https://example.org/go/manual. Сервер будет отправлять посетителя к текущей инструкции. При смене назначения QR остаётся прежним, пока исходный адрес продолжает работать. Мастерская создаёт статические коды и не предоставляет сервер перенаправлений или статистику сканирований.

Для визитки, гостевого Wi-Fi или разовой карточки обычно достаточно статического кода. Для долгоживущей упаковки сначала продумайте постоянный адрес и возможность его сопровождения, затем выбирайте оформление и печатайте тираж.