• 首页
  • 狐文
  • 狐图
  • About
狐窝
OvO
  1. 首页
  2. 未分类
  3. 正文

利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

2017年08月07日 75点热度 0人点赞 0条评论

2016.08.09 00:21 from---http://www.jianshu.com/p/7ed519854be7

对WebElement截图

WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素。若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了。

WebDriver.PhantomJS自带的方法支持对整个网页截屏。

下面提供几种思路。

方式一

针对WebDriver.Chrome

通过WebDriver的js脚本注入功能,曲线救国。

  1. 注入第三方html转canvas的js库(见下方推荐)
  2. 获取元素html源码
  3. 将html转换为canvas
  4. 下载canvas

优点: 截取长图容易实现

缺点: 加载第三方库耗费时间,转换原理请参考这篇文章:

将 DOM 对象绘制到 canvas 中

方式二

针对WebDriver.Chrome

截取全图,自行裁剪、拼接

  1. 获取元素位置、大小
  2. 获取窗口大小
  3. 截取包含元素的窗口
  4. 进行相应的裁剪和拼接。

具体算法思路很清晰,但需要注意的细节较多。这里就不在赘述。示例代码请移步:

[Github]PythonSpiderLibs

优点: 不需太多js工作,python+少量js代码即可完成

缺点: 拼接等工作会被WebDriver的实现差异、图片加载速度等因素影响,需多加注意。 在保证截图质量的情况下,速度较慢

方式三

针对WebDriver.PhantomJS

由于接口实现的差异,PhantomJS相比于Chrome,可以截取到整个网页。所以获取指定元素的截图也就简单很多

  1. 截取网页全图
  2. 裁剪指定元素
    driver = webdriver.Chrome()
    driver.get('http://stackoverflow.com/')
    driver.save_screenshot('screenshot.png')
    
    left = element.location['x']
    top = element.location['y']
    right = element.location['x'] + element.size['width']
    bottom = element.location['y'] + element.size['height']
    
    im = Image.open('screenshot.png') 
    im = im.crop((left, top, right, bottom))
    im.save('screenshot.png')

    优点: 实现简单

    缺点: 对于高度太高的页面会导致文件过大,处理会有问题,我测试的最大图片尺寸是12.8M。

    解决图片加载不完整的问题

    参考: 利用 Python + Selenium 自动化快速截图

    我们先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图。这样可以解决像上面那种按需加载图片的情况。

from selenium import webdriver
import time

def take_screenshot(url, save_fn="capture.png"):
    browser = webdriver.Firefox() # Get local session of firefox
    browser.set_window_size(1200, 900)
    browser.get(url) # Load page
    browser.execute_script("""
        (function () {
            var y = 0;
            var step = 100;
            window.scroll(0, 0);

            function f() {
                if (y < document.body.scrollHeight) {
                    y += step;
                    window.scroll(0, y);
                    setTimeout(f, 100);
                } else {
                    window.scroll(0, 0);
                    document.title += "scroll-done";
                }
            }

            setTimeout(f, 1000);
        })();
    """)

    for i in xrange(30):
        if "scroll-done" in browser.title:
            break
        time.sleep(10)

    browser.save_screenshot(save_fn)
    browser.close()

if __name__ == "__main__":

    take_screenshot("http://codingpy.com")

不同wewbdriver对某些方法的实现不同

Chrome和PhantomJS 的接口差异

抓知乎时的坑,

  1. Chrome用WebElement.text可以正常得到值,用PhantomJS只能用 WebElement.get_attribute('innerHTML')
  2. WebDriver.Chrome截图只能截当前屏幕区域。WebDriver.PhantomJS截图可以获取整个页面的长图。

其它还有一些坑等待发现

推荐

  1. html2canvas库
  2. 将 DOM 对象绘制到 canvas 中
  3. 利用 Python + Selenium 自动化快速截图

作者:斯科特安
链接:http://www.jianshu.com/p/7ed519854be7
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签: 暂无
最后更新:2017年08月07日

OvO

狐狸

点赞
< 上一篇
下一篇 >
最新 热点 随机
最新 热点 随机
钛备份或小米系统备份功能备份出来的APK无法正常还原 BBR安装启用 安装docker mitmproxy 调试方法 Android SDK 版本选择 Perdition Mail代理服务器配置 HAProxy SSL代理 Openssl 中间人SSL代理 Stunnel SSL to SSL代理 NGINX反代IMAP配置 各种设备User Agent Torrent下载工具推荐 用 rar2john+hashcat 破解 RAR 文件密码 2020最好的Linux发行版 关闭新版chrome工具栏上拼图图标 Office 下载、安装、激活,有它就够了! Android 非官方的发行版 openwrt添加autoconf-archive
NGINX反代IMAP配置Stunnel SSL to SSL代理Openssl 中间人SSL代理HAProxy SSL代理Perdition Mail代理服务器配置Android SDK 版本选择mitmproxy 调试方法安装dockerBBR安装启用钛备份或小米系统备份功能备份出来的APK无法正常还原
各种设备User Agent Oracle 12c 使用scott等普通用户的方法 MyBatis3 用log4j在控制台输出 SQL 离线导出Chrome浏览器中保存的密码 Mysql设置允许外网访问(图文) OpenWrt之quilt打补丁 利用iptables防止ssh暴力破解和控制网速 PyCharm下打包py程序成exe linux后台运行和关闭、查看后台任务 动态网页数据抓取踩坑分享 开源中最好的Web开发的资源 SQL Server中利用正则表达式替换字符串 wordpress文件系统结构 Git 设置网络代理 tmux:适用于重度命令行 Linux 用户的终端复用器 Word VBA批量格式转换:docx转pdf、doc、rtf、txt以及反向转换 OpenSSH 服务器的 20 个最佳实践 使用Xorg.conf 修改分辨率
标签聚合
镜像 yum linux ssl 路由 网卡 密码 chrome 下载 https chromium git docker blog e 安装

COPYRIGHT © 2020 狐窝. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS