缺口滑块验证"/>
实测 Canvas 绘制的缺口滑块验证
Canvas是HTML5的一个新特性,又叫做画板。我们可以在canvas上绘制我们需要的图形。Canvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像的HTML元素。Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。
在之前博客介绍了怎样解决显式滑块缺口的移动距离计算,这次将大概介绍由 Canvas绘制的缺口滑块验证的方法。
从 图1(Canvas) 和 图2 中可见,都是等面积的矩形 ( width= 260, height=120 )
一、首先下载 在 Canvas 画布中的小滑块, 图3 ,可以通过执行 Java-Script 的 toDataURL()方法,去提取base64 加密后的二进制编码。获取二进制编码后,可用通过反编码,还原真实的图片,具体可以参考我之前的博客,核心代码如下:
def get_color_pic(self):js = "return document.getElementById('puzzle-lost').toDataURL()"base64_str = self.browser.execute_script(js)# 打印 base64_strprint(base64_str) result_str = base64_str.strip("data:image/png;base64")result_str = result_str[1:]image_data = base64.b64decode(result_str)file = open('bg.png', "wb")pic = file.write(image_data)return pic
二、通过用获取带原色的小滑块去和原图缺口的小方块对比,并计算缺口最左端离原图最左端的距离,例如得出的 result 为 190, 实际移动距离为 190 - 10 = 180, 如 图4 可知,滑轨的最左端距离原图的最左端为10px,核心代码如下:
def analyse_gap(self,image):im = Image.open(image)im = im.convert('L')w, h = im.sizeprint(w,h)result = 0for x in range(w):if result != 0:breakfor y in range(h):if im.getpixel((x, y)) > 0:result = xbreakreturn result - 10
三、计算到移动距离后,就可以在 class 里再创建一个移动滑块的方法去实现滑块验证完成。
图1
图2
图3
图4
实测 Canvas 绘制的缺口滑块验证
更多推荐
实测 Canvas 绘制的缺口滑块验证
发布评论