TypeScript QR कोड जनरेटर: qrcode.js और qrcode-generator

TypeScript QR कोड जनरेटर: qrcode.js और qrcode-generator

QR कोड आधुनिक वेब का अहम हिस्सा बन गए हैं - वेबसाइट लिंक, Wi-Fi पासवर्ड, संपर्क जानकारी और भुगतान विवरण तक। TypeScript इकोसिस्टम में कई पुख्ता लाइब्रेरी हैं जो क्लाइंट (ब्राउज़र) और सर्वर (Node.js) दोनों पर QR कोड जनरेट कर सकती हैं। इस लेख में हम दो सबसे लोकप्रिय लाइब्रेरी - qrcode (qrcode.js) और qrcode-generator - को विस्तार से समझेंगे और TypeScript प्रोजेक्ट में इन्हें इंटीग्रेट करना सीखेंगे।

1. qrcode (qrcode.js) — सबसे लोकप्रिय लाइब्रेरी

qrcode लाइब्रेरी (npm पैकेज: qrcode) QR कोड जनरेट करने का डी-फैक्टो स्टैंडर्ड है। यह canvas, SVG, Data URI स्ट्रिंग या सादे टेक्स्ट में आउटपुट सपोर्ट करती है। TypeScript टाइपिंग (बिल्ट-इन टाइप्स या @types/qrcode) के साथ डेवलपमेंट सुरक्षित और आसान हो जाता है।

इंस्टॉलेशन

npm install qrcode
npm install --save-dev @types/qrcode  # TypeScript के लिए

बेसिक उदाहरण: canvas पर QR कोड जनरेट करें (ब्राउज़र)

import QRCode from 'qrcode';

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {
  if (error) console.error('जनरेट करने में त्रुटि:', error);
  else console.log('QR कोड तैयार!');
});

SVG में जनरेट करें (सर्वर-साइड रेंडरिंग के लिए)

import QRCode from 'qrcode';

const svgString = await QRCode.toString('https://pythonlib.ru', {
  type: 'svg',
  color: { dark: '#1a1a2e', light: '#eaeaea' }
});
console.log(svgString); // तैयार SVG कोड

कस्टमाइज़ेशन पैरामीटर

• width — QR कोड की चौड़ाई पिक्सल में (डिफ़ॉल्ट 256)।
• margin — किनारे से दूरी (मॉड्यूल में, डिफ़ॉल्ट 4)।
• color.dark / color.light — मॉड्यूल और बैकग्राउंड के रंग।
• errorCorrectionLevel — त्रुटि सुधार स्तर: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%)।
• type — आउटपुट फॉर्मेट: 'png', 'svg', 'utf8'।

2. qrcode-generator — हल्का विकल्प

qrcode-generator लाइब्रेरी (npm पैकेज: qrcode-generator) बहुत छोटा API देती है और इसकी कोई डिपेंडेंसी नहीं है। यह तब बेस्ट है जब आपको सिर्फ QR कोड मैट्रिक्स चाहिए या कस्टम फॉर्मेट में जनरेट करना हो।

इंस्टॉलेशन

npm install qrcode-generator

उदाहरण: canvas पर QR कोड बनाएं और ड्रा करें

import QRCode from 'qrcode-generator';

const qr = QRCode(0, 'M'); // टाइप (0 = auto) और त्रुटि सुधार स्तर
qr.addData('https://pythonlib.ru');
qr.make();

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const size = qr.getModuleCount();
const cellSize = 10;
canvas.width = size * cellSize;
canvas.height = size * cellSize;

for (let row = 0; row < size; row++) {
  for (let col = 0; col < size; col++) {
    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';
    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
  }
}

टेक्स्ट फॉर्मेट में QR कोड (डीबगिंग के लिए)

const qr = QRCode(0, 'M');
qr.addData('Hello TypeScript!');
qr.make();
console.log(qr.createASCII()); // कंसोल में कैरेक्टर से QR कोड दिखाएगा

3. लाइब्रेरी की तुलना

पुस्तकालय में भी

जावास्क्रिप्ट (Node.js) मानक पुस्तकालय: पूर्ण अवलोकन Sh – शेल कमांड प्रबंधन Matplotlib डेटा विज़ुअलाइज़ेशन: पूर्ण गाइड TypeScript में डेटा वैलिडेशन: Zod, Yup और अन्य उपकरण Playsound – ऑडियो चलाने की Python लाइब्रेरी

अनुशंसाएँ

Ktor Client — Kotlin के लिए HTTP-क्लाइंट

JavaScript (Node.js) के लिए CLI फ्रेमवर्क: Commander.js – कंसोल एप्लिकेशन बनाना

Swift (iOS/macOS) में S3 और क्लाउड स्टोरेज के साथ कार्य: AWSS3 और Amplify

Kotlin में Rate Limiting: लाइब्रेरीज़ और कार्यान्वयन