jquery.qrcode.jsを使ってQRコードのPNG画像を作成する
使用したライブラリとソースコード
jqueryのダウンロード
既にファイルを持っている場合は必要ありません。
https://jquery.com/download/
を開き、[Download the compressed, production jQuery x.x.x]を右クリックして
「名前をつけてリンク先を保存」を左クリックします。
保存先フォルダを設定して「保存」ボタンをクリックするとダウンロードできます。
jquery.qrcode.jsのダウンロード
https://github.com/jeromeetienne/jquery-qrcode
を開き、右上の[Code]ボタンをクリックし、[Download Zip]をクリックすると、
jquery-qrcode-master.zipファイルがダウンロードされます。
解凍したフォルダ内にある「jquery.qrcode.min.js」ファイルを使用します。
ソースコード
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <script src="jquery-3.3.1.min.js"></script> <script src="jquery.qrcode.min.js"></script> <script> function create_qr(){ $('#qrcode').empty(); $('#qrcode').qrcode({ width: 128, height: 128, text: $("#txt").val() }); } </script> </head> <body> <h3></h3> <label for="txt">QRコードにするテキストを入力</label> <input type="text" id="txt" /><br> <input type="button" value="QRコードの生成" onclick="create_qr()"> <div id="qrcode"></div> </body> </html>