Giriş

Günümüz dijital dünyasında hızlı ve temassız bilgi aktarımının en popüler yollarından biri QR (Quick Response - Hızlı Yanıt) kodlarıdır. Web uygulamalarında, restoran menülerinde, e-ticaret ödeme sistemlerinde ve biletleme platformlarında QR kod kullanımı her geçen gün artmaktadır. Web geliştiricileri için dinamik olarak QR kod üretmek, kullanıcı deneyimini doğrudan artıran kritik bir yetenektir. Bu rehberde, modern web standartlarına uygun olarak Javascript ile qr kod nasıl yapılır sorusunun yanıtını tüm detaylarıyla inceleyeceğiz.

Bu makale, temel düzeyde HTML, CSS ve JavaScript bilgisine sahip olan ve projelerine dinamik QR kod oluşturma özelliği eklemek isteyen tüm yazılımcılar için hazırlanmıştır. Rehber boyunca, tarayıcı tarafında (client-side) çalışan kütüphanelerden modern paket yöneticileriyle (npm) entegre çalışan yapılara kadar geniş bir yelpazeyi ele alacağız. Adım adım ilerleyen uygulamalı örneklerimiz sayesinde, sıfırdan başlayarak tamamen özelleştirilmiş ve indirilebilir QR kod üreteçleri tasarlamayı öğreneceksiniz.

Eğitim boyunca kullanacağımız yöntemler, 2026 yılının modern web standartlarına, performans optimizasyonlarına ve güvenlik protokollerine tamamen uyumludur. Hazırsanız, geliştirme ortamımızı hazırlayarak ilk adımımızı atalım.

Gereksinimler ve Ön Hazırlık

JavaScript ile QR kod oluşturma işlemlerine başlamadan önce, projemizin sorunsuz çalışması için ihtiyaç duyacağımız araçları ve temel yapı taşlarını belirlememiz gerekir. Tarayıcı tabanlı bir uygulama geliştireceğimiz için karmaşık sunucu kurulumlarına ihtiyacımız yoktur. Geliştirme sürecinde aşağıdaki bileşenlerin hazır bulunması yeterlidir:

• Modern Bir Web Tarayıcısı: Google Chrome, Mozilla Firefox, Microsoft Edge veya Safari gibi güncel HTML5 ve ES6+ standartlarını destekleyen bir tarayıcı.
• Kod Editörü: Visual Studio Code, Sublime Text veya WebStorm gibi JavaScript sözdizimi vurgulaması yapabilen bir editör.
• Temal HTML/CSS ve JS Bilgisi: DOM (Document Object Model - Belge Nesnesi Modeli) manipülasyonu, olay dinleyicileri (event listeners) ve temel asenkron programlama kavramlarına aşinalık.
• İnternet Bağlantısı: Gerekli harici kütüphaneleri CDN (Content Delivery Network - İçerik Dağıtım Ağı) üzerinden projemize dahil edebilmek için aktif bir bağlantı.

QR kod oluşturma işlemi, matematiksel olarak karmaşık bir veri kodlama algoritması gerektirir. Bu algoritmayı sıfırdan yazmak yerine, topluluk tarafından kabul görmüş, güvenliği ve performansı test edilmiş açık kaynaklı JavaScript kütüphanelerini kullanacağız. Bu yaklaşım hem geliştirme süresini kısaltır hem de hata payını en aza indirir.

JavaScript ile QR Kod Oluşturma Yöntemleri

Web projelerinde JavaScript kullanarak QR kod üretmenin iki temel yolu vardır: İstemci tarafında (Client-side) tarayıcı motorunu kullanmak veya sunucu tarafında (Server-side) Node.js yardımıyla görsel oluşturup istemciye göndermek. Biz bu rehberde, kullanıcı deneyimini en üst düzeyde tutan ve sunucuya ek yük getirmeyen istemci tarafı çözümlere odaklanacağız.

İstemci tarafında en popüler ve kararlı çalışan iki kütüphane mevcuttur: Klasik projeler için hafif yapısıyla öne çıkan qrcode.js ve modern modüler yapılar (Vite, Webpack, React vb.) için geliştirilmiş olan qrcode npm paketi. Her iki yöntemi de adım adım inceleyerek projelerinize nasıl entegre edeceğinizi göreceğiz.

Adım Adım Popüler Kütüphane (qrcode.js) ile QR Kod Nasıl Yapılır?

İlk yöntemimizde, kurulumu son derece kolay olan ve herhangi bir derleme (build) işlemi gerektirmeyen qrcode.js kütüphanesini kullanacağız. Bu yöntem, özellikle hızlı prototipleme ve geleneksel çok sayfalı web siteleri için idealdir.

HTML Yapısını Hazırlama

