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.
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'
}
})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'
}
})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.
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.