Vue生成二维码分享海报并下载到本地,亲测有效

1. npm安装 html转canvas — 亲测有效

npm install html2canvas --save

2.页面引入

import html2canvas from ‘html2canvas’;

3.html:调整位置生成想要的海报

两张图片的具体定位，可通过css定位调整，ewm.png是太阳码，bg.png是分享海报背景；最后生成的海报图片如下图：

HTML部分

<div
		v-show="imgUrl"
        ref="box"
        style="
          width: 320px;
          height: 450px;
          display: inline-block;
          overflow: hidden;
        "
      >
       <img
         style="
           width: 220px;
           height: 220px;
           position: absolute;
           top: 183px;
           left: 65px;
         "
         :src="../../assets/image/ewm.png"
         alt=""
       />
       <img
         style="width: 320px; height: 450px"
         src="../../assets/image/bg.png"
         alt=""
       />
</div>
        <!--生成的合成图片-->
<el-image v-show="imgUrl" :src="imgUrl" :preview-src-list="[imgUrl]"></el-image>

JS部分

import html2canvas from 'html2canvas';
export default {
        data() {
            return{
                    imgUrl:''
            }
        },
        methods:{
                draw(){
                    var that = this;
                    html2canvas(that.$refs.box).then(function(canvas) {
                    　　that.imgUrl = canvas.toDataURL()//将canvas转为base64图片
                　　});
                }，
                downImg(){ // 下载图片
                  let a = document.createElement('a')
			      a.setAttribute('download', '海报下载-' + new Date().getTime())
			      a.href = this.imgUrl
			      a.click()
                }
        },
        mounted(){ // 初始化生成海报
            this.draw()
        }
    };