QR kodun tarayıcıda görüntülenebilmesi için öncelikle bir HTML iskeletine ihtiyacımız var. QR kodun yerleşeceği bir hedef element (div) ve kütüphaneyi projemize dahil edeceğimiz script etiketlerini tanımlamalıyız. Aşağıdaki kod bloğu, projemizin temel HTML yapısını oluşturmaktadır.

    
    
    JavaScript QR Kod Uygulaması
    
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f9;
            margin: 0;
        }
        #qr-container {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    



    
Dinamik QR Kod Üretici
    


    
    
    

Yukarıdaki HTML kodunda, QR kodun çizileceği alan olarak id="qr-container" değerine sahip bir div elementi oluşturduk. Ayrıca, kütüphaneyi CDNJS üzerinden güvenli bir şekilde projemize çektik ve kendi yazacağımız mantıksal kodlar için app.js dosyasını bağladık.

Kütüphaneyi Dahil Etme ve İlk QR Kodu Üretme

Şimdi, app.js dosyamızı oluşturarak kütüphaneyi harekete geçirelim. Kütüphane, küresel kapsama (global scope) QRCode adında bir sınıf (class) ekler. Bu sınıfı başlatarak (instantiate) ilk QR kodumuzu anında oluşturabiliriz.

// app.js dosyası içeriği

// QR kodun yerleştirileceği DOM elementini seçiyoruz
const qrContainer = document.getElementById('qr-container');

// QRCode sınıfından yeni bir nesne türetiyoruz
const qrCode = new QRCode(qrContainer, {
    text: "https://yazilim-egitimi-ornek.com", // Kodlanacak veri
    width: 256,                               // Genişlik (piksel)
    height: 256,                              // Yükseklik (piksel)
    colorDark : "#000000",                    // QR kodun koyu renkli kısımları
    colorLight : "#ffffff",                   // QR kodun arka plan rengi
    correctLevel : QRCode.CorrectLevel.H      // Hata düzeltme seviyesi (High)
});

Bu JavaScript kodu çalıştırıldığında, kütüphane belirtilen hedef div elementinin içerisine dinamik olarak bir HTML5 canvas veya img elementi ekler. Parametreler arasında yer alan correctLevel, QR kodun üzerine bir logo eklendiğinde veya kod fiziksel olarak zarar gördüğünde bile okunabilir kalmasını sağlayan hata düzeltme seviyesini (Error Correction Level) belirler. "H" seviyesi, %30'a kadar olan veri kayıplarını telafi edebilir.

Modern JavaScript (ES6+) ve qrcode npm Paketi Kullanımı

Eğer projenizde React, Vue, Angular veya saf ESM (ES Modules) mimarisi kullanıyorsanız, global script dosyaları yerine modern paket yöneticilerini tercih etmelisiniz. Bu adımda, modern projelerde sıklıkla tercih edilen qrcode npm paketinin tarayıcı uyumlu kullanımını inceleyeceğiz.

Node.js ve ESM Ortamında Kurulum

Öncelikle projenizin kurulu olduğu dizinde terminali açarak aşağıdaki komutla gerekli paketi yükleyin:

npm install qrcode

Yükleme tamamlandıktan sonra, modül sistemini destekleyen JavaScript dosyanızda bu paketi içe aktarabilirsiniz. Modern bundler (paketleyiciler - Vite, Webpack vb.) bu yapıyı otomatik olarak tarayıcının anlayacağı dile çevirecektir.

Canvas Üzerine QR Kod Çizdirme

Modern qrcode paketi, Promise tabanlı bir yapı sunar. Bu sayede asenkron (async/await) programlama desenlerini kullanarak daha temiz ve okunabilir kodlar yazabiliriz. Aşağıdaki örnekte, HTML5 elementi üzerine asenkron olarak nasıl QR kod çizdirileceğini göreceğiz.

// Modern JavaScript Modülü (main.js)
import QRCode from 'qrcode';

// HTML tarafında bir  olduğunu varsayıyoruz
const canvas = document.getElementById('my-canvas');
const veri = 'https://modern-javascript-rehberi.com';

// Asenkron fonksiyon ile QR kod çizimi
async function qrKodUret(hedefCanvas, icerik) {
    try {
        await QRCode.toCanvas(hedefCanvas, icerik, {
            width: 300,
            margin: 2,
            color: {
                dark: '#1e293b',  // Koyu lacivert tonu
                light: '#f8fafc'  // Açık gri/beyaz tonu
            }
        });
        console.log('QR Kod başarıyla canvas üzerine çizildi.');
    } catch (hata) {
        console.error('QR Kod oluşturulurken bir hata meydana geldi:', hata);
    }
}

// Fonksiyonu çalıştırıyoruz
qrKodUret(canvas, veri);

Bu yaklaşım, hata yönetimini (error handling) try-catch blokları ile yapmamıza olanak tanır. Özellikle ağ gecikmeleri veya beklenmeyen veri formatları söz konusu olduğunda, uygulamanın çökmesini engellemek adına bu yöntem son derece güvenlidir.

