JavaScript से QR कोड जनरेट करें
JavaScript वेब डेवलपमेंट के लिए सबसे लोकप्रिय भाषा है। ब्राउज़र या Node.js में QR कोड जनरेट करने के लिए qrcode.js या qr-code-styling जैसी लाइब्रेरी का उपयोग करें, या उन्नत स्टाइलिंग के लिए QRCode.fun API कॉल करें।
इंस्टॉलेशन
अपने पसंदीदा पैकेज मैनेजर का उपयोग करके लोकप्रिय JavaScript QR कोड लाइब्रेरी इंस्टॉल करें।
npm install qrcodeyarn add qrcodenpm install qr-code-stylingJavaScript लाइब्रेरी से QR कोड जनरेट करें
अपने प्रोजेक्ट में QR कोड जनरेट करने के लिए लोकप्रिय JavaScript QR कोड लाइब्रेरी का उपयोग करने के कोड उदाहरण।
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'
}
})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'
}
})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' })JavaScript में API से QR कोड जनरेट करें
अपने JavaScript एप्लिकेशन से कस्टम रंग, आकार और लोगो के साथ स्टाइल किए गए QR कोड जनरेट करने के लिए QRCode.fun 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 कोड जनरेट करके देखें।
नेटिव लाइब्रेरी बनाम 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 कोड जनरेट करने के बारे में सामान्य प्रश्न।
JavaScript से QR कोड जनरेट करना शुरू करें
त्वरित QR कोड के लिए हमारा मुफ़्त ऑनलाइन जनरेटर उपयोग करें, या स्वचालित जनरेशन के लिए API को अपने JavaScript प्रोजेक्ट में एकीकृत करें।