标签归档:canvas

利用html5 canvas标签破解验证码 —待完善

0x00 思考

验证码破解第一步 识别图像的尺寸

<script>
function test(image_data){
 alert('宽度'+image_data.width+'高度'+image_data.height);
}
var img=new Image();
 
img.onload=function(){
	 test(img);
};
img.src="1.jpg"; //我是本地图片,你也可以放网络图片的
</script>

验证码破解第二步 把图片放到画布里去
将上面代码做以下改进

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script>
function test(image_data){
 var cav=document.getElementById("myCanvas"); //获取canvas的元素对象
 var ctx=cav.getContext("2d"); 
 ctx.drawImage(image_data,0,0); //把image_data图像显示在画布上
}
var img=new Image();
 
img.onload=function(){
	 test(img);
};
img.src="1.jpg"; //我是本地图片,你也可以放网络图片的
</script>

验证码破解第三步 分析验证码图片
啊啊啊,拖延症好严重啊,肿么办啊- –
1.验证码图片的底色是否会随机更换
2.验证码图片里面的字符位置是否一致(比如abcd字符串第一次居中,第二次跑到最右边,或者是居中)
3.验证码图片的字符颜色与底色像素值是否在一个很小的区间
4.字体是什么字体

当然还有更复杂的验证码,不在本文的讨论范围内.
我们就说说 最简单的验证码识别吧 – –
底色白色、字符颜色为黑色、字体正常的、字体居中。(假设验证码是数字)
要识别图片的数字可以把图片的4个数字,分层4块,然后每块根据像素点的值,猜解数字。思路清楚了,我们开始猜解之旅吧

验证码破解第四步 猜解数字

…. 留到下次写
最近开发有点忙不好意思啊,文章更新有点慢啊- –