vue项目前端实现图形验证码

效果预览：（项目要求清爽一点，所以没背景。但是下面的代码会把背景干扰写进去）

 

1.下载identify插件，命令：npm i identify

2.在你的components目录新建一个vue组件，我的命名是：sIdentify.vue

3.在组件内把下面的代码copy过去(可以自定义哈！)

<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: 35
    },
    fontSizeMax: {
      type: Number,
      default: 35
    },
    backgroundColorMin: {
      type: Number,
      default: 180
    },
    backgroundColorMax: {
      type: Number,
      default: 240
    },
    colorMin: {
      type: Number,
      default: 50
    },