トップへ(mam-mam.net/)

WEBサイトで入力した文字列からQRコードのPNG画像を生成

検索:

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>