运用canvas将两张图拼接成一张图

<template>
  <div>
    <img src="../assets/0001.jpg" id="img1" style="display: block" width="500" height="750" />
    <img src="../assets/0002.jpg" id="img2" style="display: block" width="500" height="750" />
    <img id="img3" />

    <button @click="draw()" id="btn">点击下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    draw() {
      var img1 = document.getElementById("img1"),
        img2 = document.getElementById("img2"),
        img3 = document.getElementById("img3");
      img1.width = 500;
      img1.height = 750;
      img2.width = 500;
      img2.height = 750;
      var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");
      canvas.width = img1.width;
      canvas.height = img1.height * 2;
      canvas.style.letterSpacing = "10px";
      // 将 img1 加入画布
      context.drawImage(img1, 0, 0, img1.width, img1.height);

      // 将 img2 加入画布
      context.drawImage(img2, 0, 750, img2.width, img2.height);

      context.fillStyle = "#333"; // 文字填充颜色
      context.font = "bold 45px Baoli SC";

      // 将画布内容导出
      var src = canvas.toDataURL();
      img3.src = src;
      console.log(img3);
      const a = document.createElement("a");
      a.href = src;
      a.download = "自定义文件名.png";
      a.click();
    }
  }
};
</script>
<style lang='less' scoped>
</style>