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

对WebElement截图

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

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

下面提供几种思路。

方式一

针对WebDriver.Chrome

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

注入第三方html转canvas的js库(见下方推荐)

获取元素html源码

将html转换为canvas

下载canvas

优点: 截取长图容易实现

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

方式二

针对WebDriver.Chrome

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

获取元素位置、大小

获取窗口大小

截取包含元素的窗口

进行相应的裁剪和拼接。

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

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

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

方式三

针对WebDriver.PhantomJS

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

截取网页全图

裁剪指定元素

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。

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

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

# -*- coding: utf-8 -*-

from selenium import webdriver

import time

def take_screenshot(url, save_fn="capture.png"):

# browser = webdriver.Firefox() # Get local session of firefox

#谷歌浏览器截取当前窗口网页

chromedriver = r"C:\soft\chromedriver2.31_win32\chromedriver.exe"

browser = webdriver.Chrome(chromedriver)

#phantomjs截取整张网页

# browser = webdriver.PhantomJS()

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")

如何截取某个网页元素

有时候我们只想截取某个网页元素的图片呢？比如说会动态变化的验证码。本来 Selenium 也提供了对元素截图的支持，只要在选中的元素上调用其 screenshot() 方法即可。

但是在实际使用时却遇到了 Unrecognized command 这个异常，经过一段时间检索也没有找到解决办法。所以，只能曲线救国，利用 Selenium 执行JS代码，将页面上不需要的元素一一删除，只保留我们希望留下的元素，然后再利用上面的窗口截屏功能。

例如，如果我们只截取编程派网站右侧的二维码，可以执行这样一段JQuery代码：

$('#main').siblings().remove();

$('#aside__wrapper').siblings().remove();

$('.ui.sticky').siblings().remove();

$('.follow-me').siblings().remove();

$('img.ui.image').siblings().remove();

代码执行完毕之后，就只剩下二维码的图片了。然后我们再截屏。不过这样有一点不好，就是截屏图片的下方会有大量空白内容。

代码

# -*- coding: utf-8 -*-

from selenium import webdriver

import time

def take_screenshot(url, save_fn="capture.png"):

# browser = webdriver.Firefox() # Get local session of firefox

chromedriver = r"C:\soft\chromedriver2.31_win32\chromedriver.exe"

browser = webdriver.Chrome(chromedriver)

# browser = webdriver.PhantomJS()

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)

#只截取编程派网站右侧的二维码，可以执行这样一段JQuery代码：siblings().remove()移除兄弟姐妹元素

browser.execute_script("""

$('#main').siblings().remove();

$('#aside__wrapper').siblings().remove();

$('.ui.sticky').siblings().remove();

$('.follow-me').siblings().remove();

$('img.ui.image').siblings().remove();

""")

browser.save_screenshot(save_fn)

browser.close()

if __name__ == "__main__":

take_screenshot("http://codingpy.com/article/take-screenshot-of-web-page-using-selenium/")

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

Chrome和PhantomJS 的接口差异

抓知乎时的坑，

Chrome用WebElement.text可以正常得到值，用PhantomJS只能用 WebElement.get_attribute('innerHTML')

WebDriver.Chrome截图只能截当前屏幕区域。WebDriver.PhantomJS截图可以获取整个页面的长图。

其它还有一些坑等待发现

python selenium截图_利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)...相关推荐

python截长图_利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)
对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...
python如何截长图_利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)...
对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...
python高斯求和_利用Python进行数据分析(3)- 列表、元组、字典、集合
本文主要是对Python的数据结构进行了一个总结,常见的数据结构包含:列表list.元组tuple.字典dict和集合set. image 索引左边0开始,右边-1开始通过index()函数查看索 ...
怎么用python编写记事本_利用Python开发实现简单的记事本
利用Python开发实现简单的记事本最近想对 python 加深学习一下,同时也是想试着做一些东西,所以使用 python, 结合 Tkinter 来做一个简单的跨平台记事本.最终实现的记事本如下, ...
python扫雷脚本_利用 Python 实现自动扫雷小脚本
原标题:利用 Python 实现自动扫雷小脚本自动扫雷一般分为两种,一种是读取内存数据,而另一种是通过分析图片获得数据,并通过模拟鼠标操作,这里我用的是第二种方式.一.准备工作1.扫雷游戏我是 ...
python照片墙地图_利用python生成照片墙的示例代码
PIL(Python Image Library)是python的第三方图像处理库,但是由于其强大的功能与众多的使用人数,几乎已经被认为是python官方图像处理库了.其官方主页为:PIL. PIL历 ...
python图色检测_利用python打开摄像头及颜色检测方法
最近两周由于忙于个人项目,一直未发言了,实在是太荒凉了....,上周由于项目,见到Python的应用极为广泛,用起来也特别顺手,于是小编也开始着手学习Python,-下面我就汇报下今天的学习成果吧小 ...
python音频聚类_利用python的KMeans和PCA包实现聚类算法
题目: 通过给出的驾驶员行为数据(trip.csv),对驾驶员不同时段的驾驶类型进行聚类,聚成普通驾驶类型,激进类型和超冷静型3类 . 利用Python的scikit-learn包中的Kmeans算法 ...
python mysql 分页_利用python对mysql表做全局模糊搜索并分页实例
在写django项目的时候,有的数据没有使用模型管理(数据表是动态添加的),所以要直接使用mysql.前端请求数据的时候可能会指定这几个参数:要请求的页号,页大小,以及检索条件. "&quo ...

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

python selenium截图_利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)...相关推荐

最新文章

热门文章