Dinamik Veri ve Kullanıcı Girdisi ile QR Kod Oluşturma

Statik QR kodlar yerine, kullanıcının form alanlarına girdiği verilere göre anlık olarak güncellenen dinamik QR kodlar oluşturmak çok daha işlevseldir. Örneğin, bir kullanıcı kendi web sitesi adresini yazarken QR kodun eşzamanlı olarak değişmesini sağlayabiliriz.

Input Değerine Göre Anlık QR Kod Güncelleme

Aşağıdaki örnekte, bir metin giriş alanı (input) ve bir buton yer almaktadır. Kullanıcı metin yazdıkça veya butona tıkladıkça mevcut QR kod temizlenip yenisiyle değiştirilecektir.

    
    QR Kod Üret




    // JavaScript Bölümü
    const inputField = document.getElementById('user-input');
    const generateButton = document.getElementById('generate-btn');
    const qrDiv = document.getElementById('dynamic-qr');

    // İlk başta boş bir QR nesnesi tanımlıyoruz
    let dynamicQR = null;

    function guncelleQR() {
        const metin = inputField.value.trim();
        
        if (metin === "") {
            alert("Lütfen geçerli bir metin girin!");
            return;
        }

        // Eski QR kodu temizliyoruz
        qrDiv.innerHTML = "";

        // Yeni QR kodu oluşturuyoruz
        dynamicQR = new QRCode(qrDiv, {
            text: metin,
            width: 200,
            height: 200,
            colorDark: "#2c3e50",
            colorLight: "#ffffff"
        });
    }

    // Butona tıklama olayı ekleme
    generateButton.addEventListener('click', guncelleQR);

    // Enter tuşuna basıldığında da tetiklenmesi için olay ekleme
    inputField.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            guncelleQR();
        }
    });

Bu kod yapısında, her yeni üretim öncesinde qrDiv.innerHTML = "" satırı ile bir önceki QR kodun DOM üzerindeki kalıntılarını temizliyoruz. Bu işlem, bellek sızıntılarını (memory leak) önlemek ve arayüzün üst üste binmesini engellemek için kritik öneme sahiptir.

QR Kod Tasarımını Özelleştirme (Renk, Boyut ve Hata Düzeltme Seviyesi)

Standart siyah-beyaz QR kodlar işlevsel olsa da, marka kimliğine uygun renkler ve tasarımlar kullanmak kullanıcı etkileşimini artırır. QR kod standartlarında tanımlı olan dört adet hata düzeltme seviyesi (Error Correction Level - ECL) vardır. Bunlar:

• Level L (Low): %7 oranında veri kurtarma kapasitesi sunar. En az yoğunluğa sahip QR kodları üretir.
• Level M (Medium): %15 oranında veri kurtarma kapasitesi sunar. Genel kullanım için standarttır.
• Level Q (Quartile): %25 oranında veri kurtarma kapasitesi sunar. Orta derecede kirli veya yıpranabilecek ortamlar içindir.
• Level H (High): %30 oranında veri kurtarma kapasitesi sunar. Üzerine logo yerleştirilecek tasarımlar için zorunludur.

Renkli ve Yüksek Çözünürlüklü QR Kod Örnek Kodu

Aşağıdaki kod bloğunda, hata düzeltme seviyesini en üst düzeye çıkararak, marka renklerimize uygun (örneğin kurumsal bir mavi tonu) ve yüksek çözünürlüklü bir QR kodun nasıl oluşturulacağını göreceğiz.

// Özelleştirilmiş QR Kod Tasarımı
const customQrContainer = document.getElementById('custom-qr');

const customQR = new QRCode(customQrContainer, {
    text: "https://kurumsal-markamiz.com",
    width: 400, // Daha yüksek çözünürlük için boyut artırıldı
    height: 400,
    colorDark : "#0f172a", // Koyu lacivert gövde rengi
    colorLight : "#f0fdf4", // Çok açık yeşil/beyaz arka plan rengi
    correctLevel : QRCode.CorrectLevel.H // En yüksek hata toleransı
});

Boyutu 400x400 piksel gibi yüksek değerlere ayarlamak, QR kodun basılı materyallerde (broşür, afiş vb.) kullanılması durumunda piksellenme (bulanıklaşma) sorununu ortadan kaldırır. Yüksek hata toleransı (Level H) sayesinde, kodun ortasına CSS yardımıyla mutlak konumlandırılmış (absolute positioned) küçük bir logo yerleştirseniz dahi tarayıcılar kodu başarıyla okumaya devam edecektir.

QR Kod İndirme ve Paylaşma Özellikleri Ekleme

Kullanıcıların web sitenizde ürettikleri QR kodları bilgisayarlarına veya mobil cihazlarına kaydetmelerine olanak tanımak, kullanıcı deneyimini mükemmelle