HTML, CSS ve JavaScript ile QR kod üreteci: ders

QR kod, metni siyah-beyaz kareler («modüller») ızgarasında tutan iki boyutlu barkoddur. Köşelerdeki üç büyük kare tarayıcının kodu bulmasına ve döndürmesine yardım eder. Kalan ızgara veriyi ve yedeğini taşır. QR yalnız metin tutar. Telefon metni okur ve URL’ye benziyorsa açmayı önerir. Bu yüzden QR her yere — güvenli ya da zararlı — götürebilir.

Bu ders kütüphane, canvas ve dosya indirmeyi tek küçük projede birleştirir.

• Site linkini baskı için QR’a çevirmek
• Metni çevrimdışı QR’a koymak
• Hazır kütüphaneyi projeye eklemeyi öğrenmek
• canvas.toDataURL ile PNG indirmek

Proje dört dosyadır: index.html, style.css, script.js ve lib/qrcode-generator.js (Kazuhiko Arase, MIT, v1.4.4). HTML önce kütüphaneyi, sonra script.js’i yükler. Form gönderilince kod metni kontrol eder, qrcode(0, 'M') ile modül matrisini kurar ve canvas’a çizer. Boyut 128–512 px arasında seçilir, renkler <input type="color"> ile gelir. Aynı ön ve arka renk kabul edilmez, çünkü taranamaz. İndirme düğmesinin href’i canvas.toDataURL('image/png') olur, bu yüzden PNG ekrandakiyle aynıdır. Kütüphane yerel dosyaysa araç çevrimdışı da çalışır. Çok türlü tam QR aracı için /qr sayfasına bak.

QR’ı sıfırdan kodlamak zordur: sürüm seçimi, bloklar, Reed–Solomon hata düzeltme ve maske. Bu yüzden hazır kütüphane kullanılır. M seviyesi yaklaşık %15 hasara dayanır ama kötü kontrastı ve kesilmiş sessiz bölgeyi düzeltmez. Çok uzun metin çok modül ister: 128 px’de her modüle bir pikselden az düşerse kod çizilmez ve daha büyük boyut istenir. Aşırı metinde kütüphane «code length overflow» atar, kod bunu yakalayıp açık mesaj gösterir.

Avantaj: build yok, sunucu yok, metin hiçbir yere gitmez, çevrimdışı çalışır. Sınır: taranan QR güvenli demek değildir. Bilinmeyen QR’ı kontrol edilmemiş link gibi gör ve açmadan önce alan adını oku.

Kodun dayandığı temel kavramlar:

• qrcode(0, 'M'): 0 = sürümü kendi seçer, M = ~%15 hata düzeltme
• isDark(row, col): bu modül koyu mu?
• Sessiz bölge: kenarda 4 modül boşluk
• canvas.toDataURL('image/png') ile indirme

Kütüphaneyi çağırmak, canvas’a çizmek ve PNG linkini koymak:

1. Metni QR matrisine çevirmek:

// <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ş bir QR nesnesi oluşturur: 0, sürümü (boyutu) kütüphanenin seçmesi; M, ~%15 hata düzeltme demektir.

addData metni UTF-8 bayt olarak ekler, make() tam modül matrisini kurar.

modules bir kenardaki kare sayısıdır, örneğin kısa bir link için 25. Ekranda henüz bir şey yok, sadece koyu/açık bir tablo var.

2. Modülün piksel boyutu ve sessiz bölge:

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 çevresinde 4 modüllük boş kenardır. Tarayıcı kodu bu boşlukla bulur.

cell, bir karenin kaç piksel olacağıdır: seçilen boyut (örneğin 256 px), modül sayısı + kenarlara bölünür.

cell 1'den küçükse kod bu boyuta sığmaz. Kesik bir QR çizmek yerine kullanıcıya «daha büyük boyut seç» denir.

offset kodu canvas'ın ortasına yerleştirir.

3. Matrisi canvas'a çizmek:

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

Önce tüm canvas arka plan rengiyle (bg) doldurulur; bu açık kare ve sessiz bölge olur.

İki döngü her satır ve sütunu gezer. isDark(r, c) true olunca oraya ön renkte (fg) bir kare çizilir.

Sonuç: ekranda görünen QR kod; üç köşe karesi ve aradaki noktalar.

4. PNG indirme linki:

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

toDataURL canvas'taki resmi PNG dosyasına çevirir ve linke koyar.

«Download PNG»'ye basınca tarayıcı bu dosyayı indirir. Dosya önizlemeyle aynı boyut ve renktedir, çünkü aynı canvas'tan gelir.

Tüm yol: metin → matris → canvas → PNG.

• QR kod ücretsiz mi? Evet. Standart açıktır, kütüphane MIT lisanslıdır.
• İnternet gerekir mi? Sayfa ve yerel kütüphane bir kez yüklendikten sonra hayır.
• Metin sunucuya gider mi? Hayır. Kodlama tarayıcıda olur; fetch, çerez ve analitik yok.
• QR taranıyorsa site güvenli mi? Hayır. QR sadece metindir, alan adını kendin kontrol et.
• Tam araç nerede? nibrascode.com/qr sayfasında.