QRCode.Fun QRCode.Fun
Commencer
Bibliothèque de Codes QR JavaScript

Générer des Codes QR avec JavaScript

JavaScript est le langage le plus populaire pour le développement web. Utilisez des bibliothèques comme qrcode.js ou qr-code-styling pour générer des codes QR dans le navigateur ou Node.js, ou appelez l'API QRCode.fun pour des styles avancés.

Essayer le Générateur QRVoir la Documentation API

Installation

Installez les bibliothèques populaires de codes QR JavaScript avec votre gestionnaire de paquets préféré.

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

Générer des Codes QR avec les Bibliothèques JavaScript

Voici des exemples de code utilisant les bibliothèques populaires de codes QR JavaScript pour générer des codes QR dans vos projets.

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

Générer des Codes QR via API en JavaScript

Utilisez l'API QRCode.fun pour générer des codes QR stylisés avec des couleurs, formes et logos personnalisés depuis votre application JavaScript.

Intégration API 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)

Aperçu du Code QR en Direct

Essayez de générer un code QR avec JavaScript maintenant.

Aperçu QR

Bibliothèque Native vs API

Comparez l'utilisation directe d'une bibliothèque de codes QR JavaScript avec l'API QRCode.fun.

FonctionnalitéBibliothèque NativeQRCode.fun API
Complexité de configurationInstaller le paquet, configurer le bundlerUne seule requête HTTP
PersonnalisationVarie selon la bibliothèqueStylisation complète : couleurs, formes, logos
Support hors ligneOuiNécessite internet
MaintenanceMettre à jour les dépendances manuellementToujours à jour
Formats de sortiePNG, SVG (dépend de la bibliothèque)PNG, SVG

Cas d'Utilisation des Codes QR en JavaScript

Scénarios courants où les développeurs JavaScript génèrent des codes QR.

Applications Web

Générez des codes QR dynamiquement dans des applications web React, Vue, Angular ou JavaScript vanilla pour partager des liens, paiements ou authentification.

Backend Node.js

Créez des codes QR côté serveur pour des factures, billets, étiquettes d'expédition et pièces jointes d'e-mails automatisées.

Applications Web Progressives

Ajoutez la génération de codes QR aux PWA pour des expériences mobiles avec capacité hors ligne et codes scannables.

Extensions de Navigateur

Créez des extensions Chrome ou Firefox qui génèrent des codes QR pour l'URL de la page actuelle ou le texte sélectionné.

Questions Fréquemment Posées

Questions courantes sur la génération de codes QR avec JavaScript.

Les deux options les plus populaires sont qrcode (légère, idéale pour les codes QR simples) et qr-code-styling (personnalisation avancée avec couleurs, formes et logos). Choisissez qrcode pour la simplicité ou qr-code-styling pour la flexibilité de design.

Commencez à générer des codes QR avec JavaScript

Utilisez notre générateur en ligne gratuit pour des codes QR rapides, ou intégrez l'API dans votre projet JavaScript pour une génération automatisée.

Ouvrir le Générateur QRExplorer la Documentation API