vue 利用canvas将两张图片合成一张

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

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

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

  methods: {
    draw() {
      const img1 = document.getElementById('img1');
      const img2 = document.getElementById('img2');
      const img3 = document.getElementById('img3');
      img1.width = 500;
      img1.height = 750;
      img2.width = 500;
      img2.height = 750;
      const canvas = document.createElement('canvas');
      const 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, 250, 30, 90);

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

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