近年来有很多网站抛弃了字符验证码，采用了图片验证的方式。新浪博客的评论区域，一些直播平台都是这样。
查询他们的验证码区域代码，很容易发现这个的关键字：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;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。而图片又可以有很多张，供我们从中挑选。这样才是一个完整的图片验证，才能防止机器提交