[Vue js] QR코드 생성 , 스캔하기

QR코드 생성 라이브러리 vue-qrcode 레퍼런스

https://fengyuanchen.github.io/vue-qrcode/

vue-qrcode

 

QR코드 스캔 라이브러리 vue-qrcode-reader 레퍼런스

https://gruhn.github.io/vue-qrcode-reader/demos/ScanSameQrcodeMoreThanOnce.html

Scan Same QR Code More Than Once | Vue Qrcode Reader

 

---

세팅방법

1. vue create 를 이용하여 프로젝트를 생성한다.

vue create '프로젝트명'

 

 

2. vue의 QR코드 라이브러리 를 설치한다.

// QR코드 생성 라이브러리
$ npm install @chenfengyuan/vue-qrcode vue


// QR코드 스캔 라이브러리

// vue2 사용 시 (vue3에선 사용 x)
npm install vue-qrcode-reader

// vue3 사용 시
npm install vue3-qrcode-reader

 

QR코드 생성

문자열 입력 시 QR코드로 변환 소스

<template>
  <div>
    <div>
      <label>QR코드 생성</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>

 

QR코드 인식

 

예시) Scan Same QR Code More Than Once ( 동일한 QR코드 인식 ) 소스

<template>
  <div>
    <p class="decode-result">Last result: <b>{{ result }}</b></p>
	
    <qrcode-stream :camera="camera" @decode="onDecode" @init="onInit">
      <div v-show="showScanConfirmation" class="scan-confirmation">
        <img :src="$withBase('/checkmark.svg')" alt="Checkmark" width="128px" />
      </div>
    </qrcode-stream>
  </div>
</template>

<script>
// 주의 import 컴포넌트 명이 라이브러리의 컴포넌트 명과  일치해야함
import { QrcodeStream } from '../../../../src'

export default {

  components: { QrcodeStream },

  data () {
    return {
      camera: 'auto',
      result: null,
      showScanConfirmation: false
    }
  },

  methods: {

    async onInit (promise) {
      try {
        await promise
      } catch (e) {
        console.error(e)
      } finally {
        this.showScanConfirmation = this.camera === "off"
      }
    },

    async onDecode (content) {
      this.result = content

      this.pause()
      await this.timeout(500)
      this.unpause()
    },

    unpause () {
      this.camera = 'auto'
    },

    pause () {
      this.camera = 'off'
    },

    timeout (ms) {
      return new Promise(resolve => {
        window.setTimeout(resolve, ms)
      })
    }
  }
}
</script>

<style scoped>
.scan-confirmation {
  position: absolute;
  width: 100%;
  height: 100%;

  background-color: rgba(255, 255, 255, .8);

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
</style>