Python+Seleniumによるページの指定要素のスクリーンショット(スクリーンショット可能要素)
3463 ワード
スコットアンの時間
WebElementのスクリーンショット
WebDriver.Chromeが独自の方法では、現在のウィンドウをスクリーンショットするだけで、特定の要素を指定することはできません.特定の要素を切り取ったり、ウィンドウが1画面を超えたりする必要がある場合は、別の道を開くしかありません.
WebDriver.PhantomJSが独自の方法で、Webページ全体のスクリーンショットをサポートします.
以下、いくつかの考え方を提供します.
方式一
WebDriver.に対してChrome
WebDriverのjsスクリプト注入機能により、曲線救国.サードパーティhtmlを注入canvasを転送するjsライブラリ(下の推奨を参照) 取得要素htmlソース htmlをcanvas に変換ダウンロードcanvas 利点:長図の切り取りが容易
欠点:サードパーティ製ライブラリのロードに時間がかかります.変換原理はこの記事を参照してください.
DOMオブジェクトをcanvasに描画する
方式2
WebDriver.に対してChrome
全図を切り取って、自分で裁断して、つなぎ合わせます要素の位置、サイズ を取得する.ウィンドウサイズ を取得する.要素を含むウィンドウ を切り取る.は、対応する裁断および接合を行う.
具体的なアルゴリズムの構想ははっきりしているが,注意すべき細部が多い.ここでは余計なことは言わない.サンプルコードを移動してください:
[Github]PythonSpiderLibs
利点:js作業をあまり必要とせず、python+jsコードを少量で完了
欠点:つなぎ合わせなどの作業はWebDriverの実現の違い、画像のロード速度などの要素に影響されますので、注意してください.スクリーンショットの品質を保証する場合、速度が遅い
方程式3
WebDriver.に対してPhantomJS
インタフェース実装の違いにより、PhantomJSはChromeよりもウェブページ全体を切り取ることができます.指定した要素のスクリーンショットを取得するのも簡単ですページ全図 を切り取る指定要素 を切り取る
異なるwewbdriverはいくつかの方法の実現に対して異なっています
ChromeとPhantomJSのインタフェースの違い
時を知る穴をつかんで、 Chromeは しか使えない. WebDriver.Chromeスクリーンショットは現在の画面領域のみを切り取ることができます.WebDriver.PhantomJSのスクリーンショットでは、ページ全体の長い図を取得できます.
他にも発見を待つ穴があります
推奨 html 2 canvasライブラリ DOMオブジェクトをcanvasの に描画 Python+Selenium自動化高速スクリーンショット
WebElementのスクリーンショット
WebDriver.Chromeが独自の方法では、現在のウィンドウをスクリーンショットするだけで、特定の要素を指定することはできません.特定の要素を切り取ったり、ウィンドウが1画面を超えたりする必要がある場合は、別の道を開くしかありません.
WebDriver.PhantomJSが独自の方法で、Webページ全体のスクリーンショットをサポートします.
以下、いくつかの考え方を提供します.
方式一
WebDriver.に対してChrome
WebDriverのjsスクリプト注入機能により、曲線救国.
欠点:サードパーティ製ライブラリのロードに時間がかかります.変換原理はこの記事を参照してください.
DOMオブジェクトをcanvasに描画する
方式2
WebDriver.に対してChrome
全図を切り取って、自分で裁断して、つなぎ合わせます
具体的なアルゴリズムの構想ははっきりしているが,注意すべき細部が多い.ここでは余計なことは言わない.サンプルコードを移動してください:
[Github]PythonSpiderLibs
利点:js作業をあまり必要とせず、python+jsコードを少量で完了
欠点:つなぎ合わせなどの作業はWebDriverの実現の違い、画像のロード速度などの要素に影響されますので、注意してください.スクリーンショットの品質を保証する場合、速度が遅い
方程式3
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。
####
: [ Python + Selenium ](http://codingpy.com/article/take-screenshot-of-web-page-using-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のインタフェースの違い
時を知る穴をつかんで、
WebElement.text
で正常に値を得ることができ、PhantomJSではWebElement.get_attribute('innerHTML')
他にも発見を待つ穴があります
推奨