QRコードを簡単作成、Webページにツール掲載も

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery QR code読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!-- 文字コードライブラリ読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js"></script>

<!-- HTML部 -->
<h3>QRコード作成ツール</h3>

<div class="defaultdiv">
<p>
下のテキストボックスにQRコード化したい文字を入れて、作成ボタンを押してください。
<p>
  <input type="text" id="txtqr" name="txtqr" style="width:90%">
</p>
  <p><span>ＱＲ色：</span><input type="color" id="txtcolor" name="txtcolor" value="#000000"></p>
  <p><span>背景色：</span><input type="color" id="txtbgcolor" name="txtbgcolor" value="#ffffff"></p>
  
  <p><span>サイズ：</span><input type="range" id="txtsize" name="txtsize" min="100" max="600" value="150"><span id="lblsize">150</span>px</p>
<p>
<button id="btnmake" style="width:45%">作成</button>
<button id="btnclear" style="width:45%">クリア</button>
</p>
</div>
<hr>
<div><p>作成した文字列</p><p><span id="qrtxt"></span></p></div>
<hr>
<div id="qrcodearea"></div>
<hr>

<!-- スクリプト部 -->
<script>
jQuery(function($){ 
  $('#txtsize').on('input',function(){
    $('#lblsize').html($('#txtsize').val());
  });
  
  $('#btnmake').click(function() {
    var strqrorg = $('#txtqr').val();
    var strqrsjis = Encoding.convert(strqrorg, 'SJIS');
    var strcolor = $('#txtcolor').val();
    var strbgcolor = $('#txtbgcolor').val();
    var strsize = $('#txtsize').val();

    $('#qrcodearea').html('');
    $('#qrcodearea').qrcode({width: strsize, height: strsize, text: strqrsjis, foreground: strcolor, background: strbgcolor});
  
    $('#qrtxt').text(strqrorg);
  })
  $('#btnclear').click(function() {
    $('#txtqr').val("");
    $('#txtbgcolor').val('#ffffff');
    $('#txtcolor').val('#000000');
    $('#txtsize').val(150);
    $('#lblsize').html(150);
  })
})
</script>

下のテキストボックスにQRコード化したい文字を入れて、作成ボタンを押してください。

ＱＲ色：

背景色：

サイズ：150px

作成クリア