QRCode.Fun QRCode.Fun
Rozpocznij
Biblioteka JavaScript QR Code

Generuj kody QR z JavaScript

JavaScript jest najpopularniejszym językiem do tworzenia stron internetowych. Użyj bibliotek takich jak qrcode.js lub qr-code-styling do generowania kodów QR w przeglądarce lub Node.js, lub wywołaj API QRCode.fun dla zaawansowanego stylowania.

Wypróbuj Generator QRZobacz Dokumentację API

Instalacja

Zainstaluj popularne biblioteki JavaScript do kodów QR używając preferowanego menedżera pakietów.

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

Generuj kody QR z bibliotekami JavaScript

Oto przykłady kodu używające popularnych bibliotek JavaScript do kodów QR w Twoich projektach.

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

Generuj kody QR przez API w JavaScript

Użyj API QRCode.fun do generowania stylizowanych kodów QR z niestandardowymi kolorami, kształtami i logami z aplikacji JavaScript.

Integracja 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)

Podgląd kodu QR na żywo

Wypróbuj generowanie kodu QR z JavaScript teraz.

Podgląd QR

Biblioteka natywna vs API

Porównaj bezpośrednie użycie biblioteki JavaScript do kodów QR z API QRCode.fun.

FunkcjaBiblioteka natywnaQRCode.fun API
Złożoność konfiguracjiInstalacja pakietu, konfiguracja bundleraPojedyncze żądanie HTTP
PersonalizacjaZależy od bibliotekiPełne stylowanie: kolory, kształty, loga
Wsparcie offlineTakWymaga internetu
KonserwacjaRęczna aktualizacja zależnościZawsze aktualny
Formaty wyjściowePNG, SVG (zależne od biblioteki)PNG, SVG

Zastosowania kodów QR w JavaScript

Typowe scenariusze, w których programiści JavaScript generują kody QR.

Aplikacje webowe

Generuj kody QR dynamicznie w aplikacjach React, Vue, Angular lub vanilla JS do udostępniania linków, płatności lub uwierzytelniania.

Backend Node.js

Twórz kody QR po stronie serwera dla faktur, biletów, etykiet wysyłkowych i automatycznych załączników e-mail.

Progressive Web Apps

Dodaj generowanie kodów QR do PWA dla mobilnych doświadczeń offline ze skanowalnymi kodami.

Rozszerzenia przeglądarki

Buduj rozszerzenia Chrome lub Firefox, które generują kody QR dla bieżącego URL strony lub zaznaczonego tekstu.

Często zadawane pytania

Popularne pytania dotyczące generowania kodów QR w JavaScript.

Dwie najpopularniejsze opcje to qrcode (lekka, świetna do prostych kodów QR) i qr-code-styling (zaawansowana personalizacja z kolorami, kształtami i logami). Wybierz qrcode dla prostoty lub qr-code-styling dla elastyczności projektowania.

Zacznij generować kody QR z JavaScript

Użyj naszego darmowego generatora online do szybkich kodów QR lub zintegruj API ze swoim projektem JavaScript do automatycznego generowania.

Otwórz Generator QRPrzeglądaj Dokumentację API