canvas实现图片合成

在项目中遇到需要实现一张海报和一个二维码合成的效果

toDataURL()方法：toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码； toDataURL() 方法的两个参数：toDataURL(type, encoderOptions)

type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；

encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

将图片转换为base64位编码有什么好处？ 将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；

可以防止由于图片路径错误导致图片加载失败的问题；

在画布上定位图像：context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img：规定要使用的图像、画布或视频。

sx：可选。开始剪切的 x 坐标位置

sy：可选。开始剪切的 y 坐标位置

swidth：可选。被剪切图像的宽度

sheight：可选。被剪切图像的高度

x：在画布上放置图像的 x 坐标位置。

y：在画布上放置图像的 y 坐标位置

width：可选。要使用的图像的宽度。（伸展或缩小图像）

height：可选。要使用的图像的高度。（伸展或缩小图像）

这块是我自己写着测试的，点击时候把两张图片合成一张

  <div>
    <img id="img1" :src="bgPic" alt srcset />
    <img id="img2" :src="materialUrl" alt srcset />
    <div>
      <img :src="makePic" alt srcset />
    </div>
    <div>
      <button id="btn" @click="drawProdPicture" type="primary">保存</button>
    </div>
  </div>
</template>
<script>
import bgPic from '../assets/logo(1).png'
import matePic from '../assets/monster-sm(1).png'
// import html2canvas from 'html2canvas'

export default {
  name: 'AddActivity',
  components: {
  },
  data () {
    return {
      bgPic: bgPic,
      materialUrl: matePic,
      makePic: ''
    }
  },
  created () {
    
  },
  mounted () {
    document.getElementById('img1').style.display = 'none'
    document.getElementById('img2').style.display = 'none'
    document.getElementById('btn').style.display = 'none'
    this.drawProdPicture()
  },
  methods: {
    drawProdPicture () {
      let img1 = new Image()
      img1.src = this.bgPic
      img1.width = 350
      img1.height = 350
      // img1.setAttribute('crossOrigin', 'anonymous')
      let canvas = document.createElement("canvas")
      let context = canvas.getContext("2d")
      canvas.width = 350
      canvas.height = 350
      let img2 = new Image()
      let flag = true
      // 将 img1 加入画布
      img1.onload = () => {
        context.drawImage(img1, 0, 0, 350, 350)
        img2.src = this.materialUrl
        // img2.setAttribute('crossOrigin', 'anonymous')
        img2.width = 350
        img2.height = 350
        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL()
          this.makePic = src
        }
      }
      // 将 img2 加入画布
      img2.onload = () => {
        context.drawImage(img2, 10, 10, 150, 150)
        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL('image/png')
          this.makePic = src
        }
      }

    }
  }
}
</script>