Vue如何實現圖片驗證碼生成

這篇文章主要介紹“Vue如何實現圖片驗證碼生成”，在日常操作中，相信很多人在Vue如何實現圖片驗證碼生成問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue如何實現圖片驗證碼生成”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、前端圖片驗證碼生成

前端邏輯大體就是進行圖形繪制，取幾個隨機數放入圖片中，加入干擾，進行驗證

1.創建驗證碼組件identify.vue

<template>
  <div class="s-canvas" >
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
export default{
  name: 'SIdentify',
  props: {
    identifyCode: { // 默認注冊碼
      type: String,
      default: '1234'
    },
    fontSizeMin: { // 字體最小值
      type: Number,
      default: 25
    },
    fontSizeMax: { // 字體最大值
      type: Number,
      default: 35
    },
    backgroundColorMin: { // 驗證碼圖片背景色最小值
      type: Number,
      default: 200
    },
    backgroundColorMax: { // 驗證碼圖片背景色最大值
      type: Number,
      default: 220
    },
    dotColorMin: { // 背景干擾點最小值
      type: Number,
      default: 60
    },
    dotColorMax: { // 背景干擾點最大值
      type: Number,
      default: 120
    },
    contentWidth: { // 容器寬度
      type: Number,
      default: 117
    },
    contentHeight: { // 容器高度
      type: Number,
      default: 32
    }
  },
  methods: {
    // 生成一個隨機數
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
 
    // 生成一個隨機的顏色
    randomColor (min, max) {
      let r = this.randomNum(min, max)
      let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
 
    drawPic () {
      let canvas = document.getElementById('s-canvas')
      let ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // 繪制背景
      ctx.fillStyle = '#e6ecfd'
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // 繪制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
 
    drawText (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(50, 160) // 隨機生成字體顏色
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' // 隨機生成字體大小
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-30, 30)
      // 修改坐標原點和旋轉角度
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 180)
      ctx.fillText(txt, 0, 0)
      // 恢復坐標原點和旋轉角度
      ctx.rotate(-deg * Math.PI / 180)
      ctx.translate(-x, -y)
    },
 
    drawLine (ctx) {
      // 繪制干擾線
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(100, 200)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.stroke()
      }
    },
 
    drawDot (ctx) {
      // 繪制干擾點
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    }
  },
  watch: {
    identifyCode () {
      this.drawPic()
    }
  },
  mounted () {
    this.drawPic()
  }
}
</script>

2.父組件

前端生成驗證碼的校驗是自己生成驗證碼，用戶輸入的值和生成的驗證碼字符串進行比對校驗的，校驗沒有走后端，在真正發送請求到后端的時候也是不將驗證碼傳給后臺的。

<template>
    <div slot="content" class="reg-body">
      <div class="main-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="125px" label-position="left">
          <el-form-item label="驗證碼" class="my-item" prop="code">
            <el-input
              v-model.trim="form.code"
              placeholder="請輸入正確的驗證碼"
              size="small"
              
            />
            <span class="login-code" >
              <Identify :identifyCode="identifyCode"></Identify>
            </span>
            <span
              class="el-icon-refresh-right"
              
              @click="refreshCode"
            />
          </el-form-item>
        </el-form>
        <div >
          <el-button
            v-if="form.agreement"
            
            @click="submitForm()"
            :loading="loading"
          >提交</el-button>
        </div>
      </div>
    </div>
</template>
 
