HTML, CSS və JavaScript ilə QR kod generatoru: dərs

QR kod mətni ağ-qara kvadratlar («modullar») şəbəkəsində saxlayan iki ölçülü barkoddur. Üç küncdəki böyük kvadrat skanerə kodu tapmağa və çevirməyə kömək edir. Qalan şəbəkə məlumatı və onun ehtiyat hissəsini daşıyır. QR yalnız mətn saxlayır. Telefon mətni oxuyur və o, URL-ə oxşayırsa, açmağı təklif edir. Buna görə QR istənilən yerə — təhlükəsiz və ya zərərli — apara bilər.

Bu dərs kitabxana, canvas və fayl yükləməni bir kiçik layihədə birləşdirir.

• Sayt linkini çap üçün QR-a çevirmək
• Mətni oflayn QR-a salmaq
• Hazır kitabxananı layihəyə qoşmağı öyrənmək
• canvas.toDataURL ilə PNG yükləmək

Layihə dörd fayldır: index.html, style.css, script.js və lib/qrcode-generator.js (Kazuhiko Arase, MIT, v1.4.4). HTML əvvəl kitabxananı, sonra script.js-i yükləyir. Form göndəriləndə kod mətni yoxlayır, qrcode(0, 'M') ilə modul matrisini qurur və onu canvas-a çəkir. Ölçü 128–512 px arası seçilir, rənglər <input type="color"> ilə gəlir. Eyni ön və arxa rəng qəbul edilmir, çünki skan olunmaz. Yükləmə düyməsinin href-i canvas.toDataURL('image/png') olur, ona görə PNG ekrandakı ilə eynidir. Kitabxana lokal fayldırsa, alət oflayn da işləyir. Çox növlü tam QR aləti üçün /qr səhifəsinə bax.

QR-ı sıfırdan kodlamaq çətindir: versiya seçimi, bloklar, Reed–Solomon xəta düzəlişi və maska. Buna görə hazır kitabxana işlədilir. Səviyyə M təxminən 15% zədəyə dözür, amma pis kontrastı və kəsilmiş sakit zonanı düzəltmir. Çox uzun mətn çox modul tələb edir: 128 px-də hər modula bir pikseldən az düşürsə, kod çəkilmir və daha böyük ölçü istənir. Həddən artıq mətndə kitabxana «code length overflow» atır, kod onu tutub aydın mesaj göstərir.

Üstünlük: build yoxdur, server yoxdur, mətn heç yerə getmir, oflayn işləyir. Məhdudiyyət: QR kodun skan olunması onun təhlükəsiz olması demək deyil. Naməlum QR-ı yoxlanmamış link kimi qəbul et və domeni açmazdan əvvəl oxu.

Kodun dayandığı əsas anlayışlar:

• qrcode(0, 'M'): 0 = versiyanı özü seçir, M = ~15% xəta düzəlişi
• isDark(row, col): modul qaradırmı?
• Sakit zona: kənarda 4 modul boş yer
• canvas.toDataURL('image/png') ilə yükləmə

Kitabxananı çağırmaq, canvas-a çəkmək və PNG linkini qoymaq:

1. Mətni QR matrisinə çevirmək:

// <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") boş QR obyekti yaradır: 0 — versiyanı (ölçünü) kitabxana özü seçir, M — ~15% xəta düzəltmə.

addData mətni UTF-8 bayt kimi əlavə edir, make() isə tam modul matrisini qurur.

modules — bir tərəfdəki kvadrat sayıdır, məsələn qısa link üçün 25. Hələ ekranda heç nə yoxdur, yalnız qara/ağ cədvəl var.

2. Modulun piksel ölçüsü və quiet zone:

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 — kodun ətrafında 4 modul boş kənar. Skaner kodu bu boşluqla tapır.

cell — bir kvadratın neçə piksel olacağıdır: seçilmiş ölçü (məsələn 256 px) modul sayı + kənarlara bölünür.

cell 1-dən kiçikdirsə, kod bu ölçüyə sığmır. Kəsilmiş QR çəkmək əvəzinə istifadəçiyə «böyük ölçü seç» deyilir.

offset kodu canvas-ın ortasına qoyur.

3. Matrisi canvas-a çəkmək:

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);

Əvvəl bütün canvas arxa fon rəngi (bg) ilə doldurulur — bu, ağ kvadrat və quiet zone olur.

İki dövr hər sətir və sütunu gəzir. isDark(r, c) true olanda həmin yerə ön rəngdə (fg) bir kvadrat çəkilir.

Nəticə: ekranda görünən QR kod — üç künc kvadratı və ortadakı nöqtələr.

4. PNG yükləmə linki:

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

toDataURL canvas-dakı şəkli PNG faylına çevirir və onu linkə qoyur.

«Download PNG» basılanda brauzer bu faylı yükləyir. Fayl ekrandakı preview ilə eyni ölçü və rəngdədir, çünki eyni canvas-dan gəlir.

Ümumi yol: mətn → matris → canvas → PNG.

• QR kod pulsuzdur? Bəli. Standart açıqdır, kitabxana MIT lisenziyalıdır.
• İnternet lazımdır? Səhifə və lokal kitabxana bir dəfə yükləndikdən sonra yox.
• Mətn serverə gedir? Xeyr. Kodlama brauzerdə olur, fetch, cookie və analitika yoxdur.
• QR skan olunursa sayt təhlükəsizdir? Xeyr. QR sadəcə mətndir, domeni özün yoxla.
• Tam alət haradadır? nibrascode.com/qr səhifəsində.