QRコードに画像を埋め込むツール「CuteR」と「qart.js」が画期的だった

最近、デザインされたQRコードを見る機会が多くなりました。QRコードの真ん中にアイコン等が配置してあるものを見たことがある人も多いと思います。LINE等でQRコードを生成すると、真ん中にアイコンが表示されますね。

今回は、高度にQRコードに画像を埋め込んで生成できるツールを発見したので、紹介します。

なお、こちらで検証はしていませんが、アイコンを中心に配置するだけのQRコードに比べ、画像や読み取り端末によっては読み取り成功率が低下する可能性がありますので、実際に使う際には十分検証の上、ご利用ください。

「CuteR」とは

CuteRは、Python製の画像を埋め込んだQRコードを生成できるコマンドラインツールです。

以下のような画像から、

モノクロなら以下のようなQRコードを生成でき、

カラーなら以下のようなQRコードを生成できます。

使用するにはPythonが動作する必要があります。また、pipコマンドが導入されている必要があります。インストールされていない場合は、インストールしてください。

インストール方法

以下のようにpipコマンドでインストールできます。

pip install CuteR

後は、CuteRコマンドを叩いて、画像を生成するだけです。

使用方法

基本的な使用方法は、以下のとおりです。

usage: CuteR [-h] [-o OUTPUT] [-v VERSION] [-e {Q,H,M,L}] [-b BRIGHTNESS]
             [-c CONTRAST] [-C] [-r R G B]
             image text

# モノクロ
CuteR -o sample_output.png sample_input.png http://www.example.com

# カラー
CuteR -C -o sample_output.png sample_input.png http://www.example.com

# QRコードを黒から紫へ変更
CuteR -C -r 100 50 100 -o sample_output.png sample_input.png http://www.example.com

これで、sample_output.pngが、sample_input.pngの画像が埋め込まれたQRコードとなり、それをQRコードリーダーで読み込むとhttp://www.example.comという文字列が読み込めます。

CuteRのJavaScript版「qart.js」

CuteRにインスパイアされたプロジェクトで、JavaScript版のqart.jsも紹介します。

こちらは、先ほどのようなQRコード生成が、ブラウザで実行できるようにしたライブラリです。

こちらは、npmコマンドでインストールします。

npm install qartjs

そして、以下のようにブラウザで利用します。

<script src="../dist/qart.min.js"></script>
<script>
    new QArt({
        value: value,
        imagePath: './example.png',
        filter: filter
    }).make(document.getElementById('qart'));
</script>

ES6で記述する場合は、以下のようにします。

import QArt from 'qartjs';
const qart = new QArt({
    value: value,
    imagePath: './example.png',
    filter: filter
});
qart.make(document.getElementById('qart'));

こちらにデモサイトがあります。ブラウザで実際に動作確認ができます。

まとめ

QRコードは今現在色々な場所で使われており、例えば名刺なんかに記載する場合には、デザインを少し変えるだけで印象が違ったりします。

QRコードに個性を出して、自分をアピールしてみてはいかがでしょうか。