Generieren Sie QR-Codes mit einer REST-API: ein POST, sofortiges SVG

Ihr E-Commerce-Checkout muss einen QR-Code für die Tracking-URL jeder Bestellung anzeigen. Du könntest Installieren Sie eine clientseitige QR-Bibliothek, konfigurieren Sie ein Canvas-Element, verwalten Sie den Rendering-Lebenszyklus, und fügen Sie Ihrem Bundle 30–40 KB hinzu. Oder Sie können eine POST-Anfrage senden und eine SVG-Datei zurückerhalten.

Die Botoi /v1/qr/generate Endpoint wandelt jede Zeichenfolge oder URL in einen scannbaren QR um Code. Es gibt rohes SVG zurück, das Sie in HTML einbetten, in einer Datei speichern oder in eine PDF-Datei streamen können. Kein npm Paket, keine Canvas-Abhängigkeit, kein Build-Schritt.

Der API-Aufruf

Senden Sie eine POST-Anfrage mit dem Text, den Sie kodieren möchten:

Die Antwort ist ein rohes SVG-Bild (Inhaltstyp: image/svg+xml):

Dieses SVG wird in jeder Größe scharf dargestellt, da es vektorbasiert ist. Legen Sie es in eine <img> Tag, integrieren Sie es in Ihren HTML-Code oder leiten Sie es an eine Datei weiter. Kein JSON-Parsing benötigt; Der Antworttext ist das SVG selbst.

Parameter

Der Endpunkt akzeptiert sechs Parameter. Nur text ist erforderlich:

• Text (Zeichenfolge, erforderlich): Die zu kodierende URL oder der zu kodierende Text. Unterstützt bis zu ~4.296 alphanumerische Zeichen.
• Größe (Zahl, Standard 300): Breite und Höhe in Pixel. Bereich: 50 bis 2000.
• dunkle Farbe (Hex-String, Standard #000000): Vordergrundfarbe von die QR-Module.
• Lichtfarbe (Hex-String, Standard #ffffff): Hintergrundfarbe.
• errorCorrectionLevel (Zeichenfolge, Standard M): Einer von L (7 %), M (15 %), Q (25 %) oder H (30 %). Höhere Stufen tolerieren mehr Schaden, erzeugen aber dichtere Codes.
• Marge (Anzahl, Standard 4): Ruhezone um den QR-Code in Modulen. Bereich: 0 bis 20.

Hier ist eine Anfrage mit allen sechs Parametern:

Praxisbeispiele

QR-Code für die Speisekarte des Restaurants

Drucken Sie einen QR-Code auf Tischzelten, damit Gäste die vollständige Speisekarte auf ihrem Telefon abrufen können. Fehler Korrektur H behandelt Schrammen und Kaffeeflecken.

QR-Code für Veranstaltungstickets

Kodieren Sie in jedem QR-Code eine eindeutige Ticket-ID. Das Personal scannt es an der Tür mit jedem Smartphone Kamera. Die Fehlerkorrektur Q sorgt für ein gutes Gleichgewicht zwischen Dichte und Schadenstoleranz für bedruckte Abzeichen.

QR-Code für den Zahlungslink

Generieren Sie einen scannbaren Zahlungslink für Rechnungen, Quittungen oder Verkaufsstellenanzeigen. Die Der Kunde scannt es und landet auf einer Stripe-Checkout-Seite.

Batch-Generierung in einer Schleife

Benötigen Sie QR-Codes für einen Produktkatalog? Durchlaufen Sie eine Liste von URLs und speichern Sie jede SVG-Datei auf der Festplatte. Dieses Bash-Skript generiert in weniger als einer Sekunde vier QR-Codes:

Ausgabe:

Node.js-Beispiel: QR-Codes zur Auftragsverfolgung

Dieser Express-Server stellt a zur Verfügung /orders/:id/qr Endpunkt. Wenn Sie zur Kasse gehen Wenn die Seite oder die Bestätigungs-E-Mail-Vorlage diese URL abruft, erhält sie einen SVG-QR-Code zurück, der darauf verweist zur Sendungsverfolgungsseite der Bestellung.

Verwendung:

Der Endpunkt legt einen 24-Stunden-Cache-Header fest, damit wiederholte Anfragen für dieselbe Bestellung nicht eintreffen die API erneut. Fügen Sie in der Produktion Redis oder ein CDN vor dieser Route hinzu, um mehr Datenverkehr zu erzielen.

Clientseitige QR-Bibliotheken im Vergleich zur API: wann welche verwendet werden sollten

Nutzen Sie die API, wenn Sie serverseitige Generierung (E-Mails, PDFs, Quittungen) benötigen und wann Sie möchten Halten Sie Ihr Frontend-Paket klein, oder wenn Sie QR-Codes in einem Backend-Workflow generieren wie Bestellabwicklung oder Ticketausstellung.

Verwenden Sie eine clientseitige Bibliothek, wenn Ihre App offline funktionieren muss und die Latenz wichtiger ist als die Bundle-Größe (Rendering unter 5 ms) oder wenn Sie ein Tool erstellen, bei dem Benutzer generieren QR-Codes interaktiv im Browser und Sie möchten nicht auf eine Netzwerkanfrage angewiesen sein für jeden Tastendruck.

Wichtige Punkte

Das kostenlose Kontingent mit 5 Anfragen pro Minute deckt Entwicklung, Prototyping und Kleinserien ab Produktionseinsatz. Für Batch-Generierung oder Apps mit hohem Datenverkehr fügen Sie Ihren API-Schlüssel hinzu Authorization: Bearer Kopfzeile. Überprüfen Sie die API-Dokumente für die vollständige Endpunktreferenz.