JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の外部サービスを経由してQRコードを作成しようかと思ったけど、この方法だと微妙に動作が重かったりする。JavaScriptで生成できないか調べたところ「QRCode.js」ライブラリで実装できる模様。以下に実装方法をメモ。

サンプル

https://taitan916.info/sample/QRCode.js/

上記サンプルページのQRコードを読み込むと「https://taitan916.info/blog/」が返ってくる筈。

QRCode.js

公式サイト

https://davidshimjs.github.io/qrcodejs/

GitHub

https://github.com/davidshimjs/qrcodejs

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

異なるバージョンを使用したい場合は以下から探す。

https://cdnjs.com/libraries/qrcodejs

利用方法

ソースコード

<div id="qrcode"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
const text = 'https://taitan916.info/blog/';
const option = {
    text: text, 
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
};
new QRCode(document.getElementById('qrcode'), option);
</script>

動的にQRコードを作成する場合はtext部分を変更すること。