実現したいこと
HTMLとJavaScriptで、指定された文字列のQRコードを生成し、表示して、ダウンロードが押されたらSVGとしてダウンロードするアプリを作りたい。
発生している問題
上記のアプリを作ってみたのですが、SVGの生成方法がわかりませんでした。さらに、今の状態では保存もされませんでした。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>QRコードSVG生成アプリ</title> 7 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script> 8 <script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script> 9</head> 10<body> 11 <p style="font-size: 32px;">QRコードSVG生成アプリ</p> 12 <input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://"> 13 <button onclick="generateQR()">QRコード生成</button> 14 <div id="qrcode"></div> 15 <a id="downloadLink" style="display: none;">QRコードをダウンロード</a> 16 <script> 17function generateQR() { 18 var inputText = $("#inputText").val(); 19 20 // QRコードを生成 21 $("#qrcode").empty().qrcode({ 22 text: inputText, 23 render: 'svg', // SVG形式のQRコードを生成 24 fill: '#000', 25 background: '#fff', 26 size: 256 27 }); 28 29 // ダウンロードリンクの表示 30 var svgString = $("#qrcode svg")[0].outerHTML; 31 var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成 32 var downloadLink = document.getElementById("downloadLink"); 33 downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString); 34 downloadLink.download = fileName; 35 downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定 36 downloadLink.style.display = "inline"; // displayをinlineに変更 37} 38 39function generateRandomString() { 40 return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成 41} 42</script> 43</body> 44</html>
0 コメント