前回の「URLからQRコード生成」に「PNG書き出し」を加えてみました。
Let's start JavaScript 39 URLからQRコード生成 2024/09/26
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>QRコード生成とPNG書き出し</title>
<script src=
"https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js">
</script>
<!-- A free CDN for open source projects
https://www.jsdelivr.com/ -->
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background-color: gray;
}
.mainbox {
height: 450px;
width: 400px;
background-color: white;
}
.button_size {
width: 50px;
margin: 8px;
padding: 0px;
box-sizing: border-box;
border: 1px solid #68779a;
background: lightgray;
cursor: pointer;
}
.button_size2 {
width: 180px;
margin: 8px;
padding: 0px;
box-sizing: border-box;
border: 1px solid #68779a;
background: lightgray;
cursor: pointer;
}
</style>
</head>
<body>
<div class="mainbox">
<center>
<br><h2>QRコード生成</h2>
<label for="url">URLを入力してください</label><br>
<input type="text" size="40" id="url" placeholder=""><br>
<button onclick="generateQRCode()"
class="button_size">生 成</button>
<br><br>
<canvas id="qrCodeCanvas"></canvas>
<br>
<button id="downloadBtn" class="button_size2"
style="display:none;"
onclick="downloadQRCode()">PNGとしてダウンロード</button>
<script>
function generateQRCode() {
const url = document.getElementById("url").value;
const canvas = document.getElementById("qrCodeCanvas");
if (url) {
QRCode.toCanvas(canvas, url, function (error) {
if (error) {
console.error(error);
} else {
console.log('QRコード生成に成功しました!');
document.getElementById("downloadBtn")
.style.display = 'block';
}
});
} else {
alert("URLを入力してください。");
}
}
function downloadQRCode() {
const canvas = document.getElementById("qrCodeCanvas");
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'qr_code.png';
link.click();
/* ダウンロードフォルダーへ qr_code.png として保存 */
}
</script>
</body>
</html>
<!-- index.html -->
実行したらURLを入力して［生成］ボタンをクリックすれば・・・
