Heim > Artikel > Web-Frontend > Reiner JS-Code zur Implementierung der Bildverifizierungscodefunktion (kompatibel mit IE6-8)
Reiner JS-Code zur Implementierung der Bildverifizierungscodefunktion (kompatibel mit IE6-8)
- 零下一度Original
- 2017-04-19 18:02:421998Durchsuche
Dieser Artikel stellt hauptsächlich das reine JS zur Implementierung der Bildverifizierungscode-Funktion vor und ist mit IE6-8-Browsern kompatibel. Freunde, die es benötigen, können darauf verweisen
Ich möchte kürzlich eine Bildverifizierungscode-Funktion erstellen , aber ich möchte den Code nicht selbst schreiben. Deshalb hatte ich vor, eine reine Front-End-Verifizierungscodefunktion zu erstellen, also suchte ich online und fand ein Plug-in namens gVerify.js, das einfach, benutzerfreundlich und perfekt implementiert ist. Später erhielt ich jedoch eine Nachricht, dass es mit IE8 kompatibel sei, was mich allein beim Gedanken daran betrunken machte. IE ist schrecklich, aber ich denke nicht daran, nach Plug-Ins zu suchen. Ich habe vor, es selbst zu machen und es zum Lernen und Festigen meines Wissens zu verwenden. Sehen Sie unten, wie ich es gemacht habe. Es hat eine Weile gedauert, aber es hat sich gelohnt.
Verwendung
Definieren Sie ein P-Bestätigungscode-Eingabefeld, führen Sie das heruntergeladene js-Plug-in ein und Erstellen Sie ein GVerify-Objekt. Die Parameter können angepasst werden oder die ID von p übergeben werden. Dadurch wird ein Bestätigungscode generiert und der Effekt ist in Abbildung 1-1 unten dargestellt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<body>
<p id="v_container" style="width: 200px;height: 50px;"></p>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
</body>
<script src="js/gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>
Abbildung 1-1
Der Effekt ist ziemlich gut, fertig. Es war in wenigen Minuten erledigt und es gab keine Probleme beim Klicken in verschiedenen Browsern. Aber sobald ich zum IE komme, ist GG9 immer noch nützlich, aber IE8 ist nutzlos, ich kann nur sehen, wie es implementiert ist. Also habe ich den Quellcode geöffnet und festgestellt, dass er von Canvas implementiert wurde, was von IE8 und niedriger nicht unterstützt wird. Das war peinlich. Dann habe ich mir die entsprechende Einführung zum Canvas-Element angesehen und festgestellt, dass ich wirklich betrogen wurde. „Wir können sogar das 5ba626b379994d53f7acf72a64f9b697-Tag im IE verwenden und kompatible Canvases mit Open-Source-JavaScript-Code (gesponsert von Google) basierend auf der VML-Unterstützung des IE erstellen. Siehe: http://excanvas.sourceforge.net/.“ Als ich sah Bei diesem Satz hatte ich das Gefühl, einen Fehler gemacht zu haben, also lud ich sofort excanvas.js herunter und lud es auf die Seite, weil ich dachte, dass es ausreichen würde, ein js hinzuzufügen. Es stellte sich heraus, dass es wirklich gut funktionierte, und das tat ich auch Als ich die Ergebnisse überprüfte, stellte ich fest, dass es sich um IE11 handelte, etwas stimmte nicht! Also stellte ich mich auf IE8 um und stellte fest, dass es immer noch nicht funktionierte. Es war nicht so einfach, wie ich dachte. Also habe ich den Plug-in-Quellcode durchgesehen und keine Probleme festgestellt und es wurden keine Fehler gemeldet. Ich konnte also nur suchen, um herauszufinden, wo das Problem lag.
Änderung
Ich habe die Informationen überprüft und festgestellt, dass das Plugin „createelement()“ unter IE8 nicht unterstützt wird Fügen Sie es zuerst hinzu. Schreiben Sie das Canvas-Element auf die Seite. Also habe ich die Seite geändert und den Code geändert, um eine Leinwand zu erstellen. Und einige Kommentare zum Quellcode hinzugefügt. Die Verwendungsmethode hat sich wie folgt geändert:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<body>
<p id="v_container" style="width: 100px;height: 40px;position: relative;top: -61px;left: 230px;">
<canvas id="verifyCanvas" width="100" he.ight="40" style="cursor: pointer;"></canvas>
</p>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
</body>
<script src="js/gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>Der Quellcode wurde wie folgt geändert (rot ist der geänderte Teil) und Kommentare:
!(function(window, document) {
function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
this.options = { //默认options参数值
id: "", //容器Id
canvasId: "verifyCanvas", //canvas的ID
width: "100", //默认canvas宽度
height: "30", //默认canvas高度
type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
for(var i in options) { //根据传入的参数，修改默认参数值
this.options[i] = options[i];
}
}else{//传入单个对象就是id
this.options.id = options;
}
this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");//数字
this.options.letterArr = getAllLetter();//生成字母数组
this._init();//初始化
this.refresh();//生成验证码
}
GVerify.prototype = {
/**版本号**/
version: '1.0.0',
/**初始化方法**/
_init: function() {
var con = document.getElementById(this.options.id);//获得验证码的p
var canvas = document.getElementById(this.options.canvasId);//获得画布 IE不能支持canvas，可以增加excanvas.js插件，但是还是不支持createelement()的形式
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";//如果有宽度就使用自己的，没有就默认100
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";//如果有长度就使用自己的，没有就默认30
// canvas.id = this.options.canvasId;//为兼容IE把这些去掉
// canvas.width = this.options.width;
// canvas.height = this.options.height;
// canvas.style.cursor = "pointer";
// canvas.innerHTML = "您的浏览器版本不支持canvas";
// con.appendChild(canvas);
var parent = this;//把this赋值parent
canvas.onclick = function(){//验证码点击切换刷新
parent.refresh();
}
},
/**生成验证码**/
refresh: function() {
this.options.code = "";//定义验证码为""
var canvas = document.getElementById(this.options.canvasId);//获得验证码画布
if(canvas.getContext) {//
var ctx = canvas.getContext('2d');//获得绘画对象
}else{//
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);//绘制矩形
/* x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度*/
if(this.options.type == "blend") { //判断验证码类型 blend:数字字母混合类型、number:纯数字、letter:纯字母
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
for(var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)];//取得一个字符
this.options.code += txt;//连接验证码
ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
ctx.fillStyle = randomColor(50, 160); //填充的样式 随机生成字体颜色
ctx.shadowOffsetX = randomNum(-3, 3);//阴影的横向位移量
ctx.shadowOffsetY = randomNum(-3, 3);//阴影的纵向位移量
ctx.shadowBlur = randomNum(-3, 3);//阴影的模糊范围（值越大越模糊）
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";//阴影的颜色
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/**设置旋转角度和坐标原点
*
* 平移context.translate(x,y)
* x:坐标原点向x轴方向平移x
* y:坐标原点向y轴方向平移y
*
* **/
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);//旋转context.rotate(angle)
ctx.fillText(txt, 0, 0);//context.fillText(text,x,y)
/**恢复旋转角度和坐标原点**/
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**绘制干扰线**/
for(var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180);//随机颜色
ctx.beginPath();//路径 context.beginPath()
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));//绘制线段 context.moveTo(x,y) context.lineTo(x,y)
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke();
}
/**绘制干扰点**/
for(var i = 0; i < this.options.width/4; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);// 圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
ctx.fill();
}
},
/**验证验证码**/
validate: function(code){
var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase();
//console.log(v_code);
if(code == v_code){
return true;
}else{
this.refresh();
return false;
}
}
}
/**生成字母数组**/
function getAllLetter() {
var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
return letterStr.split(",");
}
/**生成一个随机数**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;//设置为window对象
})(window, document);Zusammenfassung
1. Um den Canvas des IE zu unterstützen, muss wxcanvas.js eingeführt und der Quellcode geändert werden, um das Canvas-Element zu erhalten.
2. Fügen Sie p- und Canvas-Elemente zum HTML hinzu.
Zeig mir noch einmal meinen Bestätigungscode, haha
Das obige ist der detaillierte Inhalt vonReiner JS-Code zur Implementierung der Bildverifizierungscodefunktion (kompatibel mit IE6-8). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!