生成帶有logo的二維碼

關鍵詞

vue iview vue-qr

完整源碼

點擊進入github倉庫

<template>
  <div id="qrcode">
    <div>
      <p>二維碼大小</p>
      <Input v-model="qrSize" type="textarea" :rows="1" placeholder="二維碼大小,默認200" />
    </div>
    <div>
      <p>二維碼內容</p>
      <Input v-model="content" type="textarea" :rows="5" placeholder="二維碼內容" />
    </div>
    <div>
      <!--colorDark="#f67b29"-->
      <!--保存圖片按鈕-->
      <vue-qr
      :logoCornerRadius="0.1"
      :logoSrc="imagePath"
      :logoScale="0.2"
      :text="content"
      colorDark="#000"
      colorLight="#fff"
      :size="qrSize"
      :margin="0"
      :whiteMargin="true"
      :dotScale="1"></vue-qr>
      <p class="">二維碼</p>
      <!--保存圖片按鈕-->
    </div>
    <div>
      <Button type="success" @click="downloadImg">保存圖片</Button>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  data () {
    return {
      content: '請輸入二維碼內容',
      qrSize: '200',
      imgName: '',
      visible: false,
      logoFile: '',
      value: 'www.baidu.com',
      imagePath: require('../assets/logo.png')
    }
  },
  created () {},
  components: {
    VueQr
  },
  methods: {
    downloadImg () {
      var oQrcode = document.querySelector('#qrcode img')
      var url = oQrcode.src
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = '二維碼'
      a.href = url
      a.dispatchEvent(event)
    }
  }
}
</script>

界面如下