JavaScript QR कोड लाइब्रेरी

JavaScript से QR कोड जनरेट करें

JavaScript वेब डेवलपमेंट के लिए सबसे लोकप्रिय भाषा है। ब्राउज़र या Node.js में QR कोड जनरेट करने के लिए qrcode.js या qr-code-styling जैसी लाइब्रेरी का उपयोग करें, या उन्नत स्टाइलिंग के लिए QRCode.fun API कॉल करें।

इंस्टॉलेशन

अपने पसंदीदा पैकेज मैनेजर का उपयोग करके लोकप्रिय JavaScript QR कोड लाइब्रेरी इंस्टॉल करें।

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

JavaScript लाइब्रेरी से QR कोड जनरेट करें

अपने प्रोजेक्ट में QR कोड जनरेट करने के लिए लोकप्रिय JavaScript QR कोड लाइब्रेरी का उपयोग करने के कोड उदाहरण।

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

JavaScript में API से QR कोड जनरेट करें

अपने JavaScript एप्लिकेशन से कस्टम रंग, आकार और लोगो के साथ स्टाइल किए गए QR कोड जनरेट करने के लिए QRCode.fun API का उपयोग करें।

JavaScript API एकीकरण
// 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)

लाइव QR कोड प्रीव्यू

अभी JavaScript से QR कोड जनरेट करके देखें।

QR प्रीव्यू

नेटिव लाइब्रेरी बनाम API

JavaScript QR कोड लाइब्रेरी सीधे उपयोग करने बनाम QRCode.fun API की तुलना।

फीचरनेटिव लाइब्रेरीQRCode.fun API
सेटअप जटिलतापैकेज इंस्टॉल करें, बंडलर कॉन्फ़िगर करेंएक HTTP रिक्वेस्ट
कस्टमाइज़ेशनलाइब्रेरी के अनुसार भिन्नपूर्ण स्टाइलिंग: रंग, आकार, लोगो
ऑफ़लाइन सपोर्टहाँइंटरनेट आवश्यक
रखरखावमैन्युअल रूप से डिपेंडेंसी अपडेट करेंहमेशा अपडेटेड
आउटपुट फॉर्मेटPNG, SVG (लाइब्रेरी-निर्भर)PNG, SVG

JavaScript QR कोड उपयोग के मामले

सामान्य परिदृश्य जहाँ JavaScript डेवलपर QR कोड जनरेट करते हैं।

वेब एप्लिकेशन

लिंक, भुगतान या प्रमाणीकरण साझा करने के लिए React, Vue, Angular या वनिला JS वेब ऐप में गतिशील रूप से QR कोड जनरेट करें।

Node.js बैकएंड

इनवॉइस, टिकट, शिपिंग लेबल और स्वचालित ईमेल अटैचमेंट के लिए सर्वर-साइड QR कोड बनाएं।

प्रोग्रेसिव वेब ऐप्स

स्कैन करने योग्य कोड के साथ ऑफ़लाइन-सक्षम मोबाइल अनुभवों के लिए PWA में QR कोड जनरेशन जोड़ें।

ब्राउज़र एक्सटेंशन

वर्तमान पेज URL या चयनित टेक्स्ट के लिए QR कोड जनरेट करने वाले Chrome या Firefox एक्सटेंशन बनाएं।

अक्सर पूछे जाने वाले प्रश्न

JavaScript से QR कोड जनरेट करने के बारे में सामान्य प्रश्न।

दो सबसे लोकप्रिय विकल्प हैं qrcode (हल्की, सरल QR कोड के लिए बढ़िया) और qr-code-styling (रंग, आकार और लोगो के साथ उन्नत कस्टमाइज़ेशन)। सरलता के लिए qrcode या डिज़ाइन लचीलेपन के लिए qr-code-styling चुनें।

JavaScript से QR कोड जनरेट करना शुरू करें

त्वरित QR कोड के लिए हमारा मुफ़्त ऑनलाइन जनरेटर उपयोग करें, या स्वचालित जनरेशन के लिए API को अपने JavaScript प्रोजेक्ट में एकीकृत करें।