在项目中用户需要让我把二维码和背景图保存到一张图片上，其实大家都知道，这个可以用canvas来实现。简单上网搜了一下，调试了下，终于成功了，写篇日志记录下源码

<template>
  <div class="content">
    <div
      class="title font-16 font-bold"
      v-text="$t('label431')"
    ></div>
    <div class="shar_box">
        <div class="bot_top toptips">
          <h3 class="font-bold font-20 padd20">通过以下链接推荐其他用户访问本站并注册:</h3>
          <p>1、文案；</p>
          <p>2、文案。</p>
          <p>注：文案。</p>
          <h4 class="font-20 padd20">我的推荐码：{{tjCode}}</h4>
        </div>
        <div class="share_code flex">
            <div class="code_left">
                <p class="font-bold font-14 padd20">推荐给用户的注册页面的链接：</p>
                <p class="font-16 font-bold h40">{{TGurl}} </p>
                <el-button type="danger" class="copybtn"
                  v-clipboard:copy="TGurl"
                  v-clipboard:success='onSuccess'
                >复制链接</el-button>
                <div class="m-top-10">
                  <vue-qr
                    v-if="TGurl"
                    :text="TGurl"
                    :margin="10"
                    :size="200"
                  >
                  </vue-qr>
                </div>
                <p>保存二维码，去您的社交媒体推广</p>
            </div>  
            <div class="code_left">
                <p class="font-bold font-14 padd20">推荐给用户的手机注册页面的链接：：</p>
                <p class="font-16 font-bold h40">{{myMlink}} </p>
                <el-button type="danger" class="copybtn" 
                  v-clipboard:copy="myMlink"
                  v-clipboard:success='onSuccess'
                >复制链接</el-button>
                <div class="m-top-10">
                  <vue-qr
                    v-if="myMlink"
                    :text="myMlink"
                    :margin="10"
                    :size="200"
                    id='qrmcode'
                    :callback="test"
                  >
                  </vue-qr>
                </div>
                <p>保存二维码，去您的社交媒体推广</p>
            </div>
        </div>
        <div class="big_codebox ">
            <h4 class=" font-20 font-bold padd20">我的推广图片</h4>
            <div class="big_code bot_top">
                <div class="code">
                    <!-- <img src="https://gateio.news/libs/qr_ref.php?uid=1658621&pid=1001&lang=cn" alt="" srcset=""> -->
                    <template>
                      <div>
                          <div ref="box" id="shareImg">
                          <img :src='require("../../assets/images/user/tgbg.png")' alt="">
                          <img :src='qrmcodeSrc'  alt="" class="imgs2">
                          </div>
                          <!--生成的合成图片-->
                          <!-- <img :src="imgUrl" alt=""> -->
                          <!-- <img :src="'data:image/jpeg;base64,' + downloadUrl"/> -->
                      </div>
                    </template>
                    <el-button type="primary" class="m20"   @click="saveImage('box','xxx图片推广二维码')">点击按钮或截图，保存二维码图片，去您的社交媒体推广</el-button>
                </div>
            </div>
            <div class="shar_txt">
                <h4 class="font-20 font-bold">推广方法：</h4>
                <p>1. 复制以上任一推广链接，或者下载保存以上二维码，去您的社交媒体推广，让您的朋友们通过此链接访问本站并注册。</p>
                <p>2. 移动端扫码以上二维码，可以直接注册。也可以使用浏览器分享功能或是微信扫码功能进行分享。
                    点击微信右上角菜单，在弹窗的对话框中，点击发送给朋友、分享到朋友圈、分享到手机QQ或者分享到QQ空间即可。</p>
            </div>
            <!-- 测试 -->
            <el-dialog :title="title" :visible.sync="shopCodeShow" :append-to-body="true" width="20%" height="480">
              <div class="bg-purple-light-down limit-button">
                <el-button type="primary" plain size="small" @click="downLoadShopPic">下载</el-button>
              </div>
              <div style="display: flex;justify-content: center; margin-top:10px;">
                <img ref="shopPicImg" :src='shopPic' style="display: none;" alt="店铺背景">
                <vue-qr :callback="f_shopPicCode" :text="payPic" :logoSrc="paylogoSrc" :size="150" :logoScale="0.3" :margin=0 style="display: none; "></vue-qr>
                <canvas id="myCanvasShopPic" ref="myCanvas" width="300" height="450" style="border:1px #eeeeee solid;"></canvas>
              </div>
            </el-dialog>

        </div>
    </div>
  </div>
