https://drarvindkumar.com/js/jquery-captcha.js?v=4179

1let Captcha;
2(function($) {
3  "use strict";
4  // 默认配置
5  const defaults = {
6    element: null,       // canvas节点
7    length: 4,           // 校验码长度
8    code: [],            // 校验码
9    autoRefresh: false,   // 调用校验接口后是否自动刷新
10  };
11
12  const sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
13  const aCode = sCode.split(",");
14  const aLength = aCode.length; //获取到数组的长度
15
16  Captcha = function(element, options) {
17    const self = this;
18    self.options = $.extend(true, defaults, options);
19    self.element = element;
20    self.refresh();
21    self.element.on('click', function () {
22        self.refresh();
23    });
24  };
25
26  Captcha.prototype.refresh = function() {
27    const self = this;
28    const canvas_width = self.element.width();
29    const canvas_height = self.element.height();
30    const canvas = self.element[0]; //获取到canvas的对象，演员
31    const context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
32    canvas.width = canvas_width;
33    canvas.height = canvas_height;
34
35    const code = [];
36    for (let i = 0; i < self.options.length; i++) {
37      const j = Math.floor(Math.random() * aLength); //获取到随机的索引值
38      const deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
39      const txt = aCode[j]; //得到随机的一个内容
40      code.push(txt.toLowerCase());
41      const x = 10 + i * 20; //文字在canvas上的x坐标
42      const y = 20 + Math.random() * 8; //文字在canvas上的y坐标
43      context.font = "bold 23px Arial";
44
45      context.translate(x, y);
46      context.rotate(deg);
47
48      context.fillStyle = randomColor();
49      context.fillText(txt, 0, 0);
50
51      context.rotate(-deg);
52      context.translate(-x, -y);
53    }
54    self.options.code = code;
55    for (let i = 0; i <= 5; i++) {
56      context.strokeStyle = randomColor();
57      context.beginPath();
58      // 显示线条
59      context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
60      context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
61      // 显示小点
62      const x = Math.random() * canvas_width;
63      const y = Math.random() * canvas_height;
64      context.moveTo(x, y);
65      context.lineTo(x + 1, y + 1);
66      context.stroke();
67    }
68
69    //得到随机的颜色值
70    function randomColor() {
71      const r = Math.floor(Math.random() * 256);
72      const g = Math.floor(Math.random() * 256);
73      const b = Math.floor(Math.random() * 256);
74      return "rgb(" + r + "," + g + "," + b + ")";
75    }
76  };
77
78  Captcha.prototype.getCode = function() {
79    return this.options.code.join('');
80  };
81
82  Captcha.prototype.valid = function(code) {
83    const self = this;
84    const ans = code.toString().toLowerCase() === self.getCode().toLowerCase();
85    if (!ans && self.options.autoRefresh) {
86      self.refresh();
87    }
88    return ans;
89  };
90})($);
91
92
93
94
95
96
97
98
99
100let CaptchaSecond;
101(function($) {
102  "use strict";
103  // 默认配置
104  const defaults = {
105    element: null,       // canvas节点
106    length: 4,           // 校验码长度
107    code: [],            // 校验码
108    autoRefresh: false,   // 调用校验接口后是否自动刷新
109  };
110
111  const sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
112  const aCode = sCode.split(",");
113  const aLength = aCode.length; //获取到数组的长度
114
115  CaptchaSecond = function(element, options) {
116    const self = this;
117    self.options = $.extend(true, defaults, options);
118    self.element = element;
119    self.refresh();
120    self.element.on('click', function () {
121        self.refresh();
122    });
123  };
124
125  CaptchaSecond.prototype.refresh = function() {
126    const self = this;
127    const canvas_width = self.element.width();
128    const canvas_height = self.element.height();
129    const canvas = self.element[0]; //获取到canvas的对象，演员
130    const context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
131    canvas.width = canvas_width;
132    canvas.height = canvas_height;
133
134    const code = [];
135    for (let i = 0; i < self.options.length; i++) {
136      const j = Math.floor(Math.random() * aLength); //获取到随机的索引值
137      const deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
138      const txt = aCode[j]; //得到随机的一个内容
139      code.push(txt.toLowerCase());
140      const x = 10 + i * 20; //文字在canvas上的x坐标
141      const y = 20 + Math.random() * 8; //文字在canvas上的y坐标
142      context.font = "bold 23px Arial";
143
144      context.translate(x, y);
145      context.rotate(deg);
146
147      context.fillStyle = randomColor();

148      context.fillText(txt, 0, 0);
149
150      context.rotate(-deg);
151      context.translate(-x, -y);
152    }
153    self.options.code = code;
154    for (let i = 0; i <= 5; i++) {
155      context.strokeStyle = randomColor();
156      context.beginPath();
157      // 显示线条
158      context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
159      context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
160      // 显示小点
161      const x = Math.random() * canvas_width;
162      const y = Math.random() * canvas_height;
163      context.moveTo(x, y);
164      context.lineTo(x + 1, y + 1);
165      context.stroke();
166    }
167
168    //得到随机的颜色值
169    function randomColor() {
170      const r = Math.floor(Math.random() * 256);
171      const g = Math.floor(Math.random() * 256);
172      const b = Math.floor(Math.random() * 256);
173      return "rgb(" + r + "," + g + "," + b + ")";
174    }
175  };
176
177  CaptchaSecond.prototype.getCode = function() {
178    return this.options.code.join('');
179  };
180
181  CaptchaSecond.prototype.valid = function(code) {
182    const self = this;
183    const ans = code.toString().toLowerCase() === self.getCode().toLowerCase();
184    if (!ans && self.options.autoRefresh) {
185      self.refresh();
186    }
187    return ans;
188  };
189})($);
190