QRCode.Fun QRCode.Fun
Beginnen
JavaScript QR Code Bibliotheek

Genereer QR-codes met JavaScript

JavaScript is de populairste taal voor webontwikkeling. Gebruik bibliotheken zoals qrcode.js of qr-code-styling om QR-codes te genereren in de browser of Node.js, of roep de QRCode.fun API aan voor geavanceerde styling.

Probeer QR GeneratorBekijk API Docs

Installatie

Installeer populaire JavaScript QR-code bibliotheken met je favoriete pakketbeheerder.

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

Genereer QR-codes met JavaScript Bibliotheken

Hier zijn codevoorbeelden met populaire JavaScript QR-code bibliotheken om QR-codes te genereren in je projecten.

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

Genereer QR-codes via API in JavaScript

Gebruik de QRCode.fun API om gestileerde QR-codes te genereren met aangepaste kleuren, vormen en logo's vanuit je JavaScript applicatie.

JavaScript API Integratie
// 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 Preview

Probeer nu een QR-code te genereren met JavaScript.

QR preview

Native Bibliotheek vs API

Vergelijk het direct gebruiken van een JavaScript QR-code bibliotheek met de QRCode.fun API.

FunctieNative BibliotheekQRCode.fun API
Installatie complexiteitPakket installeren, bundler configurerenEnkel HTTP-verzoek
AanpassingVerschilt per bibliotheekVolledige styling: kleuren, vormen, logo's
Offline ondersteuningJaVereist internet
OnderhoudAfhankelijkheden handmatig bijwerkenAltijd up-to-date
UitvoerformatenPNG, SVG (bibliotheek-afhankelijk)PNG, SVG

JavaScript QR Code Toepassingen

Veelvoorkomende scenario's waarin JavaScript-ontwikkelaars QR-codes genereren.

Webapplicaties

Genereer QR-codes dynamisch in React, Vue, Angular of vanilla JS webapps voor het delen van links, betalingen of authenticatie.

Node.js Backend

Maak QR-codes server-side voor facturen, tickets, verzendlabels en geautomatiseerde e-mailbijlagen.

Progressive Web Apps

Voeg QR-code generatie toe aan PWA's voor offline-geschikte mobiele ervaringen met scanbare codes.

Browser Extensies

Bouw Chrome of Firefox extensies die QR-codes genereren voor de huidige pagina-URL of geselecteerde tekst.

Veelgestelde Vragen

Veelgestelde vragen over het genereren van QR-codes met JavaScript.

De twee populairste opties zijn qrcode (lichtgewicht, geweldig voor eenvoudige QR-codes) en qr-code-styling (geavanceerde aanpassing met kleuren, vormen en logo's). Kies qrcode voor eenvoud of qr-code-styling voor ontwerpflexibiliteit.

Begin met het genereren van QR-codes met JavaScript

Gebruik onze gratis online generator voor snelle QR-codes, of integreer de API in je JavaScript-project voor geautomatiseerde generatie.

Open QR GeneratorBekijk API Docs