使用 html2canvas 制作图片

一. 引入 html2canvas

npm i html2canvas

二. 在页面中引入

import html2canvas from "html2canvas";

三. 在页面中使用

1. HTML

<div class="qr_code" v-if="img">
	<img :src="img" />
</div>
<div id="qianduanwz" v-if="!img">
	 <img class="bgi" src="../../assets/images/save.png" />
	 <img class="er_code" :src="serviceUrl" />
</div>

2. JS

create(){
	this.serviceUrl = localStorage.getItem("serviceUrl");
	this.$nextTick(() => {
      new html2canvas(document.getElementById("qianduanwz"), {
        allowTaint: true,
        useCORS: true,
      }).then((canvas) => {
        this.img = canvas.toDataURL(); // 导出图片
      });
    });
}
data(){
	return {
		serviceUrl :"",  // 二维码图片
		img:"",  //  生成的图片
	}
}

3. CSS

<style lang="less" scoped>
.qr_code {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.2rem auto 0;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
#qianduanwz {
  width: 2.25rem;
  height: 2.25rem;
  position: relative;
  margin: 0.2rem auto 0;
  .bgi {
    display: block;
    width: 100%;
    height: 100%;
  }
  .er_code {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.55rem;
    left: 0.51rem;
  }
}
</style>

四. 效果