简单实现图片验证码

近年来有很多网站抛弃了字符验证码，采用了图片验证的方式。新浪博客的评论区域，一些直播平台都是这样。

查询他们的验证码区域代码，很容易发现这个的关键字：geetest 。后来了解到，这些都是采用一家名为极验验证的公司解决方案。这是极验验证的官网：http://www.geetest.com/

极验验证提供了好多套餐，以收费的方式解决验证的问题。想着自己实现个差不多的功能的。

最简单的情况：一个动态页面完成整个过程，后台语言产生随机数，存在session中；Js中获取，利用canvas的对图片进行截取，拖动的时候判断。

效果：

简单实现图片验证码

贴出代码:注意，这是个php文件，要在服务器环境运行。注意图片的路径。

 1 <!doctype html>
 2 <?php
 3 ini_set("session.cookie_domain",'localhost');
 4 session_start();
 5 // store session data
 6 $i=rand(8,30)/10;
 7 $_SESSION['x']=$i;
 8 ?>
 9 <html>
10 <head>
11 <meta charset="utf-8">
12 <title>无标题文档</title>
13 <style>
14 body{text-align:center;}
15 #canvas{diaplay:block;margin:0 auto;border:1px #00FF00 solid;}
16 input{display:block;margin:20px auto;width:300px;}
17 </style>
18 </head>
19 <body>
20 <?php
21 //retrieve session data
22 echo "x=". $_SESSION['x']
23 ?>
24 <div>
25     <canvas id="canvas">你的浏览器不支持canvas </canvas>
26     <input type="range" id="scale-range" min="0.0" max="3.0" step="0.1" value="0.0">
27     <div id="div1"></div>
28 </div>
29 
30 <script>
31     var session=<?php echo $_SESSION['x']?>;//这么写对的
32     var canvas=document.getElementById('canvas');
33     var context=canvas.getContext("2d");
34     var image=new Image();
35     var slider=document.getElementById("scale-range");
36     var div1 = document.getElementById('div1');
37     window.onload=function(){
38         canvas.width=400;
39         canvas.height=200;
40         var scale=slider.value;
41         image.src="images/lyf.jpg";
42         image.onload=function(){
43             //context.drawImage(image,0,0,canvas.width,canvas.height);
44             
45             getRect(image,session,scale);
46             clearRect(image,session);
47             
48             slider.onmousemove=function(){
49                 
50                 
51                 getRect(image,session,scale);
52                 clearRect(image,session);
53                 
54                 scale=slider.value;
55                 div1.innerHTML=scale;
56                 if(scale==session)
57                 {    
58                     clearRect(image,session);
59                     getRect(image,session,scale);
60                     div1.innerHTML="<strong>恭喜你验证通过！！！！！！！！</strong>";
61                     slider.onmousemove = null;
62                     slider.disabled = true;
63                     }
64             }
65         }
66     }
67     function getRect(image,session,scale){
68          context.drawImage(image,0,0,canvas.width,canvas.height);
69          context.drawImage(image,session*100,canvas.height/2,80,80,scale*100,canvas.height/2,80,80)
70     }
71 
72     
73     function clearRect(image,session){
74         //context.drawImage(image,0,0,canvas.width,canvas.height);
75         context.clearRect(session*100,canvas.height/2,80,80);
76         
77     }
78 </script>
79 </body>
80 </html>

　　这么做其实是有问题的，因为别人可以通过工具获取session里的值，然后不管如何随机生成，都能知道这个值。所以，图片的生成应该放在后台实现，而不是用canvas。而图片又可以有很多张，供我们从中挑选。这样才是一个完整的图片验证，才能防止机器提交

简单实现图片验证码

相关推荐