TypeScript पर QR कोड जनरेटर: qrcode लाइब्रेरी

TypeScript पर QR कोड जनरेटर: qrcode लाइब्रेरी और इसका उपयोग

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

qrcode लाइब्रेरी क्या है?

qrcode लाइब्रेरी एक लोकप्रिय npm पैकेज है, जो JavaScript में लिखा गया है और TypeScript के साथ पूरी तरह से संगत है। यह विभिन्न प्रारूपों में QR कोड जनरेट करने की अनुमति देती है: डेटा स्ट्रिंग के रूप में, SVG के रूप में, Canvas के रूप में (ब्राउज़र के लिए) या PNG इमेज के रूप में (Node.js के लिए)। मुख्य लाभ:

QR कोड के सभी संस्करणों (1 से 40 तक) का समर्थन।
अनुकूलन योग्य त्रुटि सुधार (L, M, Q, H)।
ब्राउज़र और Node.js वातावरण दोनों में काम करता है।
TypeScript का पूर्ण समर्थन - प्रकार पैकेज में शामिल हैं।
सरल और सहज API।

स्थापना

आरंभ करने के लिए, npm या yarn के माध्यम से पैकेज स्थापित करें:

npm install qrcode

या

yarn add qrcode

यदि आप TypeScript का उपयोग कर रहे हैं, तो अतिरिक्त प्रकारों की आवश्यकता नहीं है - वे पहले से ही पैकेज में निर्मित हैं।

मूल उदाहरण: स्ट्रिंग के रूप में QR कोड जनरेशन

QR कोड प्राप्त करने का सबसे सरल तरीका इसे डेटा (जैसे, URL) के साथ एक स्ट्रिंग के रूप में जनरेट करना है। इसके लिए toString विधि का उपयोग किया जाता है:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

इस उदाहरण में, QR कोड ASCII आर्ट के रूप में कंसोल में आउटपुट होता है। यह डिबगिंग या प्रदर्शन के लिए सुविधाजनक है।

SVG के रूप में QR कोड जनरेशन (वेब के लिए)

वेब पेज पर QR कोड डालने के लिए, SVG प्रारूप का उपयोग करना सबसे अच्छा है - यह गुणवत्ता खोए बिना स्केल करता है और CSS के माध्यम से आसानी से स्टाइल किया जा सकता है।

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // svgString को DOM में डालें, उदाहरण के लिए innerHTML के माध्यम से  document.getElementById('qrcode-container').innerHTML = svgString;});

आप कॉलबैक के बजाय प्रॉमिस का भी उपयोग कर सकते हैं:

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

Canvas के रूप में QR कोड जनरेशन (ब्राउज़र के लिए)

यदि आपको QR कोड को canvas एलिमेंट में एम्बेड करने की आवश्यकता है (उदाहरण के लिए, आगे की प्रक्रिया या डाउनलोड के लिए), तो toCanvas विधि का उपयोग करें:

import QRCode from 'qrcode';

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

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('QR कोड सफलतापूर्वक canvas पर रेंडर हुआ');});

पैरामीटर width canvas की चौड़ाई निर्धारित करता है (ऊंचाई स्वचालित रूप से गणना की जाती है)।

PNG के रूप में QR कोड जनरेशन (Node.js के लिए)

सर्वर-साइड जनरेशन के लिए (उदाहरण के लिए, इमेज को डिस्क पर सेव करने के लिए) toFile का उपयोग करें:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('QR कोड qrcode.png के रूप में सहेजा गया');});

आप मॉड्यूल और पृष्ठभूमि का रंग, आकार, स्तर भी सेट कर सकते हैं