1、如何实现滑块拼图验证码高级版?
2、HTML代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>滑动拼图验证码高级版</title>
<link href="css/jigsawCanvas.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-4">
<div class="jigsaw" id="jigsaw">
<div class="imagebox" id="imagebox">
<canvas width="380" height="260" id=jigsawCanvas></canvas>
<div class="missblock" id="missblock"></div>
</div>
<div class="jigsawTrack" id="jigsawTrack">
<span class="jigsawCircle" id="jigsawCircle"></span>
<span class="jigsawTips" id="jigsawTips"><-合并滑块,完成拼图</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script scr='js/jquery-3.1.1-min.js'></script>
<script src='js/jigsawCanvas.js'></script>
</body>
</html>
3、Python代码:
from selenium import webdriver
import os
import time
from PIL import Image, ImageChops
# 1.访问网址
browser = webdriver.Chrome()
# url = r'E:\验证码反爬\高级滑动拼图验证码\index.html' # 自己用的话可以直接写这样的固定路径
current_dir = os.path.dirname(os.path.abspath(__file__)) # 获取代码所在的文件夹目录
url = current_dir + '/index.html' # 获取HTML文件的文件绝对路径
print('此时的文件路径为:' + url) # 打印此时的文件路径,所以如果文件位置固定,可以直接写url = r'文件路径'
browser.get(url) # 访问网址
time.sleep(2)
# 2.获取原始图片
browser.find_element_by_xpath('//*[@id="jigsawCanvas"]').screenshot('origin.png') # 获取原始图片
# 3.获取有缺口的图片
slider = browser.find_element_by_xpath('//*[@id="jigsawCircle"]') # 获取滑动按钮
slider.click() # 先模拟点击下,方便下面获取到有缺口的图片
browser.find_element_by_xpath('//*[@id="jigsawCanvas"]').screenshot('after.png') # 获取有缺口的图片
# 4.比较两幅图片的区别,获取需要移动的距离
image_a = Image.open('origin.png') # 打开原始图片
image_b = Image.open('after.png') # 打开有缺口的图片
#print(image_a)
#print(image_b)
x = ImageChops.difference(image_a, image_b).getbbox() # 比较两个图片的差别
print(x) # 举个例子:倘若x为:(226, 103, 277, 154);返回缺口对应的左边横坐标(由左往右看),上边纵坐标(由上往下看),右边横坐标,下边纵坐标
distance = x[0] # 第一个元素x[0]表示的就是缺口左边横坐标,也就是滑块需要移动的距离
print(distance) # 如果例子为:(226, 103, 277, 154),那么需要移动的距离为226
# 5.开始滑动!
action = webdriver.ActionChains(browser) # 启动Selenium的动作链
action.click_and_hold(slider).perform() # 按住滑动按钮不松开
action.move_by_offset(distance-10, 0) # 开始滑动!这里-10,是把初始圆角矩形左侧left属性值给减去了,这样更准确
action.release().perform() # 释放滑块
4、执行后报错,解决方案:
None
Traceback (most recent call last):
File "E:/tech/a.py", line 28, in <module>
distance = x[0] # 第一个元素x[0]表示的就是缺口左边横坐标,也就是滑块需要移动的距离
KeyboardInterrupt
Process finished with exit code 1
查找资料发现是
对于Image.open()函数默认真彩图像读取通道顺序为RGB,而cv2.imread()则是BGR。同时,当图像格式为RGBA时,Image.open(‘—.jpg’)读取的格式为RGBA(其中A表示图像的alpha通道,即RGBA共四个通道),而cv2.imread(‘—.jpg’)读取的格式是BGR,只有三个通道
要加上:
image_a = Image.open('origin.png').convert('RGB') # 打开原始图片
image_b = Image.open('after.png').convert('RGB') # 打开有缺口的图片
5、完整代码,修改后如下:
from selenium import webdriver
import os
import time
from PIL import Image, ImageChops
# 1.访问网址
browser = webdriver.Chrome()
# url = r'E:\验证码反爬\高级滑动拼图验证码\index.html' # 自己用的话可以直接写这样的固定路径
current_dir = os.path.dirname(os.path.abspath(__file__)) # 获取代码所在的文件夹目录
url = current_dir + '/index.html' # 获取HTML文件的文件绝对路径
print('此时的文件路径为:' + url) # 打印此时的文件路径,所以如果文件位置固定,可以直接写url = r'文件路径'
browser.get(url) # 访问网址
time.sleep(2)
# 2.获取原始图片
browser.find_element_by_xpath('//*[@id="jigsawCanvas"]').screenshot('origin.png') # 获取原始图片
# 3.获取有缺口的图片
slider = browser.find_element_by_xpath('//*[@id="jigsawCircle"]') # 获取滑动按钮
slider.click() # 先模拟点击下,方便下面获取到有缺口的图片
browser.find_element_by_xpath('//*[@id="jigsawCanvas"]').screenshot('after.png') # 获取有缺口的图片
# 4.比较两幅图片的区别,获取需要移动的距离
image_a = Image.open('origin.png').convert('RGB') # 打开原始图片
image_b = Image.open('after.png').convert('RGB') # 打开有缺口的图片
#print(image_a)
#print(image_b)
x = ImageChops.difference(image_a, image_b).getbbox() # 比较两个图片的差别
print(x) # 举个例子:倘若x为:(226, 103, 277, 154);返回缺口对应的左边横坐标(由左往右看),上边纵坐标(由上往下看),右边横坐标,下边纵坐标
distance = x[0] # 第一个元素x[0]表示的就是缺口左边横坐标,也就是滑块需要移动的距离
print(distance) # 如果例子为:(226, 103, 277, 154),那么需要移动的距离为226
# 5.开始滑动!
action = webdriver.ActionChains(browser) # 启动Selenium的动作链
action.click_and_hold(slider).perform() # 按住滑动按钮不松开
action.move_by_offset(distance-10, 0) # 开始滑动!这里-10,是把初始圆角矩形左侧left属性值给减去了,这样更准确
action.release().perform() # 释放滑块
执行后验证通过: