vue生成二维码并保存图片_vue实现扫描二维码

全栈程序员-站长 • 2022年10月3日上午9:46 • 未分类 • 阅读 4

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

<template>
  <div>
    <qrcode-vue
      id="qrcodeBox"
      :size="qrcodeVue.size"
      :value="qrcodeVue.value"
      :logo="qrcodeVue.logo"
      :bgColor="qrcodeVue.bgColor"
      :fgColor="qrcodeVue.fgColor"
    ></qrcode-vue>
    <!-- <a-button @click="getQRcode"></a-button> -->
    <a-button @click="downsQRcode">下载图片</a-button> 
  </div>
</template>

<script>
import qrcodeVue from 'qrcode-vue'
export default {
  components: {
    qrcodeVue
  },

  data() {
    return {
      qrcodeVue: {
        size: 250,
        bgColor: '#fff',
        fgColor: '#000',
        value: '', //二维码地址
        logo: require('@/assets/logo.png') //logo图片
      }
    }
  },
  methods: {
    //生成二维码
    getQRcode() {
      this.qrcodeVue.value = '吾问无为谓无' // 二维码内容
    },
    //下载图片
    downsQRcode() {
      //找到canvas标签
      let myCanvas = document
        .getElementById('qrcodeBox')
        .getElementsByTagName('canvas')
      let img = document.getElementById('qrcodeBox').getElementsByTagName('img')
      // // //创建一个a标签节点
      let a = document.createElement('a')
      // //设置a标签的href属性（将canvas变成png图片）
      let imgURL = myCanvas[0].toDataURL('image/jpg')
      let ua = navigator.userAgent
      if (ua.indexOf('Trident') != -1 && ua.indexOf('Windows') != -1) {
        // IE内核 并且  windows系统 情况下 才执行;
        var bstr = atob(imgURL.split(',')[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, '商品二维码' + '.' + 'png')
      } else if (ua.indexOf('Firefox') > -1) {
        //火狐兼容下载
        let blob = this.base64ToBlob(imgURL) //new Blob([content]);
        let evt = document.createEvent('HTMLEvents')
        evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        a.download = ' ' //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
        a.href = URL.createObjectURL(blob)
        a.dispatchEvent(
          new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          })
        ) //兼容火狐
      } else {
        //谷歌兼容下载
        img.src = myCanvas[0].toDataURL('image/jpg')
        // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
        a.href = img.src
        //设置下载文件的名字
        a.download = '商品二维码'
        //点击
        a.click()
      }
    }
  }
}
</script>

<style scoped lang=""></style>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/186484.html原文链接：https://javaforall.net