JavaScriptでQRコードを生成したいです。

▼ ただ生成するだけではなく…

• 中央に画像とか埋め込みたい
• 背景色とかカスタマイズしたい
• お洒落なQRコードつくりたい

こういう願いを全て叶えることができます。

その名も QR Code Styling というライブラリ

使い方は簡単だし高機能だし、
なによりQRコードに画像埋め込みできます。

ただし生成時の注意点なども発見しました。

そこでJavaScriptでQRコード生成のコツを解説します。

１．初めにライブラリ本体を読込しておく

こちらのライブラリです。

▼ kozakdenys / qr-code-styling

GitHub

 

17 Pockets

GitHub - kozakdenys/qr-code-styling: Automaticly generate your styled QR code...

https://github.com/kozakdenys/qr-code-styling

Automaticly generate your styled QR code in your web app. - GitHub - kozakdenys/qr-code-styling: Automaticly generate your styled QR code in your web app.

▼ CDN経由でフッターあたりで読み込み

※ MITライセンスなので安心

あるいはnpmでのインストールにも対応してます。

また他ライブラリに依存してることもありません。

２．QRコード生成用のdiv要素を作成

そしたらQRコード生成用に要素作成します。

▼ 作成したdiv要素の例

要素idはどんな名前でもOKです。

ここでは #qrCode  というIDにしました。

３．QRコードに埋め込む画像を用意する

埋め込める画像に制限はありません。

• どんな大きさの画像でも問題なし
• 透過色も含められて反映される

ここではこんな画像を用意しました。

▼ QRコードに埋め込む画像例

透過色が含まれています。

このような透過色が含まれている場合、QRコードの背景色に対して透過されるようにＱＲコードが生成されます。透過度が無視されることもありません。

ちなみに余白はコード的にも調整できますが、おかしな表示（後述）になることがあります。だから画像側にマージンを含める方がグッドです。

とりあえず好きな画像を用意すればＯＫ

４．QRコードを生成するコードを実行

それではいよいよQRコードを生成してみます。

▼ QRコード生成のコード例

上記のようにQRCodeStylingでQRコード生成です。

▼ コンストラクタの主要オプションは以下の通り

• type
  レンダリングされる要素の種類。値としては 'canvas'  あるいは 'svg'  のどちらかを選べる。ここではSVGとして描画する
• data
  QRコードを読み取りしたときに開かれるURLを指定。IEにならいURLの最大長は2083文字までが事実上の標準になっている（豆知識）
• image
  埋め込みしたい画像パス。画像の大きさには制限はないし、透過色も含めてもしっかり反映される。データURLも指定可能（詳細 : Data URLスキームとは何か？便利な理由と注意点）
• qrOptions
  QRコードの生成オプション。誤り訂正レベルはerrorCorrectionLevelオプションから 'L' 'M' 'Q' 'H'  のどれかを指定可能。Lが一番訂正レベルが低い
• dotsOptions
  QRコードのドット１つ１つのスタイルオプション。色変更はcolorオプション、スタイルはstyleオプションから 'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'  のどれかを指定
• cornersSquareOptions
  QRコードの四隅のでっかい四角枠のオプション。色変更はcolorオプション、スタイルはstyleオプションから 'dot' 'square' 'extra-rounded'  のどれかを指定。
• cornersDotOptionsHelper
  QRコードの四隅のでっかい四角形（ファインダパターン）のオプション。色変更はcolorオプション、スタイルはstyleオプションから 'dot' 'square'  のどれかを指定
• backgroundOptions
  背景色のオプション。色変更はcolorオプションから。なんとgradientオプションからグラデーションも指定できるらしい…

押さえておくべきオプションはこれだけ。

ただ画像埋め込みできるだけかと思いきや、ドットとかファインダパターンの色・スタイルも細かく指定できるみたいです。本当に便利

そして適当にQRコード生成しました。

▼ こんなQRコードが簡単に作れた

QRコードリーダーから読み取りも成功！

たったの十数行のコードで生成できました。

色々なスタイルのQRコードを作ってみた

面白いので色々なQRコードを生成してみました。

▼ スタイル Extra rounded のQRコード

▼ 白黒反転させたQRコード

色々できて面白いです。

ユニークなQRコードを作れるのが楽しい。

画像余白をコード的に指定する注意点

最後に埋め込む画像のマージン余白について。

これはコード的にもオプションが用意されてます。

でもそのオプションは使わない方が無難です。

▼ 例えばマージン20を指定するコード例

マージン20pxくらいで丁度いいかな？

そう考えてできあがったQRコードがこちらです。

▼ 埋め込み画像がほぼ見えない(困)

マージンは元画像基準ではなく、生成先のQRコードベースに設定されます。だから20px(?)とか指定すると画像が見えなくなります。

だから画像側でマージンを作っておくといいですね。

コード的に余白調整するのは良くありません。

以上、JSでの画像入りQRコード生成でした、ではまた