<html>
<head>
<title>
QRCODE
</title>
<style>
input,
button,
img {
padding: 10px;
}
</style>
</head>
<body>
<p><img id="qrcodeimg"></p>
<p><input type="text" id="text" placeholder="entri text"></p>
<p><button id="generate">GENERATE</button></p>
<p><button id="download">DOWNLOAD</button></p>
</body>
<script>
const img = document.querySelector("#qrcodeimg");
const text = document.querySelector("#text");
const generate = document.querySelector("#generate");
const download = document.querySelector("#download");
generate.addEventListener("click",(e)=>{
const qr = `https://api.qrserver.com/v1/create-qr-code/?data=${text.value}&size=100x100`;
img.setAttribute('src',qr);
img.setAttribute('alt','qrcode-vanilla-js');
img.setAttribute('width', 100)
})
download.addEventListener("click", async (e) => {
const data = img.getAttribute('src');
const get = await fetch(data);
const blob = await get.blob();
const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'qr.jpg';
downloadLink.click();
})
</script>
</html>
No comments:
Post a Comment