<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<input type="text" id="qrText" placeholder="Enter text to encode" />
<button onclick="generateQRCode()">Generate & Download QR</button>
<div id="qrcode"></div>
<script>
function generateQRCode() {
const qrText = document.getElementById("qrText").value;
const qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = ""; // Clear previous QR
const qr = new QRCode(qrcodeContainer, {
text: qrText,
width: 256,
height: 256,
correctLevel: QRCode.CorrectLevel.H
});
// Wait for QR to render, then convert to image and download
setTimeout(() => {
const img = qrcodeContainer.querySelector("img") || qrcodeContainer.querySelector("canvas");
if (img) {
const dataUrl = img.src || img.toDataURL();
const link = document.createElement("a");
link.href = dataUrl;
link.download = "qr-code.png";
link.click();
}
}, 500); // Give it a moment to render
}
</script>
</body>
</html>