注意： 这篇文章的处理滑块验证码跟平时的不一样，并不是简单的一张背景图，一张滑块图计算滑块的缺口位置。最近由中国音像与数字出版协会举办的2020中国游戏十强投票开始，老大问我能不能搞个自动无限投票，我打开网址操作了一番，感觉简直不要太简单，直接说这个自动化爬虫还不是几分钟的事情，完全没什么技术难点呀，分分钟给他莫的网站投爆。尴尬的是写到自动化识别滑块验证码的时候。却发现该滑块验证码是由canvas绘制而成，而不是以往的两张图片进行识别。虽然说有点小阻碍。但是想法总比困难多，在我天马行空的想法下，几分钟也就搞定了这个难点。

目录

一、分析网站

二、canvas滑块验证码

三、验证流程

 

私信小编01即可获取大量Python学习资料

一、分析网站

• 2020十强游戏投票网址: http://2020top10.cgigc.com.cn
• 首先发现该网站需要填写姓名、手机号、邮箱，这…我一头黑线，网络上还有这操作去确定一个人的身份真实还是不真实? 中国音像与数字出版协会你可长点心吧，你们技术是烂大街了吧，我都不好意思点破，好歹搞个微信授权登陆呀，这样就算刷票也只能去买量
• 我们继续分析网站，不去纠结人家的技术怎么样，这里姓名、手机号、邮箱我们都可以自动生成，最关键的就是在下一步点击开始投票的时候，需要验证滑块验证码

二、canvas滑块验证码

①、背景canvas

• 我是为了直接展示验证码这个环节，所以姓名是瞎写的，我们自动生成姓名的时候为了真实，一定要以百家姓为基础去随机生成
• 如果想看如何生成随机姓名、手机号、邮箱请参考: python生成随机姓名、手机号、邮箱
• 首先我们看下背景canvas，可以看到dom元素是canvas，这里就尴尬了，跟一般的图片滑块验证码不一样，我们如果处理canvas滑块呢，其实想通了处理起来会比平时的图片滑块验证码简单了好几倍不止
• 思路肯定是要将canvas的图片给爬下来，但是很多初学者到这里就尴尬了，他不知道怎么去下载canvas图片，这个后面会提到，暂时先不赘述

②、滑块canvas

• 看dom选中的蓝色区域，其实就是滑块canvas，这里可以跟平时仅仅是一张图片的滑块有很大不同，可以看出滑块canvas其实是一张png透明图片，而这张图片的大小刚好与背景的大小一摸一样，这张图片上绘制了滑块的正确位置，我们移动滑块的时候，其实是移动的整张透明的png图片，当这个图片与背景重合的时候，透明图片上的滑块刚好对应了背景中的滑块的区域，也就是识别成功
• 知道了这点，我们就知道为什么会比普通的滑块验证码处理起来更加的简单，因为普通滑块需要识别滑块和背景图的缺口，但是这个canvas滑块呢，其实只需要识别透明的滑块canvas上的滑块左端距离透明图片的左端像素是多少，就是需要移动多少距离，这么说可能有点绕，我下面画个图理解一下
• 而且因为他是透明的png图片，经过颜色反转之后，只有滑块的地方有像素，这就更好识别了，直接找到有像素的最小距离即可

三、验证流程

①、下载滑块canvas

def download_yzm(self):
   js = '''
        return document.getElementById('puzzle-lost').toDataURL()
    '''
    base64str = self.driver.execute_script(js)
    resultstr = base64str.strip("data:image/png;base64")
    resultstr = resultstr[1:]
    imagedata = base64.b64decode(resultstr)
    file = open('./bg.png', "wb")
    file.write(imagedata)
    file.close()

• 经过上面分析，其实我们不需要管背景，只要处理滑块canvas即可，首先需要将其下载下来
• 而学过javascript的小伙伴都知道canvas有个方法toDataURL可以将canvas转化为base64编码的格式，我们所需要做的就是将base64的编码格式保存成最终的png图片，以供后期识别

②、识别滑块canvas中有像素位置

def handler_yzm(self, image):
    im = Image.open(image)
    im = im.convert('L')
    w, h = im.size
    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

• 使用Image模块处理图片后，找有像素的最小x轴位置，因为是找x轴，所以从0的位置到图片最大宽度的位置进行循环，找y轴有像素的最小位置
• 找到之后，即是滑块左端距离图片左端的位置，也就是最终需要滑动的位置，最后结果为啥要减去10个像素呢，是因为分析实际情况，距离差10个像素，看下面红框的位置

③、最后

• 大家应该都会接下来的自动化操作流程了，希望大家看完后觉得有帮助的，给博主点个关注