Генерируйте QR-коды с помощью REST API: один POST, мгновенный SVG.

В вашей электронной коммерции должен отображаться QR-код для URL-адреса отслеживания каждого заказа. Ты мог бы установить клиентскую QR-библиотеку, настроить элемент холста, управлять жизненным циклом рендеринга, и добавьте к вашему пакету 30-40 КБ. Или вы можете отправить один запрос POST и получить обратно SVG.

Ботой /v1/qr/generate конечная точка превращает любую строку или URL-адрес в сканируемый QR-код код. Он возвращает необработанный SVG, который вы можете встроить в HTML, сохранить в файл или передать в PDF. Нет нпм пакет, нет зависимости от холста, нет этапа сборки.

API-вызов

Отправьте POST-запрос с текстом, который вы хотите закодировать:

Ответом является необработанное изображение SVG (Content-Type: image/svg+xml):

Этот SVG выглядит четким при любом размере, потому что он векторный. Брось это в <img> тег, встройте его в свой HTML или перенесите в файл. Нет анализа JSON нужен; телом ответа является сам SVG.

Параметры

Конечная точка принимает шесть параметров. Только text требуется:

• текст (обязательное поле): URL-адрес или текст для кодирования. Поддерживает до ~4296 буквенно-цифровые символы.
• размер (число, по умолчанию 300): ширина и высота в пикселях. Диапазон: от 50 до 2000.
• темныйЦвет (шестнадцатеричная строка, по умолчанию #000000): Цвет переднего плана QR-модули.
• светЦвет (шестнадцатеричная строка, по умолчанию #ffffff): Цвет фона.
• уровень коррекции ошибки (строка, по умолчанию M): Один из L (7%), M (15%), Q (25%) или H (30%). Более высокие уровни допускают больший ущерб, но создают более плотные коды.
• допуск (число, по умолчанию 4): тихая зона вокруг QR-кода в модулях. Диапазон: от 0 до 20.

Вот запрос, использующий все шесть параметров:

Практические примеры

QR-код меню ресторана

Напечатайте QR-код на настольных палатках, чтобы посетители могли просмотреть полное меню на своем телефоне. Ошибка Коррекция H справляется с потертостями и пятнами от кофе.

QR-код билета на мероприятие

Закодируйте уникальный идентификатор билета в каждом QR-коде. Персонал сканирует его у двери любым смартфоном. камера. Коррекция ошибок Q обеспечивает хороший баланс между плотностью и устойчивостью к повреждениям. для печати бейджей.

QR-код платежной ссылки

Создайте сканируемую ссылку для оплаты для счетов, квитанций или дисплеев в точках продаж. клиент сканирует его и попадает на страницу оформления заказа Stripe.

Генерация пакетов в цикле

Нужны QR-коды для каталога продукции? Просмотрите список URL-адресов и сохраните каждый SVG на диск. Этот bash-скрипт генерирует четыре QR-кода менее чем за секунду:

Выход:

Пример Node.js: QR-коды для отслеживания заказов

Этот сервер Express предоставляет /orders/:id/qr конечная точка. Когда ваш заказ страница или шаблон электронного письма с подтверждением извлекает этот URL-адрес, он возвращает QR-код SVG, указывающий на страницу отслеживания заказа.

Использование:

Конечная точка устанавливает 24-часовой заголовок кэша, чтобы повторные запросы на один и тот же заказ не попадали. API снова. В рабочей среде добавьте Redis или CDN перед этим маршрутом для увеличения трафика.

Клиентские QR-библиотеки или API: когда какие использовать

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

Используйте клиентскую библиотеку, когда вашему приложению необходимо работать в автономном режиме, когда задержка имеет большее значение. чем размер пакета (время рендеринга менее 5 мс), или когда вы создаете инструмент, в котором пользователи генерируют QR-коды в интерактивном режиме в браузере, и вы не хотите зависеть от сетевого запроса для каждого нажатия клавиши.

Ключевые моменты

Уровень бесплатного пользования со скоростью 5 запросов в минуту охватывает разработку, прототипирование и мелкообъемные проекты. производственное использование. Для пакетной генерации или приложений с высоким трафиком добавьте ключ API в Authorization: Bearer заголовок. Проверьте Документация по API для полной ссылки на конечную точку.