مولد رموز QR باستخدام TypeScript: qrcode.js و qrcode-generator

مولد رموز QR باستخدام TypeScript: qrcode.js و qrcode-generator

أصبحت رموز QR جزءًا لا يتجزأ من الويب الحديث: من روابط المواقع وكلمات مرور Wi-Fi إلى بيانات الاتصال وتفاصيل الدفع. في نظام TypeScript البيئي، توجد عدة مكتبات ناضجة تسمح بتوليد رموز QR سواء على جانب العميل (المتصفح) أو على الخادم (Node.js). في هذه المقالة، سنشرح بالتفصيل المكتبتين الأكثر شيوعًا: qrcode (qrcode.js) و qrcode-generator، وسنوضح كيفية دمجهما في مشروع TypeScript.

1. qrcode (qrcode.js) — مكتبة متعددة الاستخدامات

مكتبة qrcode (حزمة npm: qrcode) هي المعيار الفعلي لتوليد رموز QR. وهي تدعم إخراج النتيجة على شكل canvas، SVG، سلسلة Data URI، أو نص عادي. بفضل كتابة TypeScript (الأنواع المضمنة أو @types/qrcode) يصبح التطوير آمنًا ومريحًا.

التثبيت

npm install qrcode\nnpm install --save-dev @types/qrcode  # لـ TypeScript

مثال أساسي: توليد رمز QR في canvas (المتصفح)

import QRCode from 'qrcode';\n\nconst canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;\n\nQRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {\n  if (error) console.error('خطأ في التوليد:', error);\n  else console.log('تم إنشاء رمز QR!');\n});

التوليد بصيغة SVG (للتقديم من الخادم)

import QRCode from 'qrcode';\n\nconst svgString = await QRCode.toString('https://pythonlib.ru', {\n  type: 'svg',\n  color: { dark: '#1a1a2e', light: '#eaeaea' }\n});\nconsole.log(svgString); // كود SVG جاهز

خيارات الإعداد

\n
• width — عرض رمز QR بالبكسل (الافتراضي 256).
\n
• margin — الهامش من الحافة (بالوحدات، الافتراضي 4).
\n
• color.dark / color.light — ألوان الوحدات والخلفية.
\n
• errorCorrectionLevel — مستوى تصحيح الأخطاء: 'L' (7%)، 'M' (15%)، 'Q' (25%)، 'H' (30%).
\n
• type — تنسيق الإخراج: 'png'، 'svg'، 'utf8'.
\n

2. qrcode-generator — بديل خفيف الوزن

مكتبة qrcode-generator (حزمة npm: qrcode-generator) تقدم واجهة برمجة تطبيقات بسيطة ولا تتطلب تبعيات. وهي مثالية إذا كنت بحاجة فقط إلى الحصول على مصفوفة رمز QR أو توليده بتنسيق مخصص.

التثبيت

npm install qrcode-generator

مثال: الإنشاء والرسم على canvas

import QRCode from 'qrcode-generator';\n\nconst qr = QRCode(0, 'M'); // النوع (0 = تلقائي) ومستوى التصحيح\nqr.addData('https://pythonlib.ru');\nqr.make();\n\nconst canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;\nconst ctx = canvas.getContext('2d')!;\nconst size = qr.getModuleCount();\nconst cellSize = 10;\ncanvas.width = size * cellSize;\ncanvas.height = size * cellSize;\n\nfor (let row = 0; row < size; row++) {\n  for (let col = 0; col < size; col++) {\n    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';\n    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);\n  }\n}

الحصول على تمثيل نصي (لتصحيح الأخطاء)

const qr = QRCode(0, 'M');\nqr.addData('Hello TypeScript!');\nqr.make();\nconsole.log(qr.createASCII()); // سيُظهر رمز QR في وحدة التحكم بأحرف

3. مقارنة المكتبات

أيضاً في المكتبة

tsx لـ TypeScript: دليل شامل مع أمثلة عملية مكتبة kotlinx.serialization لمعالجة JSON في Kotlin عميل OAuth لـ Kotlin: مكتبة Ktor OAuth للمصادقة في API تكوين تطبيقات C# (.NET): المكتبات والأدوات رموز JWT في Kotlin: التوليد والتحقق والاستخدام مع io.jsonwebtoken

توصيات

إرسال البريد الإلكتروني باستخدام C++: libcurl وعملاء SMTP

ts-jest لـ TypeScript: دليل شامل مع أمثلة

ts-node-dev لـ TypeScript: دليل شامل مع أمثلة

JsonWebToken في JavaScript (Node.js): دليل شامل مع أمثلة