前端canvas生成图片验证码

<template>  
  <div>  
    <canvas ref="captchaCanvas" width="150" height="50"></canvas>  
    <button @click="generateCaptcha">生成验证码</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Captcha',  
  methods: {  
    generateCaptcha() {  
      const canvas = this.$refs.captchaCanvas;  
      const ctx = canvas.getContext('2d');  
  
      // 清除之前的绘制  
      ctx.clearRect(0, 0, canvas.width, canvas.height);  
  
      // 设置字体样式  
      const fontSize = 24; // 字体大小  
      ctx.font = `${fontSize}px Arial`;  
      ctx.fillStyle = '#333';  
  
      // 生成随机验证码  
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';  
      let captchaText = '';  
      for (let i = 0; i < 6; i++) {  
        captchaText += chars.charAt(Math.floor(Math.random() * chars.length));  
      }  
  
      // 测量文本宽度  
      const textWidth = ctx.measureText(captchaText).width;  
  
      // 计算文本居中的x坐标  
      const x = (canvas.width - textWidth) / 2;  
  
      // 假设文本高度与字体大小大致相同（对于某些字体可能不完全准确）  
      const textHeight = fontSize; // 或者使用更复杂的逻辑来计算确切的高度  
  
      // 计算文本居中的y坐标（考虑到基线位置可能在字体高度的下方）  
      // 这里我们简单地将y坐标设置为canvas高度的一半减去字体大小的一半  
      // 但对于某些字体，你可能需要调整这个值以获得更好的垂直居中效果  
      const y = canvas.height / 2 + fontSize / 2 * 0.3; // 这里的0.3是一个调整因子，可能需要根据实际字体进行调整  
  
      // 绘制验证码  
      ctx.fillText(captchaText, x, y);  
  
      // ...（添加干扰线、噪点等）  
    }  
  },  
  mounted() {  
    this.generateCaptcha(); // 组件挂载时生成一次验证码  
  }  
};  
</script>  
  
<style scoped>  
canvas {  
  border: 1px solid #ccc;  
}  
</style>