vue 生成二维码和生成海报

火乐暖阳85105

已于 2024-06-19 11:14:50 修改

阅读量690

点赞数

文章标签： vue.js 前端 javascript

于 2023-06-24 10:49:24 首次发布

本文链接：https://blog.csdn.net/weixin_47938715/article/details/131358673

版权

该文章展示了如何在Vue项目中利用html2canvas和qrcodejs2库生成二维码并制作海报。首先通过npm安装两个依赖包，然后引入到JS中。在模板中定义了显示海报的结构，当点击按钮时，生成海报图片并转换为base64格式。同时，文章还涉及到动态生成二维码内容和处理微信分享链接的逻辑。

摘要由CSDN通过智能技术生成

一、分别安装两个依赖包

npm i qrcodejs2 --save  //二维码的依赖包

npm install html2canvas --save  //用来生成海报的依赖包

二、引入安装的依赖包js

<script>
    import html2canvas from 'html2canvas';
    import QRCode from "qrcodejs2";
</script>

三、整体代码如下

<template>
  <div class="page-content">
    <div class="invitepage">
      <!-- 设置了两个块区域 
当点击了生成海报时把canvas转换成base64的图片，
然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
      <img v-if="!test" :src="imgSrc" alt="展览会" />
      <div v-else>
        <div class="baijing">
          <div class="img">
              <img src="@/assets/images/share1.png" alt="展览会">
          </div>
          <div class="img ">
              <img src="@/assets/images/share2.png" alt="展览会">
          </div>
          <div class="img qrcode_">
              <img src="@/assets/images/share3.png" alt="展览会">
                <!-- 二维码生成 -->
              <div class="qrcode render_sharefs">
                <span class="qq" ref="qrCodeUrl"></span>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="download"><a  @click="btn" v-if="shuuju">点击生成海报长按保存分享好友</a></div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import QRCode from "qrcodejs2";
import backImg from "../assets/images/demo.png"; 
export default {
  props:['showchinese'],
  data() {
    return {
        test: true,
        imgSrc:backImg,
        shuuju:true,
        qrcodeText:"默认的二维码内容",
    };
  },
  methods:{
    // 生成二维码
    creatQrCode() {
      let a = new QRCode(
      this.$refs.qrCodeUrl, 
      {
        text: this.qrcodeText, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "black", //#000000为黑色
        colorLight: "white",
      });
    },
    // 生成海报
    btn() {
      this.shuuju=false
      //点击生成canvas转换成base64的图片
      const that = this;
      html2canvas(document.querySelector('.baijing')).then(function (canvas) {
        that.imgSrc = canvas.toDataURL();
      });
      this.$nextTick(() => {
        //生成过程中，一闪过切换显示demo图片，页面不留白
          this.test = false;
      });
    },
    funcUrlDel(){
    // 重组url分享链接,在微信打开vue页面，首次打开有参数需要对参数编码处理
        // let baseUrl = 'https://ceshi.baidu.com/html/M50/dist/';
        // let qdparam = `home?ly=fs&fcode=${this.$route.query.fs}`;
        // let auto_url = encodeURIComponent(qdparam);
        // let myurl = encodeURI( `${encodeURI(baseUrl)}?auto_url=${auto_url}#/home`);
        // this.qrcodeText = myurl;
        let myurl = `https://xxxx.com/html/M52/dist/#/home?ly=fs&fcode=${this.$route.query.fs}`;
        this.qrcodeText = myurl;
    },
  },
   mounted() {
    this.funcUrlDel();  
    this.creatQrCode(); //首次加载时便生成二维码
  }
  
};
</script>