vue海报含二维码_vue img列表显示二维码-CSDN博客

本文介绍了一个使用Vue实现的海报生成组件，该组件能够通过html2canvas和qrcode库生成包含二维码的海报图片，并提供了下载功能。文章详细阐述了组件的结构、样式设置、二维码创建及图片导出的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装好的子组件

<template>
  <div class="container">
    <img v-if="posterDataUrl" :src="posterDataUrl" style="width:300px;height:720px" />

    <div id="poster" v-show="!posterDataUrl" style="position: relative;width:300px;height:720px">
      <img class="poster-bg" crossorigin="Anonymous" :src="`${bgsrc}?v=${Math.random()}`" />
       
      <!-- 阿里云图片跨域需要img需要增加crossorigin="Anonymous"   图片路径需要加上随机数，表示不从缓存取资源，不加上和Anonymous有冲突 -->
      <canvas class="poster-qr" id="qrCode-canvas" style="z-index: 1"></canvas>
    </div>
   
    <el-button type="primary" @click="handleConfirm">下载</el-button>
  </div>
</template>

<script>
// npm i qrcode --save
import QRCode from "qrcode";
// npm i html2canvas --save
import html2canvas from "html2canvas";
export default {
  name: "pro",
  props: {
    bgsrc: {
      type: String,
      required: true
    },
    path:{
      type: String,
      required: true
    }
  },
  data() {
    return {
      posterDataUrl: "",
      list: "",
    };
  },
 
  mounted() {
    setTimeout(() => {
      this.set();
    }, 100);
  },
  methods: {
   
    //延迟 让二维码图片加载完
    set() {
      this.posterDataUrl = "";
      setTimeout(() => {
        this.createQRCode();
      }, 1000);
    },
    createQRCode() {
      let canvas = document.getElementById("qrCode-canvas");
      // 绘画出二维码
      QRCode.toCanvas(
        canvas,
        this.path,
        {
          margin: 2,
          width: 120,
          height: 120
        },
        error => {
          if (error) {
            console.log(error);
          } else {
            window.pageYOffset = 0; //解决截图不全问题
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            html2canvas(document.getElementById("poster"), {
              useCORS: true, //（图片跨域相关）
              allowTaint: false //允许跨域（图片跨域相关）
            }).then(canvas => {
              this.posterDataUrl = canvas.toDataURL();
            });
          }
        }
      );
    },
    downloadCodeImg() {
      console.log("下载图片");
      var a = document.createElement("a");
      a.download = name || "pic"; // 设置图片地址
      a.href = this.posterDataUrl;
      a.click();
    },

    handleConfirm() {
      console.log("333");
      this.downloadCodeImg();
    }
  }
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.container {
  padding-bottom: 50px;
  font-size: 0;
  width: 320px;
  height: 740px;
}

.poster-bg {
  position: relative;
  max-width: 100vw;
  width: 300px;
  height: 720px;
}
.poster-qr {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.poster-head {
  width: 100%;
  position: absolute;
  top: 50px;
  text-align: center;
  z-index: 1;
  font-size: 14px;
  color: #fff;
}
.poster-head img {
  width: 100px;
  border-radius: 50%;
}
.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  margin-top: 13px;
}
</style>

父组件调用

   <pro v-bind:path="path" v-bind:bgsrc="bgsrc" v-if="flag"></pro>
   path：二维码路径 bgsrc：图片

注意组件更新问题否则每次都是刷新后的第一个海报
解决方法：vue父子组件传值正确页面不更新（误踩坑）