画像とマージさせたQRコードが作成できるJSライブラリ「qart.js」



アーティスティックなオリジナルQRコードが作成できるJSライブラリ「qart.js」の紹介です。

QRコードはデンソーが開発した2次元バーコードで、
私達の身の回りでは、スマートフォン関連で目にすることが多いと思います。

QRコード関連のライブラリは数多くリリースされていますが、その中でも面白そうなライブラリが「qart.js」です。

* qart.jsのデモページから 

qart.jsはWebブラウザ上でQRコードを生成するJavascriptライブラリで、
指定した画像とQRコードをマージさせて、オリジナルQRコードを生成してくれます。
 

qart.jsのインストール

ライブラリの入手は こちら(GitHubのレポジトリページ) のリンクから入手するか、
コマンドライン上からnpmコマンドを使ってダウンロードします。

# npmでインストールする場合 * node.jsが導入されている必用があります
npm install qartjs --save 

# ブラウザ上で使う場合 '/dist/qart.min.js' を読み込みます

 

qart.jsの使い方

qart.jsは'qrcode-generator'をベースに拡張しされたライブラリで 使い方はとても簡単です。

使い方はザックリ言うとQRコード内の'value'、'マージする画像'、'フィルター' 、'展開するエレメント'を指定する4ステップだけで使用することが出来ます。
( * バージョン: 1.0.2で検証しました )

// qart.jsの使用方法
new QArt({
  value: "QRコード内で表示させるテキスト",
  imagePath: '/path/to/yourimage.jpg',  // png,svgファイルにも対応
  filter: 'color' // 'filter'オプションが無いと白黒のQRコードが作成される
}).make(document.getElementById('qart'));
// make => QRコードを表示させるhtmlエレメント この場合は id='qart'

* 実際に自身の環境でqart.jsを使用してみました

qart.jsは、他ライブラリに見られるような 'QRコードに画像を乗せて生成する' のではなく、
'指定した画像をバックグラウンドにしてから被せる'タイプなので、デバイス側で読み込み辛い心配も少なそうです。

生成されたQRコードは '195×195 の正方形のPNGファイル'として指定した要素に展開されます。

* カラーフィルターを適応して、実際に生成したQRコード 

* QRコードは基本正方形なので、元画像も正方形に収まらないと、押さえつけられたような仕上がりになります

 

Summary

以上がqart.jsの紹介でした。

qart.jsは ' CuteR ' というPython製のコマンドライン上でQRコードと画像をマージするライブラリにインスパイアされて作成されたそうです。

また、今回紹介した物の他に、'react', 'angular', 'vue' 専用のプラグインもリリースされています。

qart.jsは現在ブラウザ上でのレンダリングのみに対応ですが、
今後は 'リサイズ', 'サーバーサイドレンダリング', 'CLIコマンド' にも対応予定だそうです。

キャンペーンサイトや、サイトや会社のロゴマークと組み合わせて使うと、
ユニークなQRコードが作成できそうなライブラリですね。

GitHub : kciter/qart.js

 

この記事のカテゴリ
プログラミング

この記事のタグ