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.
Instalacja
Zainstaluj popularne biblioteki JavaScript do kodów QR używając preferowanego menedżera pakietów.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingGeneruj 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' })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.
// 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.
Biblioteka natywna vs API
Porównaj bezpośrednie użycie biblioteki JavaScript do kodów QR z API QRCode.fun.
| Funkcja | Biblioteka natywna | QRCode.fun API |
|---|---|---|
| Złożoność konfiguracji | Instalacja pakietu, konfiguracja bundlera | Pojedyncze żądanie HTTP |
| Personalizacja | Zależy od biblioteki | Pełne stylowanie: kolory, kształty, loga |
| Wsparcie offline | Tak | Wymaga internetu |
| Konserwacja | Ręczna aktualizacja zależności | Zawsze aktualny |
| Formaty wyjściowe | PNG, 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.
Dogłębna Analiza Ekosystemu QR Code w JavaScript
JavaScript posiada najbogatszy ekosystem QR code, obejmujący środowiska przeglądarkowe, serwerowe i hybrydowe.
Integracja z React, Vue i Angular
Nowoczesne frameworki mają dedykowane komponenty opakowujące QR. react-qr-code dla React, vue-qrcode dla Vue 3, angularx-qrcode dla Angular.
Server-Side Rendering i Next.js
Frameworki SSR mogą generować QR po stronie serwera dla SEO lub po stronie klienta dla interaktywności. API QRCode.fun działa z obu środowisk.
Ekosystem npm i Rozmiar Paczki
Biblioteki o różnych kompromisach rozmiaru paczki: qrcode ~33KB, qr-code-styling ~65KB, qrcode-generator poniżej 10KB.
Często zadawane pytania
Popularne pytania dotyczące generowania kodów QR w JavaScript.
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.