标签：code 合成 height 画布 width 二维码 rem img2 img1

本最开始使用的是引用的  "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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。