svg验证码识别方法研究

svg验证码识别方法研究

svg验证码

svg标签：SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。

在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。

在svg验证码中，有好几个<path>标签。<svg>的<path>元素用于定义一些复杂的图形。它可以结合使用直线，曲线等来制作各种不规则的图形。<path>元素是SVG基本图形中最为复杂的一个。

所有的绘制工作都是在<path>中完成的，对于<path>中的众多属性，解释如下：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

从上面不难看出，svg验证码大致生成的流程就是通过对应的画图命令加上关键点，从而将验证码画出来。

简单分析

svg-captcha项目地址

首先，我们先在本地安装svg-captcha：

npm install --save svg-captcha

使用下面命令，就可以创建一个随机的四位svg验证码：

var svgCaptcha = require('svg-captcha');
var captcha = svgCaptcha.create();

使用console.log(captcha)得到如下内容：

{
  text: 'V0ji',
  data: '<svg xmlns="http://www.w3.org/2000/svg" width="150" height="50" viewBox="0,0,150,50"><path d="M5 3 C62 22,85 39,138 43" stroke="#777" fill="none"/><path fill="#333" d="M79.76 47.10L79.68 47.02L79.74 47.08Q78.82 47.30 76.92 47.61L76.95 47.64L76.83 47.52Q78.11 45.34 79.14 44.04L79.30 44.21L79.18 44.08Q81.02 44.48 81.17 44.48L81.09 44.39L81.03 44.34Q81.33 44.40 81.86 44.29L82.01 44.44L81.89 44.32Q82.60 44.27 82.79 44.27L82.80 44.28L82.80 44.28Q85.36 44.03 85.29 41.86L85.32 41.89L85.36 41.92Q85.24 40.36 85.13 34.12L85.20 34.20L85.05 34.04Q85.11 30.60 85.19 26.45L85.17 26.43L8
  .......
  '
}

我们将svg数据部分拷贝粘贴到html文件中，然后用浏览器打开，就可以看到了验证码：

对于svgCaptcha.create(options),如果没有任何参数，则生成的 svg 图片有4个字符。

• size: 4 // 验证码长度
• ignoreChars: '0o1i' // 验证码字符中排除 0o1i
• noise: 1 // 干扰线条的数量
• color: true // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
• background: '#cc9966' // 验证码图片背景颜色

该函数返回的对象拥有以下属性

• data: string // svg 路径
• text: string // 验证码文字

除此之外，在生成验证码的时候还可以设置字符对应的字体等一些操作，感兴趣的读者可以到此项目了解一下。

我们可以通过svgCaptcha('1234')命令生成指定字符串的验证码。当我们多次生成相同字符串的验证码时，如下图(连续生成了三次的相同字符串的验证码)：

好像除了干扰线不同之外，数字似乎位置和形状都相同。

如果我们将1234 的数字调换，再生成一次看看:

var svgCaptcha = require('svg-captcha');
for (i = 0; i < 3; i++) {
  console.log(svgCaptcha('1234') )
  console.log(svgCaptcha('3124'))
  console.log(svgCaptcha('1423') + '<br>')
}

其实可以发现数字即便在位置发生变化时，样式也没有变。

当我们给验证码开启了随机颜色后，也是如此：

我们继续分析，如果把<svg>中的<path>拆分，进行对比，会有什么效果呢。

import re
svg_data = '''
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="50" viewBox="0,0,150,50"><path fill="#e9e943" d="M82.50 40.25L82.52 40.27L82.59 40.34Q81.18 40.41 79.62 39.99L79.69 
    ......
'''