</template>
<script>
import VueQr from "vue-qr";
import html2canvas from 'html2canvas';
export default {
  components: { VueQr },
  data() {
    return {
      userData: "",
      showLoading: true,
      TGurl:'',
      myMlink:'',
      tjCode:'',
      imgUrl:'',
      qrmcodeSrc:'',
      commissionList: [],
      // 测试
      shopPic:'',
      rowData:'',
      downloadUrl:'',
      divText:'box',
      imgText:'xxx图片推广二维码'
    };
  },
  mounted() {
    this.showLoading = true;
    this.Getsharecode();
    // 生成二维码
    this.getMyPCcode();
    this.CreateCode();
    this.test();//获取database64 url
    // 合并二维码
    // this.draw();
  },
  methods: {
    handleSelect(key) {
      this.navigateTo(key);
    },
    onSuccess() {
      this.successMsg("复制成功");
    },
    test(dataUrl,id){
        // console.log(dataUrl, id);
        this.qrmcodeSrc=dataUrl;
        // console.log(this.qrmcodeSrc);
        this.draw()
    },
    // pc分享链接
    getMyPCcode(){
      this.request(this.api.userinfo).then(res => {
        try {
          this.userData = res.data.userinfo;
          this.TGurl = this.api.qrUrl +'#/user/register/?rid='  + this.userData.sharecode;
          console.log(this.api);
          // 推广链接
          console.log(this.TGurl);
        } catch (err) {}
      })
    },
    // 手机分享链接
    Getsharecode(){
      this.request(this.api.sharecode).then(res => {
        try {
          this.myMlink = res.data.url;
          this.tjCode=res.data.sharecode;
        } catch (err) {}
      })
    },
    CreateCode(){
      // 生成Qrcode
      if (this.TGurl) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.TGurl = url);
      });
      // 手机码
      if (this.myMlink) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.myMlink = url);
      });
    },
    draw(){
      if(this.qrmcodeSrc) return
        var that = this;
        if(this.qrmcodeSrc) return
        html2canvas(that.$refs.box).then(function(canvas) {
          that.imgUrl = canvas.toDataURL()//将canvas转为base64图片(eg. data:image/png;base64,ijskjlkj)
        });
    },
    //下载店铺码
    downLoadShopPic(){
      var myCanvasShopPic  = document.getElementById("myCanvasShopPic");
      var dataURL = myCanvasShopPic.toDataURL("image/png");
      var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      saveLink.href = dataURL;
      saveLink.download = 'downLoad.png';
      saveLink.click();
    },
    //下面是methods中的内容
      //图片转换格式的方法 直接使用就好  不需要知道为什么
       dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        /*保存图片的方法（即按钮点击触发的方法）   
          第一个参数为需要保存的div的id名  
          第二个参数为保存图片的名称 */
        saveImage(divText, imgText) {
            let canvasID = this.$refs[divText];
            let that = this;
            let a = document.createElement('a');
            html2canvas(canvasID).then(canvas => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = 'none';
                a.style.display = 'none';
                document.body.removeChild(dom);
                let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                a.setAttribute('href', URL.createObjectURL(blob));
                //这块是保存图片操作  可以设置保存的图片的信息
                a.setAttribute('download', imgText + '.png');
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        },
  }
};
</script>
<style lang="scss" scoped>
.table-wrap {
  border: $default-border;
  border-bottom: none;
}
.title {
  margin-bottom: 25px;
}
.bot_top{
    border-top: 1px solid #c1d0cd;
}
.padd20{padding: 15px 0;}
.text_cen{text-align: center;}
.toptips {
  p{line-height: 24px;}
}
.code_left{width: 50%;}
.copybtn{margin: 15px 0 0 30px;}
// big_code
.big_code{
    img{width: 350px;}
    padding: 15px;
}
.copybtn{color: #ffffff;}
.h40{height: 40px;}
.shar_txt{
  p{line-height: 24px;}
}
.big_codebox{
  .imgs2{width: 150px;position: relative;
    left: 100px;
    bottom: 368px;
  }
}
#shareImg{
  width: 350px;
  height: 622px;
  }
  .m20{margin-top: 20px;}
</style>

效果图如下

点击按钮保存 上面有段函数，点击触发后，就可以下载canvas绘制的合成的图片了

【保存图片到本地就可以啦】

如果大家有不明白的地方可以关注【H5前端开发社区】微信公众号，给我留言就可以啦！还可以领取淘宝优惠券哦！