QR Code Development

JavaScript로 QR Code 생성하기

<\/script>\n
'; }, get iframeSnippet() { const domain = 'qrcodefyi.com'; const type = 'guide'; const slug = 'javascript-qr-generation'; return ''; }, get activeSnippet() { return this.method === 'script' ? this.scriptSnippet : this.iframeSnippet; }, copySnippet() { navigator.clipboard.writeText(this.activeSnippet).then(() => { this.copied = true; setTimeout(() => { this.copied = false; }, 2000); }); } }" @keydown.escape.window="open = false" @click.outside="open = false">

Embed This Widget

Theme


      
    


    
    

      Widget powered by
      .
      Free, no account required.
    

  




  
  
  
Browser and Node.js QR code generation: qrcode.js, qr-code-styling, and server-side rendering for React and Vue.

  
  

    
  








  
  

    
    
      
      
  1. 
        Generating QR Codes in JavaScript
      
    2. 
      
      
  2. 
        Browser-Side Generation
      
    3. 
      
      
  3. 
        Server-Side (Node.js)
      
    4. 
      
      
  4. 
        React Integration
      
    5. 
      
      
  5. 
        Client-Side Scanning
      
    6. 
      
      
  6. 
        Performance Tips
      
    7. 
      
      
  7. 
        Key Takeaways
      
    8. 
      
    

  









  
  

  
  

    
    

      
Generating QR Codes in JavaScript


JavaScript QR code libraries work in both browser and Node.js environments, enabling client-side generation and server-side rendering for React and Vue applications.


Browser-Side Generation


qrcode.js — simple and lightweight:


const qr = new QRCode(document.getElementById("qrcode"), {
    text: "https://example.com",
    width: 256,
    height: 256,
    correctLevel: QRCode.CorrectLevel.M,
});



qr-code-styling — advanced visual customisation:


const qrCode = new QRCodeStyling({
    width: 300,
    height: 300,
    data: "https://example.com",
    dotsOptions: { type: "rounded", color: "#1a1a2e" },
    cornersSquareOptions: { type: "extra-rounded" },
    backgroundOptions: { color: "#ffffff" },
    imageOptions: { crossOrigin: "anonymous", margin: 10 },
    image: "/logo.png",
});
qrCode.append(document.getElementById("canvas"));
qrCode.download({ name: "qr-code", extension: "svg" });



Server-Side (Node.js)


qrcode (node-qrcode) — generates PNG, SVG, and data URLs:


const QRCode = require("qrcode");

// To file
await QRCode.toFile("./qrcode.png", "https://example.com", {
    errorCorrectionLevel: "M",
    width: 300,
});

// To data URL (for embedding in HTML)
const url = await QRCode.toDataURL("https://example.com");



React Integration


Using a React component wrapper:


import { QRCodeSVG } from "qrcode.react";

function MyComponent() {
    return (
        <QRCodeSVG
            value="https://example.com"
            size={256}
            level="M"
            includeMargin={true}
        />
    );
}



Client-Side Scanning


For reading QR codes from camera input in the browser:


    

  • jsQR: Pure JavaScript QR code reader from image data
    • 

  • html5-qrcode: Camera integration with scanning UI
    • 

  • @nicolo-ribaudo/qr-reader: Modern, lightweight scanner
    • 



Performance Tips


    

  • Generate SVG instead of PNG for smaller file size and scalability
    • 

  • Use Web Workers for generation to avoid blocking the main thread
    • 

  • Cache generated codes using data URLs or blob URLs
    • 

  • For server-side rendering, generate at build time rather than per-request
    • 



Key Takeaways


    

  • qr-code-styling for advanced browser-side visual customisation
    • 

  • node-qrcode for server-side PNG and SVG generation
    • 

  • qrcode.react for React component integration
    • 

  • jsQR for client-side camera scanning
    • 

  • Generate SVG for best performance and scalability
    •