selenium模拟点击拖动canvas

本质上是调用鼠标模拟点击的模块 ActionChains ，实现 点击不松开 -> 模拟移动鼠标 -> 松开鼠标 的这么一个操作。这里依然以 迅捷图片 作为示范

 

 

1. 打开网站并上传图片(index)

依然使用selenium打开网站，相比之前要多引入 ActionChains 模块，用来模拟点击。

from selenium import webdriver # 模拟点击的模块 from selenium.webdriver.common.action_chains import ActionChains browser = webdriver.Firefox() # 使用浏览器访问网址 browser.get('http://app.xunjietupian.com/crop') 

 

接下来手动上传图片，自动上传图片的的教程可以看我之前写的博客 《python+Selenium+AutoIT上传本地资源》
现在的页面应该是这个样子(这是一个锚点)

2. 实现模拟点击

这一步的作用实际上是为了定位，用来查看当前鼠标在哪个位置。这里分为两步：

1. 获取图片所在的元素
2. 执行点击

第一步 ：通过阅读源码，可以得到该元素的classname，直接获取该对象

canvas = browser.find_element_by_class_name('upper-canvas') 

 

第二步 ：使用下列函数进行模拟点击：

# 首先设置点击的坐标 x = 300 y = 300 # 执行点击操作 ActionChains(browser).move_to_element_with_offset(canvas,x,y).context_click().perform() 

 

• move_to_element_with_offset 指的是鼠标在canvas(画布)上移动到(x,y)的位置
• context_click 指的是右键点击
• perform 是执行前面的所有操作

就可以得到如下结果：

弹出菜单的位置就是坐标为(300,300)的那个点了。如果要用鼠标左键的话，将 context_click 修改为 click 就可以了。

3. 实现模拟拖拽

除了 context_click 、 click 之外，还有一个函数 click_and_hold ，意思是点击后不松开，这也就是要实现截图的主要函数了。接下来的代码分成三个步：

1. 点击并不松开
2. 移动鼠标
3. 松开鼠标

第一步 ：将点击函数替换成 click_and_hold 即可

ActionChains(browser).move_to_element_with_offset(canvas,200,200).click_and_hold().perform() 

 

第二步 ：执行 move_by_offset 函数，将鼠标在之前的基础上移动xoffset,yoffset的距离

ActionChains(browser).move_by_offset(xoffset=300,yoffset=200).perform() 

 

第三步 ：执行 release 即可

ActionChains(browser).release().perform() 

 

顺序执行后，就可以看到裁剪框出现了。

4. 完整代码

from selenium import webdriver import os import time from selenium.webdriver.common.action_chains import ActionChains browser = webdriver.Firefox() # 使用浏览器访问网址 browser.get('http://app.xunjietupian.com/crop') 

 

从这里开始手动上传图片，达到 这样 的效果
接下来执行以下代码

canvas = browser.find_element_by_class_name('upper-canvas ') ActionChains(browser).move_to_element_with_offset(canvas,200,200).click_and_hold().perform()
ActionChains(browser).move_by_offset(xoffset=300,yoffset=200).perform()
ActionChains(browser).release().perform()

 

转：https://www.pythonf.cn/read/99311