مولّد رموز QR بـ HTML وCSS وJavaScript: درس

رمز QR باركود ثنائي الأبعاد يحفظ النص كشبكة مربعات سوداء وبيضاء («وحدات»). المربعات الثلاثة الكبيرة في الزوايا تساعد الماسح على إيجاد الرمز وتدويره. بقية الشبكة تحمل البيانات وتكرارها الاحتياطي. رمز QR يحفظ نصاً فقط. الهاتف يقرأ النص وإن بدا رابطاً يعرض فتحه. لذلك قد يقود الرمز إلى أي مكان، آمن أو ضار.

هذا الدرس يجمع مكتبة وcanvas وتنزيل ملف في مشروع صغير واحد.

• تحويل رابط موقع إلى QR للطباعة
• وضع نص في QR دون اتصال
• تعلّم إضافة مكتبة جاهزة إلى مشروع
• تنزيل PNG بـ canvas.toDataURL

المشروع أربعة ملفات: index.html وstyle.css وscript.js وlib/qrcode-generator.js (Kazuhiko Arase، MIT، v1.4.4). يحمّل HTML المكتبة أولاً ثم script.js. عند إرسال النموذج يفحص الكود النص ويبني مصفوفة الوحدات بـ qrcode(0, 'M') ويرسمها على canvas. الحجم بين 128 و512 بكسل والألوان من <input type="color">. اللون نفسه للأمام والخلفية مرفوض لأنه لن يُمسح. يصبح href لزر التنزيل canvas.toDataURL('image/png') فيطابق PNG ما على الشاشة. إذا كانت المكتبة ملفاً محلياً تعمل الأداة دون اتصال. لأداة QR الكاملة بأنواع كثيرة افتح /qr.

ترميز QR من الصفر صعب: اختيار الإصدار والكتل وتصحيح أخطاء Reed–Solomon والقناع. لذلك تُستعمل مكتبة جاهزة. المستوى M يتحمل نحو 15% من التلف لكنه لا يصلح التباين الضعيف ولا المنطقة الهادئة المقطوعة. النص الطويل جداً يحتاج وحدات كثيرة: إذا نال كل وحدة أقل من بكسل عند 128 بكسل لا يُرسم الرمز ويُطلب حجم أكبر. ومع نص زائد ترمي المكتبة «code length overflow» فيلتقطها الكود ويعرض رسالة واضحة.

الميزة: لا بناء ولا خادم والنص لا يذهب لأي مكان ويعمل دون اتصال. الحد: كون الرمز يُمسح لا يعني أنه آمن. عامل QR مجهولاً كرابط غير مفحوص واقرأ النطاق قبل الفتح.

الأفكار الأساسية التي يقوم عليها الكود:

• qrcode(0, 'M'): 0 = يختار الإصدار بنفسه، M = تصحيح أخطاء ~15%
• isDark(row, col): هل الوحدة داكنة؟
• المنطقة الهادئة: 4 وحدات فارغة حول الحافة
• التنزيل بـ canvas.toDataURL('image/png')

استدعاء المكتبة والرسم على canvas ووضع رابط PNG:

1. تحويل النص إلى مصفوفة QR:

// <script src="lib/qrcode-generator.js"></script> loads window.qrcode
const qr = qrcode(0, "M");
qr.addData(text, "Byte");
qr.make();
const modules = qr.getModuleCount();

qrcode(0, "M") يُنشئ كائن QR فارغاً: 0 يعني أن المكتبة تختار الإصدار (الحجم)، وM تعني تصحيح أخطاء ~15%.

addData يضيف النص كبايتات UTF-8، وmake() يبني مصفوفة الوحدات كاملة.

modules هو عدد المربعات في ضلع واحد، مثلاً 25 لرابط قصير. لا شيء على الشاشة بعد، فقط جدول داكن وفاتح.

2. حجم الوحدة بالبكسل والمنطقة الهادئة:

const QUIET_ZONE = 4;
const cell = Math.floor(size / (modules + QUIET_ZONE * 2));
if (cell < 1) throw new Error("Choose a larger size for this much text.");
const offset = Math.floor((size - cell * modules) / 2);

QUIET_ZONE حافة فارغة بعرض 4 وحدات حول الرمز. الماسح يجد الرمز بهذه المسافة.

cell هو عدد بكسلات المربع الواحد: الحجم المختار (مثلاً 256 px) مقسوماً على الوحدات مع الحواف.

إذا كان cell أقل من 1 فالرمز لا يتسع لهذا الحجم. بدل رسم QR مقصوص يُطلب من المستخدم اختيار حجم أكبر.

offset يضع الرمز في وسط canvas.

3. رسم المصفوفة على canvas:

canvas.width = canvas.height = size;
const ctx = canvas.getContext("2d");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, size, size);
ctx.fillStyle = fg;
for (let r = 0; r < modules; r++)
  for (let c = 0; c < modules; c++)
    if (qr.isDark(r, c)) ctx.fillRect(offset + c * cell, offset + r * cell, cell, cell);

أولاً يُملأ canvas كله بلون الخلفية (bg)، فيصبح المربع الفاتح والمنطقة الهادئة.

حلقتان تمرّان على كل صف وعمود. عندما يكون isDark(r, c) صحيحاً يُرسم مربع بلون المقدمة (fg) هناك.

النتيجة: رمز QR الظاهر على الشاشة، بثلاثة مربعات في الزوايا والنقاط بينها.

4. رابط تنزيل PNG:

downloadLink.href = canvas.toDataURL("image/png");

toDataURL يحوّل صورة canvas إلى ملف PNG ويضعه في الرابط.

عند الضغط على Download PNG يحفظ المتصفح هذا الملف. له نفس حجم وألوان المعاينة لأنه من نفس canvas.

المسار كله: نص → مصفوفة → canvas → PNG.

• هل رموز QR مجانية؟ نعم. المعيار مفتوح والمكتبة برخصة MIT.
• هل أحتاج الإنترنت؟ لا بعد تحميل الصفحة والمكتبة المحلية مرة واحدة.
• هل يُرسل النص إلى خادم؟ لا. الترميز في المتصفح بلا fetch ولا كوكيز ولا تحليلات.
• إذا مُسح الرمز فهل الموقع آمن؟ لا. QR مجرد نص، افحص النطاق بنفسك.
• أين الأداة الكاملة؟ في nibrascode.com/qr.