vue-qr自動生成QRコード+logoピクチャ

3048 ワード

vue-qrは、テキストの内容に基づいてQRコードを生成したり、logoピクチャを追加したり、logoサイズを設定したり、QRコードサイズを設定したり、白の余白を残したり、背景ピクチャ、背景色などを設定したりすることができます.
1.インストール
npm install vue-qr --save

2.使用
<vue-qr :logoSrc="logo" :logoScale="20" :size="270" :text="text" :margin="0" :dotScale="1"></vue-qr>

import vueQr from 'vue-qr'
export default {
  components: {
    vueQr
  },
  data(){
    return {
      text:"{name:'  ',value:'21322'}",
      logo:require('@/assets/login/logo.png'),
  	}
  }
}

3.属性
text:符号化が必要な内容;CorrectLevel:フォールトトレランスレベル0-3;size:QRコードサイズ、縦横一致(外付けを含む);margin:QRコード画像の外付け距離、デフォルト20 px、0に設定する必要がない場合;color Dark:実点の色;color Light:空白領域の色;bgSrc:QRコードを埋め込むバックグラウンドアドレスを準備する;gifBgSrc:QRコードを埋め込むバックグラウンドgif図を準備する、このbgSrcを設定すると失効し、このオプションを設定すると性能に影響し、慎重に設定する置くbackgroundColor:背景色;backgroundDimming:バックグラウンドマップに重ねられた色は、復号が難しい場合に役立ちます.logoSrc:QRコードの中心に埋め込まれたLOGO画像;logoScale:LOGO寸法計算式logoScale*(size-2*margin)、デフォルト0.2、大会復号化に失敗しました.logoMargin:LOGOは周囲の空白の枠を識別し、デフォルトは0です.logoBackgroundColor:LOGO背景色、logoMarginを設定する必要があります;logoCornerRadius:その枠線のフィレット半径を識別し、デフォルトは0です.whiteMargin:trueに設定すると、背景図の外に白い枠が描画されます.dotScale:データ領域点の縮小率、デフォルトは0.35です.AutoColor:背景図の主な色は実点の色、すなわちcolordark、デフォルトtrueとします.binarize:trueの場合、画像は二値化され、しきい値が指定されていない場合はデフォルト値が使用されます.binarizeThreshold:デフォルト128.(04.参照vue-qr公式文書参照https://www.npmjs.com/package/vue-qr