vue中怎么根据选择的名称 生成印章图片

项目中需要根据选择的印章名称，动态生成印章 ，印章下方显示当前的日期 代码如下

<template>
  <div>
    <label for="name">选择名称：</label>
    <select id="name" v-model="selectedName">
      <option value="name1">名称1</option>
      <option value="name2">名称2</option>
      <option value="name3">名称3</option>
    </select>

    <button @click="generateStampImage">生成印章图片</button>

    <div ref="stampContainer" v-if="stampGenerated">
      <img :src="stampImage" alt="印章" />
    </div>
  </div>
</template>

export default {
  data() {
    return {
      selectedName: '',
      stampGenerated: false,
      stampImage: ''
    };
  },
methods: {
    generateStampImage() {
      const stampText = this.selectedName;
      const canvas = document.createElement("canvas");
      canvas.width = 100; // 缩小印章尺寸
      canvas.height = 100;

      const ctx = canvas.getContext("2d");

      // 绘制圆形边框
      ctx.beginPath();
      ctx.arc(80, 80, 75, 0, 2 * Math.PI, false);
      ctx.fillStyle = "white";
      ctx.fill();
      ctx.lineWidth = 3;
      ctx.strokeStyle = "red";
      ctx.stroke();

      // 绘制五角星
      this.drawStar(ctx, 80, 80, 5, 30, 15); // 适当调整五角星大小
      ctx.fillStyle = "red";
      ctx.fill();

      // 绘制弧形文本
      this.drawCircularText(ctx, stampText, 80, 80, 60, -Math.PI / 2, "red"); // 调整文本的起始角度

      // 绘制日期
      ctx.font = "14px Arial";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText(this.currentDate, 80, 120); // 日期显示在五角星下方

      const stampImage = canvas.toDataURL("image/png");
      this.stampGenerated = true;
      this.stampImage = stampImage;
    },
    drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
      let rot = (Math.PI / 2) * 3;
      let x = cx;
      let y = cy;
      const step = Math.PI / spikes;

      ctx.beginPath();
      ctx.moveTo(cx, cy - outerRadius);
      for (let i = 0; i < spikes; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        ctx.lineTo(x, y);
        rot += step;

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        ctx.lineTo(x, y);
        rot += step;
      }
      ctx.lineTo(cx, cy - outerRadius);
      ctx.closePath();
    },
     drawCircularText(ctx, text, x, y, radius, color) {
      ctx.fillStyle = color;
      ctx.font = '16px Arial';
      ctx.textBaseline = 'middle';

      let startAngle = -Math.PI; // 开始于水平左侧
      let totalAngle = 0; // 计算总角度

      // 计算文本占据的总角度
      for (let i = 0; i < text.length; i++) {
        totalAngle += ctx.measureText(text[i]).width / radius;
      }

      // 调整开始角度，使文本居中
      startAngle += (Math.PI - totalAngle) / 2;

      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        const charWidth = ctx.measureText(char).width;
        const angle = startAngle + charWidth / (2 * radius);

        ctx.save();
        ctx.translate(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
        ctx.rotate(angle + Math.PI / 2);
        ctx.fillText(char, -charWidth / 2, 0);
        ctx.restore();

        startAngle += charWidth / radius;
      }
    },
}

}

使用的地方调用： this.generateStampImage();即可
生成的效果如下