实测 Canvas 绘制的缺口滑块验证

实测 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 = "ElementById('puzzle-lost').toDataURL()"base64_str = ute_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):pixel((x, y)) > 0:result = xbreakreturn result - 10

   三、计算到移动距离后，就可以在 class 里再创建一个移动滑块的方法去实现滑块验证完成。

图1

图2

图3

图4

实测 Canvas 绘制的缺口滑块验证