Vanilla JavaScript ile QR kod generator

Chrome gibi modern tarayıcılarda QR kod oluşturulabiliyor, ziyaret edilen URL’i çoğu tarayıcı ile QR koda çevirerek paylaşmak mümkün. Burada Pure JS/Vanilla JavaScript ile kendi QR oluşturucumuzu yapacağız.

HTML

HTML kodumuz çok basit.

<section class="heading">
    <div class="title">QRcodes</div>
    <div class="sub-title">Generate QRCode for anything!</div>
</section>
<section class="user-input">
    <label for="input_text">Type something...</label>
    <input type="text" name="input_text" id="input_text" autocomplete="off">
    <button class="button" type="submit">Generate QR Code</button>
</section>
<div class="qr-code" style="display: none;"></div>
<script src="./js/app.js"></script>

JavaScript

Öncelikle kullanıcı Generate QR code butona tıkladığında bir event oluşturalım:

let btn = document.querySelector(".button");
btn.addEventListener("click", () =>{
   //code
})

Şimdi, generate() kullanıcı Generate QR code butona tıklandığı anda çağrılacak bir fonksiyon oluşturacağız. Bu işlev, kullanıcıdan gelen metin girişini parametre olarak alacaktır:

function generate(user_input){
    //code
}

Bu fonksiyonun içinde, QR kodu oluşturmak için qrcode.js javascript kitaplığını kullanacağız. Bir CDN üzerinden bu kütüphaneyi kullanabilirsiniz, HTML içerisine eklenecek:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

generate() fonksiyonun içinde verilen kütüphaneyi kullanarak yeni bir nesne oluşturacağız. İki argüman alacak, birincisi QR kodunun görüntülenmesi gereken öğe ve ikincisi, QR kodunun oluşturulması gereken içerik ve QR kodunu özelleştirmek için bazı seçenekler.

function generate(user_input){
    var qrcode = new QRCode(document.querySelector(".qr-code"),{
        text: `${user_input.value}`,
        width: 180, //default 128
        height: 180,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
   });
}

Ardından, bir indirme(download) düğmesi oluşturacağız ve bunu QR kodunun altına ekleyeceğiz.

let download = document.createElement("button");
document.querySelector(".qr-code").appendChild(download);

Bu indirme düğmesinin içine, kullanıcıların belirli bir dosya adıyla QR kodunu indirmelerini ve indirme düğmesine eklemelerini sağlayan bir bağlantı ekleyeceğiz. Şu şekilde buraya indirme özelliği ile ilgili daha fazla bilgi.

let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code_linq.png");
download_link.innerText = "Download";
download.appendChild(download_link);

Bir sonraki <a> etiketin href niteliğini bulalım.

qrcode bir canvas elemanı yanı sıra image elemanı olarak da döner.

Akıllı telefonlar için canvas öğe görünür olacak, ancak masaüstü için image öğe, src özniteliği a dataURL olarak ayarlanmış olarak görünür olacaktır. dataURLQR kodunu indirmek için kullanacağız .

Masaüstü oldukça açık. Biz sadece src değerini kapmak zorundayız, görüntü öğesinin öznitelik ve atamak href indirme bağlantısı (öznıtelığı <a> zaman (0.3 saniye) kullanarak belirli bir süre sonra etiketi) setTimeout()QR kodu oluşturulacak çünkü işlev biraz zaman alır.

let qr_code_img = document.querySelector(".qr-code img");
setTimeout(() =>{
    download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
}, 300);

dataURL tuval(canvas) öğesinden nasıl alırız? canvas üzerindeki toDataURL() öğresini kullanarak.

let qr_code_canvas = document.querySelector("canvas");
setTimeout(() =>{
    download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
}, 300);

Biraz mantık ve sonra şunu elde ederiz:

if(qr_code_img.getAttribute("src") == null){
    setTimeout(() =>{
        download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
   }, 300);
}else{
    setTimeout(() =>{
        download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
   }, 300);
}

