URLからQRコード生成してみます。ちょっと斜めの使い方もOK。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>QRコード生成</title>
<script
src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js">
</script>
<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;
}
</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>
<script>
/* QRコード生成 */
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);
console.log('QRコード生成に成功しました!');
});
} else {
alert("URLを入力してください。");
}
}
</script>
</center>
</div>
</body>
</html>
<!-- index.html -->
実行したらURLを入力して［生成］ボタンをクリックすれば・・・
QRコードが表示されます。
スマホで撮影すれば該当するサイトに飛びます。
もちろん上の様な遊びも可能です（^o^）
以下はPNG書き出しバージョン
