画布 多张图片合成二维码推广图

本最开始使用的是引用的  "html2canvas" ，但tm调来跳去各种问题。

最后直接换成画布操作 ，我这里是采用的VUE

注意事项：图片链接和网站 http 协议一致，如果网站是http就图片链接开头就用http，若是s就用s ，否则将失败。我其实猜测 html2canvas 没有成功的原因可能也可能是这个原因，具体还要去试验

废话不多说上完整代码  

<template>
  <div>
          <div class="tuiguanghead" @click="backTo">
        <div >
          <van-icon name="arrow-left" />
        </div>
      </div>
    <img id="bg" v-show="!makePic"  :src="bgPic" alt srcset />
    <img id="code" v-show="!makePic" :src="materialUrl" alt srcset />
    <div>
      <img v-show="makePic" :src="makePic" alt srcset />
    </div>
    <div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      bgPic: require('@/assets/images/hytg.jpg'),
      materialUrl: '',//require('@/assets/images/dizhi.png'),
      makePic: ''
    }
  },
  created () {
    this.getdata();
  },
  mounted () {
    setTimeout(() => {
          this.drawProdPicture();
    }, 1000);

  },
  methods: {
     backTo () {
      if (this.back) {
        this.$router.push(this.back)
      } else {
        this.$router.back(-1)
      }
    },
    getdata () {
      var that =  this;
      this.$get('/user/Extension_qrcode', {
      }).then(res => {
        if (res.code === 200) {
            that.materialUrl = res.data.url
        }
      })
    },
    drawProdPicture () {
      let img1 = new Image()
      img1.src = this.bgPic
      var bg = document.getElementById("bg").getBoundingClientRect();
      img1.width = bg.width
      img1.height = bg.height
      img1.setAttribute('crossOrigin', 'anonymous')
      let canvas = document.createElement("canvas")
      let context = canvas.getContext("2d")
      canvas.width = img1.width
      canvas.height = img1.height
      let img2 = new Image()
      let flag = true
       var code = document.getElementById("code").getBoundingClientRect();
      // 将 img1 加入画布
      img1.onload = () => {
        context.drawImage(img1, 0, 0, bg.width,bg.height)
        img2.src = this.materialUrl
        img2.setAttribute('crossOrigin', 'anonymous')
        img2.width = code.width
        img2.height = code.height
        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL()
          this.makePic = src
        }
      }
      var right = document.body.clientWidth-(document.body.clientWidth*0.67)
      var top = document.body.clientHeight-(document.body.clientHeight*0.49)
      // 将 img2 加入画布
      img2.onload = () => {
        context.drawImage(img2, right, top, code.width, code.height)
        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL('image/png')
          this.makePic = src
        }
      }

    }
  }
}
</script>
<style  lang="scss" scoped>
.tuiguanghead {
  z-index: 2;
  padding-left: 0.3rem;
  padding-top: 0.3rem;
  position: fixed;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 5, 0.3);
    i {
      font-size: 0.32rem;
      color: #f5f5f5;
    }
  }
}
#bg{
  width: 100%;
  height: 100%;
}
#code{
  position: absolute;
  bottom: 4rem;
  left: 2.5rem;
  width: 2.4rem;
}
</style>

　　

标签：code,合成,height,画布,width,二维码,rem,img2,img1
来源： https://www.cnblogs.com/super-ldc/p/15554217.html