首页 > 其他 > 详细

生成带有logo的二维码

时间:2019-04-17 11:49:20      阅读:115      评论:0      收藏:0      [点我收藏+]
关键词

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>

界面如下

技术分享图片

生成带有logo的二维码

原文:https://blog.51cto.com/12880687/2379086

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!