Генерация QR-кодов на JS в 4 шага. Node.js + qrcode

Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm, установите их с официального сайта.

Шаг 1. Создание нового проекта npm

Откройте терминал и введите или скопируйте эти три команды:

mkdir qr-api
cd qr-api
npm init -y

Появится новая папка с пустым проектом на Node.js, и вы перейдёте сразу в неё:

Шаг 2. Установка express и qrcode

Нам понадобятся пакеты express (для создания сервера) и qrcode (для генерации QR-кодов). Установим оба:

npm install express qrcode

Так выглядит успешная установка:

Шаг 3. Код API

В Visual Studio Code (или другом редакторе кода) в папке с проектом создайте файл index.js и добавьте следующий код:

const express = require('express');
const QRCode = require('qrcode');

const app = express();
const PORT = 3000;

app.get('/generate', async (req, res) => {
  const url = req.query.url;

  if (!url) {
    return res.status(400).send('URL не указан.');
  }

  try {
    const qr = await QRCode.toDataURL(url);
    res.send(`<img src="${qr}" />`);
  } catch (err) {
    res.status(500).send('Ошибка при создании QR-кода.');
  }
});

app.listen(PORT, () => {
  console.log(`Сервер запущен по адресу http://localhost:${PORT}`);
});

Этот код создаёт сервер, который принимает URL через query-параметр и возвращает QR-код этой ссылки.

Шаг 4. Запуск сервера

Чтобы запустить API, напишите в терминале эту команду и нажмите Enter.

node index.js

Если всё верно — увидите сообщение о том, что сервер запущен:

Шаг 5. Проверка, что всё работает

Откройте браузер и перейдите по адресу:

http://localhost:3000/generate?url=https://htmlacademy.ru

Вы увидите QR-код для ссылки https://htmlacademy.ru:

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.