QRCode.Fun QRCode.Fun
Начать
Библиотека JavaScript QR Code

Генерация QR-кодов на JavaScript

JavaScript — самый популярный язык для веб-разработки. Используйте библиотеки qrcode.js или qr-code-styling для генерации QR-кодов в браузере или Node.js, или вызывайте API QRCode.fun для продвинутого оформления.

Попробовать генератор QRДокументация API

Установка

Установите популярные JavaScript-библиотеки для QR-кодов с помощью предпочитаемого менеджера пакетов.

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm install qr-code-styling

Генерация QR-кодов с помощью библиотек JavaScript

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

Basic QR Code (Node.js)
const QRCode = require('qrcode')

// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)

// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
  width: 300,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Browser Canvas Rendering
import QRCode from 'qrcode'

const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
  width: 256,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'

const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://qrcode.fun',
  image: '/logo.png',
  dotsOptions: {
    color: '#1A2B3C',
    type: 'rounded'
  },
  cornersSquareOptions: {
    color: '#8564C3',
    type: 'extra-rounded'
  },
  backgroundOptions: {
    color: '#FFFFFF'
  }
})

qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })
QRCode.fun API

Генерация QR-кодов через API на JavaScript

Используйте API QRCode.fun для генерации стилизованных QR-кодов с пользовательскими цветами, формами и логотипами из вашего JavaScript-приложения.

Интеграция API JavaScript
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: 'https://qrcode.fun',
    width: 300,
    height: 300,
    type: 'png',
    margin: 10,
    dotsOptions: {
      color: '#1A2B3C',
      type: 'rounded'
    },
    cornersSquareOptions: {
      color: '#8564C3',
      type: 'extra-rounded'
    },
    backgroundOptions: {
      color: '#FFFFFF'
    }
  })
})

const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)

Предпросмотр QR-кода

Попробуйте сгенерировать QR-код на JavaScript прямо сейчас.

Предпросмотр QR

Нативная библиотека vs API

Сравните прямое использование JavaScript-библиотеки для QR-кодов с API QRCode.fun.

ФункцияНативная библиотекаQRCode.fun API
Сложность настройкиУстановка пакета, настройка сборщикаОдин HTTP-запрос
КастомизацияЗависит от библиотекиПолное оформление: цвета, формы, логотипы
Офлайн-поддержкаДаТребуется интернет
ОбслуживаниеРучное обновление зависимостейВсегда актуально
Форматы выводаPNG, SVG (зависит от библиотеки)PNG, SVG

Сценарии использования QR-кодов в JavaScript

Типичные сценарии, в которых JavaScript-разработчики генерируют QR-коды.

Веб-приложения

Динамическая генерация QR-кодов в приложениях React, Vue, Angular или vanilla JS для обмена ссылками, платежей или аутентификации.

Бэкенд Node.js

Создание QR-кодов на сервере для счетов, билетов, транспортных этикеток и автоматических вложений электронной почты.

Progressive Web Apps

Добавьте генерацию QR-кодов в PWA для мобильного опыта с поддержкой офлайн и сканируемыми кодами.

Расширения браузера

Создавайте расширения Chrome или Firefox, генерирующие QR-коды для URL текущей страницы или выделенного текста.

Часто задаваемые вопросы

Популярные вопросы о генерации QR-кодов на JavaScript.

Два самых популярных варианта — qrcode (лёгкая, отличная для простых QR-кодов) и qr-code-styling (продвинутая кастомизация с цветами, формами и логотипами). Выберите qrcode для простоты или qr-code-styling для гибкости дизайна.

Начните генерировать QR-коды на JavaScript

Используйте наш бесплатный онлайн-генератор для быстрых QR-кодов или интегрируйте API в свой JavaScript-проект для автоматической генерации.

Открыть генератор QRДокументация API