DEV Community

Cover image for How to use QR Code Generator API! With JS!
Mafee7
Mafee7

Posted on

How to use QR Code Generator API! With JS!

QR Code API By: Go QR

See API Docs:

http://goqr.me/api/

API Link

https://api.qrserver.com/v1/create-qr-code/

HTML

<input placeholder="data"> 
<button>Generate QR!</button><br><br>
<img src>
📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025 📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025

Javascript

var parametersJson = {
    "size": 250, // Size of Qr Code
    "backgroundColor": "38-38-38", // Background Color Of Qr Code (In RGB)
    "qrColor": "255-255-255", // Color of Qr Code (In RGB)
    "padding": 2, // Padding 
    "data": "dev.to"
};

var parameters;

var btn = document.querySelector("button");
var img = document.querySelector("img");
var input = document.querySelector("input");

btn.addEventListener("click", function(){
    parametersJson.data = input.value || "dev.to";
    parameters = `size=${parametersJson.size}&bgcolor=${parametersJson.backgroundColor}&color=${parametersJson.qrColor}&qzone=${parametersJson.padding}&data=${parametersJson.data}` // Stitch Together all Paramenters
    img.src = `https://api.qrserver.com/v1/create-qr-code/?${parameters}` // Set Image URL To Link
});
📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025 📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025

See Working Version:

https://jsfiddle.net/qcote16j/

Top comments (2)

📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025
 
somanathgoudar profile image
Somanath Goudar •

Good One!

📢 แจ้งเตือน: mafee/how to use qr code generator api with js kb - Kapook Update 2025
 
saidi_ks profile image
Williams.N •

nice one