#概要
JavaScriptで動的にQRコードの生成できたりしないかなと思って調べてみたら、vue-qrcodeというライブラリを発見したので試しに使ってみました。
#デモ
vue-qrcode-test
QRコードに設定したい文字列を入力して生成ボタンを押すとQRコードが表示されます。
GitHubリポジトリはこちら
#解説
##インストール方法
$ npm install @chenfengyuan/vue-qrcode vue
実装
<template>
<div>
<div>
<label>文字列</label>
<input type="text" v-model="inputText">
<input type="button" @click="generate" value="生成">
</div>
<vue-qrcode v-if="targetText" :value="targetText" :options="option" tag="img"></vue-qrcode>
</div>
</template>
<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
components: {
VueQrcode
},
data() {
return {
inputText: "",
targetText: "",
option: {
errorCorrectionLevel: "M",
maskPattern: 0,
margin: 10,
scale: 2,
width: 300,
color: {
dark: "#000000FF",
light: "#FFFFFFFF"
}
}
};
},
methods: {
generate: function() {
this.targetText = this.inputText;
}
}
};
</script>
<style scoped>
</style>
生成タイミング
<template>内に記述したコンポーネント(今回は<vue-qrcode>)のvalueが更新されたタイミングで生成されます。
ただし、valueの中身が空だとライブラリ本体の中で例外が投げられる(動作に問題はありませんが)ので、気になる方は上記のソースのようにコンポーネントにv-ifで表示条件を設定しておく事で、条件に合致しない場合はライブラリのQRコード生成処理が呼ばれないようにできます。
と、いうことで今回の実装では生成ボタン押下時、generateメソッド内でtargetTextを書き換えることでQRコード生成処理を呼び出しています。
Optionについて
QRコードを生成するにあたり、いくつかのオプションを指定できます。
- version
- errorCorrectionLevel
- maskPattern
- toSJISFunc
- margin
- scale
- width
- color.dark
- color.light
version
QRコードのバージョンを指定します。(1～40)
バージョンとは、QRコード内に持たせるデータ量や文字の種類、誤りレベルによって決まるコードのサイズです。
指定しなければvalueに設定された文字列に合わせて自動で決定されます。
errorCorrectionLevel
使用する誤り訂正機能を指定します。(L,M,Q,H)
誤り訂正機能とは、QRコードが多少汚れていてもうまいこと補完して正しい内容を読み取れるようにする機能です。
maskPattern
QRコードのマスクパターンを設定します。(0～7)
マスクパターンとは、QRコードの形を整える(白黒の割合をいい感じにする)ためのマスク処理のパターンの事で、8種類のパターンが存在します。
toSJISFunc
QRコードに保持する文字列に漢字(文字コードSJIS)を含ませたい場合、変換処理を独自の関数で定義できます。
(特に設定しなくても大抵の漢字は正しく使用できるようです。)
margin
QRコードとして表示する画像データの余白を指定します。
scale
QRコードの１セルの大きさを指定します。(pixel)
width
QRコードの画像サイズを指定します。
上述のscaleとwidthが同時に設定された場合、widthの設定が優先されるようです。
color.dark
QRコードのセルの色をRGBAで指定します(#000000FF など)
color.dark
QRコードの背景色をRGBAで指定します(#FFFFFFFF など)
#参考資料