<script>
import Identify from "./identify";
export default {
  name: "Reg",
  mixins: [region],
  components: {Identify },
  data() {
    return {
      formSetting: {
        contentWidth: 340,
      },
      form: {
        logoUrl: "",
        licenseUrl: "",
        description: [],
        account: "",
        name: "",
      },
      code:this.$route.query.code,
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: "",
      picList: [],
      props: { label: "name", value: "id", children: "children" },
      rules: {
        code: [{ required: true, message: "請輸入驗證碼", trigger: "change" }],
      },
      formList: [],
    };
  },
  created() {
    // this.getAllDict()
  },
  mounted() {
    this.getRegion();
    // 初始化驗證碼
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    localStorage.setItem("code", this.code);
  },
  methods: {
    openHtml() {
      this.visible = true;
    },
    //刷新驗證碼
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //生成驗證上的隨機數，驗證碼中的數從identifyCodes中取，
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    //生成隨機數,這里是生成
    //Math.random()方法返回大于等于0小于1的一個隨機數
    //隨機數 = Math.floor(Math.random() * 可能的總數 + 第一個可能的值)
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 提交表單
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit: async function () {
      if (this.form.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$msg({ type: "error", message: "請填寫正確驗證碼" });
        this.refreshCode();
        this.loading = false;
        return;
      } else {
        //驗證碼校驗成功就可以調接口提交表單了
    },
  },
};
</script>

二、后端生成圖片驗證碼

后臺思路很，利用BufferedImage類創建一張圖片，再用Graphics對圖片進行繪制(生成隨機字符，添加噪點，干擾線)即可。

package com.hengtiansoft.gxrc.base.util;
 
import com.hengtiansoft.gxrc.common.constant.MagicNumConstant;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
 
import javax.imageio.ImageIO;
import java.awt.Font;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
 
@Slf4j
@Component
public class ImgCaptchaUtil {
 
 
    private Random random = new Random();
    /**
     * 驗證碼的寬
     */
    private final int width = 160;
    /**
     * 驗證碼的高
     */
    private final int height = 40;
    /**
     * 驗證碼的干擾線數量
     */
    private final int lineSize = 30;
    /**
     * 驗證碼詞典
     */
    private final String randomString = "0123456789abcdefghijklmnopqrstuvwxyz";
 
    /**
     * 獲取字體
     * @return
     */
    private Font getFont() {
        return new Font("Times New Roman", Font.ROMAN_BASELINE, MagicNumConstant.FORTY);
    }
 
    /**
     * 獲取顏色
     * @param fc
     * @param bc
     * @return
     */
    private Color getRandomColor(int fc, int bc) {
 
        int fcc = Math.min(fc, MagicNumConstant.TWO_HUNDRED_FIFTY_FIVE);
        int bcc = Math.min(bc, MagicNumConstant.TWO_HUNDRED_FIFTY_FIVE);
 
        int r = fcc + random.nextInt(bcc - fcc - MagicNumConstant.SIXTEEN);
        int g = fcc + random.nextInt(bcc - fcc - MagicNumConstant.FOURTEEN);
        int b = fcc + random.nextInt(bcc - fcc - MagicNumConstant.TWELVE);
 
        return new Color(r, g, b);
    }
 
    /**
     * 繪制干擾線
     * @param g
     */
    private void drawLine(Graphics g) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(MagicNumConstant.TWENTY);
        int yl = random.nextInt(MagicNumConstant.TEN);
        g.drawLine(x, y, x + xl, y + yl);
    }
 
    /**
     * 獲取隨機字符
     * @param num
     * @return
     */
    private String getRandomString(int num) {
        int number = num > 0 ? num : randomString.length();
        return String.valueOf(randomString.charAt(random.nextInt(number)));
    }
 
    /**
     * 繪制字符串
     * @param g
     * @param randomStr
     * @param i
     * @return
     */
    private String drawString(Graphics g, String randomStr, int i) {
        g.setFont(getFont());
        g.setColor(getRandomColor(MagicNumConstant.ONE_HUNDRED_EIGHT, MagicNumConstant.ONE_HUNDRED_NINETY));
        String rand = getRandomString(random.nextInt(randomString.length()));
        String randomString = randomStr + rand;
        g.translate(random.nextInt(MagicNumConstant.THREE), random.nextInt(MagicNumConstant.SIX));
        g.drawString(rand, MagicNumConstant.FORTY * i + MagicNumConstant.TEN, MagicNumConstant.TWENTY_FIVE);
        return randomString;
    }
 
    /**
     * 生成隨機圖片，返回 base64 字符串
     * @param
     * @return
     */
    public Map<String, String> getImgCodeBaseCode(int length) {
        Map<String, String> result = new HashMap<>();
        // BufferedImage類是具有緩沖區的Image類,Image類是用于描述圖像信息的類
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();
        g.fillRect(0, 0, width, height);
        // 獲取顏色
        g.setColor(getRandomColor(MagicNumConstant.ONE_HUNDRED_FIVE, MagicNumConstant.ONE_HUNDRED_EIGHTY_NINE));
        // 獲取字體
        g.setFont(getFont());
        // 繪制干擾線
        for (int i = 0; i < lineSize; i++) {
            drawLine(g);
        }
 
        // 繪制隨機字符
        String randomCode = "";
        for (int i = 0; i < length; i++) {
            randomCode = drawString(g, randomCode, i);
        }
        g.dispose();
 
        result.put("imgCode", randomCode);
 
        String base64Code = "";
        try {
            //返回 base64
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            ImageIO.write(image, "PNG", bos);
 
            byte[] bytes = bos.toByteArray();
            Base64.Encoder encoder = Base64.getEncoder();
            base64Code = encoder.encodeToString(bytes);
 
        } catch (Exception e) {
            log.debug(e.getMessage());
        }
        result.put("data", "data:image/png;base64," + base64Code);
        return result;
    }
 
}

