🧾 QR Code Generator
<style>
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-top: 5px;
}
#qrcode {
margin-top: 20px;
text-align: center;
}
canvas, svg {
border-radius: 20px;
}
.slider-group {
display: flex;
align-items: center;
gap: 10px;
}
.slider-group input[type="range"] {
flex: 1;
}
.slider-group input[type="number"] {
width: 60px;
}
</style>
<h2>🧾 QR Code Generator</h2>
<label>Text:</label>
<textarea id="text" rows="4" placeholder="Enter text or URL..."></textarea>
<label>Size (px):</label>
<div class="slider-group">
<input type="range" id="size" min="100" max="600" value="300" oninput="sizeOut.value=this.value">
<input type="number" id="sizeOut" value="300" oninput="size.value=this.value">
</div>
<label>Margin (modules):</label>
<div class="slider-group">
<input type="range" id="margin" min="0" max="20" value="4" oninput="marginOut.value=this.value">
<input type="number" id="marginOut" value="4" oninput="margin.value=this.value">
</div>
<label>Foreground Color:</label>
<input type="color" id="fgColor" value="#000000">
<label>Background Color:</label>
<input type="color" id="bgColor" value="#ffffff">
<label>Logo (optional):</label>
<input type="file" id="logo" accept="image/png, image/svg+xml">
<label>Format:</label>
<select id="format">
<option value="png">PNG</option>
<option value="svg">SVG</option>
</select>
<button class="button" onclick="generateQRCode()">🚀 Create QR Code</button>
<div id="qrcode" class="center"></div>
<div style="text-align: center; margin-top: 10px;">
<button id="downloadBtn" style="display:none;">⬇️ Download</button>
</div>
<!-- QRCode.js library -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<script>
let qr;
function generateQRCode() {
const text = document.getElementById("text").value;
const size = parseInt(document.getElementById("size").value);
const margin = parseInt(document.getElementById("margin").value);
const fgColor = document.getElementById("fgColor").value;
const bgColor = document.getElementById("bgColor").value;
const format = document.getElementById("format").value;
const qrDiv = document.getElementById("qrcode");
qrDiv.innerHTML = "";
qr = new QRCode(qrcode, {
text: text,
width: size,
height: size,
colorDark: fgColor,
colorLight: bgColor,
correctLevel: QRCode.CorrectLevel.H
});
setTimeout(() => {
const fileInput = document.getElementById("logo");
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const logo = new Image();
logo.src = e.target.result;
logo.onload = () => {
const canvas = qrDiv.querySelector("canvas");
const ctx = canvas.getContext("2d");
const imgSize = size * 0.2;
const x = (canvas.width - imgSize) / 2;
const y = (canvas.height - imgSize) / 2;
ctx.save();
ctx.beginPath();
ctx.arc(x + imgSize / 2, y + imgSize / 2, imgSize / 2, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(logo, x, y, imgSize, imgSize);
ctx.restore();
};
};
reader.readAsDataURL(file);
}
document.getElementById("downloadBtn").style.display = "inline-block";
}, 500);
}
document.getElementById("downloadBtn").onclick = function () {
const format = document.getElementById("format").value;
const canvas = document.querySelector("#qrcode canvas");
if (!canvas) return alert("Generate QR first!");
const link = document.createElement("a");
if (format === "png") {
link.href = canvas.toDataURL("image/png");
link.download = "qrcode.png";
} else if (format === "svg") {
alert("SVG export không hỗ trợ trong phiên bản QRCode.js này.\nBạn có thể dùng mã SVG từ thư viện khác.");
return;
}
link.click();
};
</script>
Info!
To receive the code, please leave your email address in the comment section below and I will send the template to you via email as soon as possible.
People don't have to become experts to share. In the process of sharing, they become experts.
Anonymous