实测 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 = "return document.getElementById('puzzle-lost').toDataURL()"
    base64_str = self.browser.execute_script(js)
    # 打印 base64_str
    print(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
1
2
3
4
5
6
7
8
9
10
11

   二、通过用获取带原色的小滑块去和原图缺口的小方块对比，并计算缺口最左端离原图最左端的距离，例如得出的 result 为 190, 实际移动距离为 190 - 10 = 180， 如 图4 可知，滑轨的最左端距离原图的最左端为10px，核心代码如下：

  def analyse_gap(self,image):
    im = Image.open(image)
    im = im.convert('L')
    w, h = im.size
    print(w,h)
    result = 0
    for x in range(w):
        if result != 0:
            break
        for y in range(h):
            if im.getpixel((x, y)) > 0:
                result = x
                break
    return result - 10
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

图1

图2

图3

图4