后臺生成圖片base64，和一個唯一的key（通過這個key判斷是哪張圖片），后臺可以通過接口傳給前端圖片base64和key，前端輸入驗證碼，傳給后臺key和驗證碼去校驗驗證。

package com.hengtiansoft.gxrc.base.service.impl;
 
import com.hengtiansoft.gxrc.base.service.ImgCaptchaService;
import com.hengtiansoft.gxrc.base.util.ImgCaptchaUtil;
import com.hengtiansoft.gxrc.common.constant.MagicNumConstant;
import com.hengtiansoft.gxrc.common.entity.exception.BusinessException;
import com.hengtiansoft.gxrc.common.redis.RedisOperation;
import com.hengtiansoft.gxrc.common.util.UUIDUtils;
import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;
 
import java.util.Map;
 
/**
 * @Description:
 * @Author: wu
 * @CreateDate: 2020/11/11 17:17
 */
@Service
public class ImgCaptchaServiceImpl implements ImgCaptchaService {
 
    private static final String IMG_CAPTCHA = "imgCaptcha:";
 
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;
 
    @Autowired
    private ImgCaptchaUtil imgCaptchaUtil;
 
    @Override
    public Map<String, String> getImgCaptcha() {
        RedisOperation redisOperation = new RedisOperation(redisTemplate);
        Map<String, String> map = imgCaptchaUtil.getImgCodeBaseCode(MagicNumConstant.FOUR);
        String uuid = UUIDUtils.createUUID();
        redisOperation.set(IMG_CAPTCHA + uuid, map.get("imgCode"));
        redisOperation.expire(IMG_CAPTCHA + uuid, MagicNumConstant.THIRTY_THOUSAND);
        map.remove("imgCode");
        map.put("key", uuid);
        return map;
    }
 
    @Override
    public void checkImgCaptcha(String code, String key) {
        RedisOperation redisOperation = new RedisOperation(redisTemplate);
        String captcha = redisOperation.get(IMG_CAPTCHA + key);
        if (ObjectUtils.isEmpty(captcha) || !StringUtils.equals(captcha, code)) {
            throw new BusinessException("驗證碼錯誤");
        }
        redisOperation.del(IMG_CAPTCHA + key);
    }
}

到此，關于“Vue如何實現圖片驗證碼生成”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！