勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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部分を変更すること。

 - JavaScript

  関連記事

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法

先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...

円形のプログレスバーをprogressbar.jsで実装する方法

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...