QR-Codes mit JavaScript generieren
JavaScript ist die beliebteste Sprache für Webentwicklung. Verwenden Sie Bibliotheken wie qrcode.js oder qr-code-styling, um QR-Codes im Browser oder Node.js zu generieren, oder rufen Sie die QRCode.fun API für erweiterte Gestaltung auf.
Installation
Installieren Sie beliebte JavaScript QR-Code-Bibliotheken mit Ihrem bevorzugten Paketmanager.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingQR-Codes mit JavaScript-Bibliotheken generieren
Hier sind Codebeispiele mit beliebten JavaScript QR-Code-Bibliotheken zur Generierung von QR-Codes in Ihren Projekten.
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' })QR-Codes über API in JavaScript generieren
Verwenden Sie die QRCode.fun API, um gestaltete QR-Codes mit benutzerdefinierten Farben, Formen und Logos aus Ihrer JavaScript-Anwendung zu generieren.
// 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)Live QR-Code-Vorschau
Probieren Sie jetzt die Generierung eines QR-Codes mit JavaScript aus.
Native Bibliothek vs API
Vergleichen Sie die direkte Verwendung einer JavaScript QR-Code-Bibliothek mit der QRCode.fun API.
| Funktion | Native Bibliothek | QRCode.fun API |
|---|---|---|
| Einrichtungskomplexität | Paket installieren, Bundler konfigurieren | Einzelne HTTP-Anfrage |
| Anpassung | Variiert je nach Bibliothek | Vollständige Gestaltung: Farben, Formen, Logos |
| Offline-Unterstützung | Ja | Erfordert Internet |
| Wartung | Abhängigkeiten manuell aktualisieren | Immer aktuell |
| Ausgabeformate | PNG, SVG (bibliotheksabhängig) | PNG, SVG |
JavaScript QR-Code-Anwendungsfälle
Häufige Szenarien, in denen JavaScript-Entwickler QR-Codes generieren.
Webanwendungen
Generieren Sie QR-Codes dynamisch in React, Vue, Angular oder Vanilla-JS-Webanwendungen zum Teilen von Links, Zahlungen oder Authentifizierung.
Node.js-Backend
Erstellen Sie QR-Codes serverseitig für Rechnungen, Tickets, Versandetiketten und automatisierte E-Mail-Anhänge.
Progressive Web Apps
Fügen Sie QR-Code-Generierung zu PWAs für offlinefähige mobile Erlebnisse mit scannbaren Codes hinzu.
Browser-Erweiterungen
Erstellen Sie Chrome- oder Firefox-Erweiterungen, die QR-Codes für die aktuelle Seiten-URL oder ausgewählten Text generieren.
JavaScript QR-Code-Ökosystem im Detail
JavaScript hat das reichhaltigste QR-Code-Ökosystem aller Sprachen und umfasst Browser-, Server- und Hybridumgebungen.
React, Vue & Angular Integration
Moderne Frontend-Frameworks verfügen jeweils über dedizierte QR-Code-Wrapper-Komponenten. react-qr-code bietet eine deklarative React-Komponente mit SVG-Rendering. vue-qrcode bietet ein Vue 3 Composable mit reaktiver Datenbindung. Für Angular kapselt angularx-qrcode die QR-Generierung in einer Direktive. Diese framework-spezifischen Wrapper handhaben Lifecycle-Management, Reaktivität und SSR-Kompatibilität automatisch — sodass sich die QR-Generierung in jedem Framework nativ anfühlt.
Server-Side Rendering (SSR) & Next.js
Bei der Verwendung von Next.js, Nuxt oder anderen SSR-Frameworks kann die QR-Code-Generierung entweder serverseitig während des Renderings oder clientseitig nach der Hydratation erfolgen. Die serverseitige Generierung mit dem qrcode npm-Paket erzeugt statische SVG-Strings, die direkt in HTML eingebettet werden — ideal für SEO und schnelle initiale Seitenladungen. Die clientseitige Generierung mit qr-code-styling ermöglicht interaktive Anpassung nach dem Laden der Seite. Die QRCode.fun API funktioniert über fetch aus beiden Umgebungen.
npm-Ökosystem & Bundle-Größe-Überlegungen
Das JavaScript QR-Code-Ökosystem bietet Bibliotheken mit unterschiedlichen Bundle-Größen-Kompromissen. Das Kern-Paket qrcode ist ~33KB minifiziert und unterstützt sowohl Canvas als auch SVG. qr-code-styling fügt erweiterte visuelle Anpassung mit ~65KB hinzu. Für ultraleichte Anforderungen liegt qrcode-generator unter 10KB. Bei der Auswahl einer Bibliothek berücksichtigen Sie Ihr Bundle-Budget: Eine Landing Page bevorzugt möglicherweise den API-Ansatz (kein Bundle-Aufwand), während eine offline-fähige PWA von einer gebündelten Bibliothek profitiert.
Häufig gestellte Fragen
Häufige Fragen zur Generierung von QR-Codes mit JavaScript.
Beginnen Sie mit der Generierung von QR-Codes mit JavaScript
Verwenden Sie unseren kostenlosen Online-Generator für schnelle QR-Codes oder integrieren Sie die API in Ihr JavaScript-Projekt für automatisierte Generierung.