Python+Seleniumによるページの指定要素のスクリーンショット(スクリーンショット可能要素)

スコットアンの時間
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よりもウェブページ全体を切り取ることができます.指定した要素のスクリーンショットを取得するのも簡単です

ページ全図

を切り取る

指定要素

を切り取る

    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のインタフェースの違い
時を知る穴をつかんで、

ChromeはWebElement.textで正常に値を得ることができ、PhantomJSではWebElement.get_attribute('innerHTML')

しか使えない.

WebDriver.Chromeスクリーンショットは現在の画面領域のみを切り取ることができます.WebDriver.PhantomJSのスクリーンショットでは、ページ全体の長い図を取得できます.

他にも発見を待つ穴があります
推奨

html 2 canvasライブラリ

DOMオブジェクトをcanvasの

に描画

Python+Selenium自動化高速スクリーンショット