Ayrıca .qr-code öğe, kullanıcı Generate QR code düğmeye tıklayana kadar gizli kalacaktır. Bu, generate() fonksiyonumuz çağrılacak şekilde ayarlanmıştır.

function generate(user_input){

    document.querySelector(".qr-code").style = "";

    var qrcode = new QRCode(document.querySelector(".qr-code"),{
        text: `${user_input.value}`,
        width: 180, //128
        height: 180,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
   });

    console.log(qrcode);

    let download = document.createElement("button");
    document.querySelector(".qr-code").appendChild(download);

    let download_link = document.createElement("a");
    download_link.setAttribute("download", "qr_code_linq.png");
    download_link.innerText = "Download";

    download.appendChild(download_link);

    if(document.querySelector(".qr-code img").getAttribute("src") == null){
        setTimeout(() =>{
            download_link.setAttribute("href", `${document.querySelector("canvas").toDataURL()}`);
       }, 300);
   }else{
        setTimeout(() =>{
            download_link.setAttribute("href", `${document.querySelector(".qr-code img").getAttribute("src")}`);
       }, 300);
   }
}

Şimdi tıklama etkinliği fonksiyonumuzun içinde, halihazırda bir QR kodunun görüntülenip görüntülenmediğini kontrol eden bir şey ekleyeceğiz. Eğer öyleyse, önce o QR kodunu temizleyeceğiz ve yeni bir tane oluşturacağız. Mevcut değilse, basitçe yeni bir tane oluşturabiliriz.

Ayrıca, tüm bunlar yalnızca kullanıcı bir metin girerse veya giriş değeri boş değilse gerçekleşir.

btn.addEventListener("click", () =>{
    let user_input = document.querySelector("#input_text");
    if(user_input.value != ""){
        if(document.querySelector(".qr-code").childElementCount == 0){
            generate(user_input);
       }else{
            document.querySelector(".qr-code").innerHTML = "";
            generate(user_input);
       }
   }else{
        document.querySelector(".qr-code").style = "display: none";
        console.log("not valid input");
   }
})

JS kısmı bu kadar şimdi CSS vakti.

CSS

CSS ile uygulamamıza makyaj ve kullanılabilirlik ekleyelim.

:root{
    font-size: 62.5%;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}
button:hover{
    cursor: pointer;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #EAE6E5;
}
.heading{
    margin: 3rem 0 5rem 0;
}
.title, .sub-title{
    font-size: 4rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #12130F;
}
.sub-title{
    font-size: 1.5rem;
    color: #8F8073;
}

.user-input{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.user-input label{
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
}
.user-input input{
    width: 80%;
    max-width: 35rem;
    font-family: 'Poppins', sans-serif;
    outline: none;
    border: none;
    border-radius: 0.5rem;
    background-color: #9b8774ad;
    text-align: center;
    padding: 0.7rem 1rem;
    margin: 1rem 1rem 2rem 1rem;
}
.button{
    outline: none;
    border: none;
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    margin-bottom: 3rem;
    background-color: #5b92799d;
    color: #12130F;
    font-family: 'Poppins', sans-serif;
}

.qr-code{
    border-top: 0.5rem solid #8F8073;
    border-right: 0.5rem solid #8F8073;
    border-bottom: 1rem solid #8F8073;
    border-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-left: 0.5rem solid #8F8073;
    background-color: #8F8073;
}
.qr-code button{
    display: flex;
    justify-content: center;
    background-color: #8F8073;
    font-family: 'Poppins', sans-serif;
    color: #EAE6E5;
    border: none;
    outline: none;
    width: 100%; 
    height: 100%; 
    margin-top: 1rem;
}
.qr-code button a{
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #EAE6E5;
}

Sonuç

Hepsi bu kadar, işte demo:

İlham ve kaynak Murtuzaali Surti.