本申請涉及互聯(lián)網(wǎng)領(lǐng)域，具體而言，涉及一種網(wǎng)頁截圖方法和裝置。

背景技術(shù)：

對網(wǎng)頁進(jìn)行截圖是一種常用的用戶需求。有時用戶只需要截取網(wǎng)頁的一部分，常用的辦法是使用截圖工具(例如，QQ截圖)選定要截取的區(qū)域進(jìn)行截圖。在使用截圖工具對網(wǎng)頁部分區(qū)域進(jìn)行截圖時，由于是人工手動選擇截取區(qū)域，因此很難精確的確定截取區(qū)域的大小。如圖1所示，需要把圖中的矩形框區(qū)域進(jìn)行截取，且不能帶有白色邊框，使用截圖軟件進(jìn)行該操作時，需要用戶小心翼翼的進(jìn)行，才能完成，此外，截取的圖片邊緣容易產(chǎn)生“白邊”等噪音，從而需要使用PhotoShop等圖片修改工具進(jìn)行二次修改。

有些網(wǎng)頁的局部區(qū)域是一塊可滾動區(qū)域，如圖1中的矩形框區(qū)域，由于數(shù)據(jù)項太多，這里使用了滾動視圖，可以使用鼠標(biāo)移動滾動條進(jìn)行滾動查看。在這種情況下，如果需要截取圖1中滾動試圖中的所有內(nèi)容，現(xiàn)有的截圖軟件無法實現(xiàn)。

針對相關(guān)技術(shù)中無法對網(wǎng)頁中滾動視圖區(qū)域進(jìn)行截圖的問題，目前尚未提出有效的解決方案。

技術(shù)實現(xiàn)要素：

本申請的主要目的在于提供一種網(wǎng)頁截圖方法和裝置，以解決相關(guān)技術(shù)中無法對網(wǎng)頁中滾動視圖區(qū)域進(jìn)行截圖的問題。

為了實現(xiàn)上述目的，根據(jù)本申請的一個方面，提供了一種網(wǎng)頁截圖方法。該方法包括：接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷目標(biāo)HTML元素是否是滾動視圖；在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接多個截圖，作為待截圖區(qū)域的截圖。

進(jìn)一步地，在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖包括：對滾動前的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖；以及每按照預(yù)設(shè)距離滾動一次目標(biāo)HTML元素，并對滾動后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行一次截圖，直至目標(biāo)HTML元 素滾動至最底部。

進(jìn)一步地，分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖包括：獲取目標(biāo)元素框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框；獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置，其中，目標(biāo)屏幕為顯示網(wǎng)頁的屏幕；以及根據(jù)目標(biāo)元素框相對于目標(biāo)屏幕的位置、高度和寬度生成目標(biāo)HTML元素的可視區(qū)域的截圖。

進(jìn)一步地，判斷目標(biāo)HTML元素是否是滾動視圖包括：獲取目標(biāo)元素框的高度和寬度與目標(biāo)元素框內(nèi)框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框，目標(biāo)元素框內(nèi)框為目標(biāo)元素框中用于顯示目標(biāo)HTML元素的元素內(nèi)容的區(qū)域；分別比較目標(biāo)元素框的高度和內(nèi)框的高度，以及目標(biāo)元素框的寬度和內(nèi)框的寬度；如果目標(biāo)元素框的高度小于內(nèi)框的高度，和/或目標(biāo)元素框的寬度小于內(nèi)框的寬度，則確定目標(biāo)HTML元素是滾動視圖；以及如果目標(biāo)元素框的高度不小于內(nèi)框的高度且目標(biāo)元素框的寬度不小于內(nèi)框的寬度，則確定目標(biāo)HTML元素不是滾動視圖。

進(jìn)一步地，在接收目標(biāo)HTML元素之前，該方法還包括：在接收到截圖指令時，顯示網(wǎng)頁的HTML源文件，其中，截圖指令用于指示對網(wǎng)頁執(zhí)行截圖操作。

進(jìn)一步地，在接收目標(biāo)HTML元素之后，該方法還包括：在網(wǎng)頁中突出顯示目標(biāo)HTML元素對應(yīng)的區(qū)域。

為了實現(xiàn)上述目的，根據(jù)本申請的另一方面，提供了一種網(wǎng)頁截圖裝置。該裝置包括：接收單元，用于接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷單元，用于判斷目標(biāo)HTML元素是否是滾動視圖；截圖單元，用于在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接單元，用于拼接多個截圖，作為待截圖區(qū)域的截圖。

進(jìn)一步地，截圖單元包括：第一截圖模塊，用于對滾動前的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖；以及第二截圖模塊，用于每按照預(yù)設(shè)距離滾動一次目標(biāo)HTML元素，并對滾動后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行一次截圖，直至目標(biāo)HTML元素滾動至最底部。

進(jìn)一步地，截圖單元包括：第一獲取模塊，用于獲取目標(biāo)元素框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框；第二獲取模塊，用于獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置，其中，目標(biāo)屏幕為顯示網(wǎng)頁的屏幕；以及生成模塊，用于根據(jù)目標(biāo)元素框相對于目標(biāo)屏幕的位置、高度和寬度生成目標(biāo)HTML元素的可視區(qū)域的截圖。

進(jìn)一步地，判斷單元包括：第三獲取模塊，用于獲取目標(biāo)元素框的高度和寬度與目標(biāo)元素框內(nèi)框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框，目標(biāo)元素框內(nèi)框為目標(biāo)元素框中用于顯示目標(biāo)HTML元素的元素內(nèi)容的區(qū)域；比較模塊，用于分別比較目標(biāo)元素框的高度和內(nèi)框的高度，以及目標(biāo)元素框的寬度和內(nèi)框的寬度；以及確定模塊，用于在目標(biāo)元素框的高度小于內(nèi)框的高度，和/或目標(biāo)元素框的寬度小于內(nèi)框的寬度時，則確定目標(biāo)HTML元素是滾動視圖，在目標(biāo)元素框的高度不小于內(nèi)框的高度且目標(biāo)元素框的寬度不小于內(nèi)框的寬度時，則確定目標(biāo)HTML元素不是滾動視圖。

本申請通過接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷目標(biāo)HTML元素是否是滾動視圖；在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接多個截圖，作為待截圖區(qū)域的截圖，解決了相關(guān)技術(shù)中無法對網(wǎng)頁中滾動視圖區(qū)域進(jìn)行截圖的問題，進(jìn)而達(dá)到了截取網(wǎng)頁中滾動視圖區(qū)域的所有內(nèi)容的效果。

附圖說明

構(gòu)成本申請的一部分的附圖用來提供對本申請的進(jìn)一步理解，本申請的示意性實施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當(dāng)限定。在附圖中：

圖1是根據(jù)相關(guān)技術(shù)的網(wǎng)頁滾動區(qū)域的示意圖；

圖2是根據(jù)相關(guān)技術(shù)的元素框的示意圖；

圖3是根據(jù)本申請第一實施例的網(wǎng)頁截圖方法的流程圖；

圖4是根據(jù)本申請第二實施例的網(wǎng)頁截圖方法的流程圖；以及

圖5是根據(jù)本申請實施例的網(wǎng)頁截圖裝置的示意圖。

具體實施方式

需要說明的是，在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。下面將參考附圖并結(jié)合實施例來詳細(xì)說明本申請。

為了使本技術(shù)領(lǐng)域的人員更好地理解本申請方案，下面將結(jié)合本申請實施例中的附圖，對本申請實施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分的實施例，而不是全部的實施例。基于本申請中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應(yīng)當(dāng)屬于 本申請保護(hù)的范圍。

需要說明的是，本申請的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當(dāng)情況下可以互換，以便這里描述的本申請的實施例。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。

為了便于描述，以下對本申請實施例涉及地幾個概念進(jìn)行說明：

HTML元素：網(wǎng)頁本身一個超文本標(biāo)記語言(Hyper Text Markup Language，簡稱為HTML)文件，它是由很多HTML元素(例如html，p，div等)嵌套組成，其中，HTML元素指的是從開始標(biāo)簽至結(jié)束標(biāo)簽的所有代碼，如下所示：

<html>

<body>

<p>This is my first paragraph.</p>

</body>

</html>。

上述代碼中包含三個HTML元素，即p元素、body元素和html元素，其中，p元素定義了HTML文檔中的一個段落，該p元素包括一個開始標(biāo)簽<p>和一個結(jié)束標(biāo)簽</p>，p元素的元素內(nèi)容為“This is my first paragraph”；body元素定義了HTML文檔的主體，該body元素?fù)碛幸粋€開始標(biāo)簽<body>和一個結(jié)束標(biāo)簽</body>，body元素的元素內(nèi)容為p元素；html元素定義了整個HTML文檔，該html元素?fù)碛幸粋€開始標(biāo)簽<html>和一個結(jié)束標(biāo)簽</html>，html元素的元素內(nèi)容為body元素。

元素框：瀏覽器對網(wǎng)頁的渲染，即是對這些HTML元素的渲染，層疊樣式表(Cascading Style Sheets，簡稱為CSS)是一種定義如何顯示HTML元素的語言，在CSS中，通過矩形框來顯示每一個HTML元素，該用于顯示HTML元素的矩形框即元素框，如圖2所示。在圖2中，元素框的最內(nèi)部分是元素內(nèi)容，直接包圍元素內(nèi)容的是內(nèi)邊距，內(nèi)邊距呈現(xiàn)了元素的背景，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素。

框模型：框模型定義了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。

根據(jù)本申請實施例，提供了一種網(wǎng)頁截圖方法，圖3是根據(jù)本申請第一實施例的網(wǎng)頁截圖方法的流程圖。如圖3所示，該方法包括如下的步驟：

步驟S102，接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素。

在用戶需要對網(wǎng)頁局部區(qū)域截圖時，可以選擇需要截圖區(qū)域(即待截圖區(qū)域)對應(yīng)的HTML元素，具體地，可以在網(wǎng)頁的邊緣位置(例如，底部區(qū)域)顯示網(wǎng)頁的HTML源文件，用戶可以通過鼠標(biāo)選擇需要截圖的HTML元素(即目標(biāo)HTML元素)。優(yōu)選地，也可以在網(wǎng)頁上設(shè)置一個確定按鈕，在用戶選擇某個HTML元素之后，一旦用戶點擊確定按鈕則將該HTML元素作為目標(biāo)HTML元素，如果用戶在點擊確定按鈕之前選擇了多個HTML元素，則可以將最近一次選擇的HTML元素作為目標(biāo)HTML元素。

優(yōu)選地，在接收目標(biāo)HTML元素之前，該方法還包括：在接收到截圖指令時，顯示網(wǎng)頁的HTML源文件，其中，截圖指令用于指示對網(wǎng)頁執(zhí)行截圖操作。

本申請實施例可以預(yù)先在網(wǎng)頁上設(shè)置一個截圖按鈕，當(dāng)用戶觸發(fā)該截圖按鈕時(即接收到截圖指令)，顯示當(dāng)前網(wǎng)頁的HTML源文件?？蛇x地，也可以是在用戶按下某個鍵時顯示網(wǎng)頁的HTML源文件，例如，在用戶按下F12鍵時顯示該網(wǎng)頁的HTML源文件界面。

優(yōu)選地，為了讓用戶能夠直觀地查看當(dāng)前選擇的HTML元素在網(wǎng)頁的顯示區(qū)域，在接收目標(biāo)HTML元素之后，該方法還包括：在網(wǎng)頁中突出顯示目標(biāo)HTML元素對應(yīng)的區(qū)域。

本申請實施例在用戶選擇目標(biāo)HTML元素之后，將網(wǎng)頁中突出顯示目標(biāo)HTML元素對應(yīng)的區(qū)域，例如，將目標(biāo)HTML元素對應(yīng)的區(qū)域背景設(shè)置為藍(lán)色，或是通過一個紅色框框選出目標(biāo)HTML元素對應(yīng)的區(qū)域等，使得用戶可以直觀查看到目標(biāo)HTML元素在網(wǎng)頁中對應(yīng)的區(qū)域，從而可以避免用戶選取的HTML元素與需要截取的網(wǎng)頁區(qū)域不對應(yīng)，導(dǎo)致截取到的圖片不是用戶需要截取的網(wǎng)頁內(nèi)容。

步驟S104，判斷目標(biāo)HTML元素是否是滾動視圖。

如果HTML元素的元素內(nèi)容的高度大于元素框邊框的高度或是元素內(nèi)容的寬度大于元素框邊框的寬度，則用戶需要滑動滾動條以查看全部的元素內(nèi)容。

可選地，判斷目標(biāo)HTML元素是否是滾動視圖包括：獲取目標(biāo)元素框的高度和寬度與目標(biāo)元素框內(nèi)框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框，目標(biāo)元素框內(nèi)框為目標(biāo)元素框中用于顯示目標(biāo)HTML元素的元素內(nèi)容的區(qū)域；分 別比較目標(biāo)元素框的高度和內(nèi)框的高度，以及目標(biāo)元素框的寬度和內(nèi)框的寬度；如果目標(biāo)元素框的高度小于內(nèi)框的高度，和/或目標(biāo)元素框的寬度小于內(nèi)框的寬度，則確定目標(biāo)HTML元素是滾動視圖；以及如果目標(biāo)元素框的高度不小于內(nèi)框的高度且目標(biāo)元素框的寬度不小于內(nèi)框的寬度，則確定目標(biāo)HTML元素不是滾動視圖。

如圖2所示，為了便于描述，本申請實施例將元素框中用于顯示元素內(nèi)容的區(qū)域作為元素框內(nèi)框。

具體地，可以通過調(diào)用瀏覽器的API快速獲取到目標(biāo)元素框的高度和寬度以及目標(biāo)元素框內(nèi)框的高度和寬度，并分別比較目標(biāo)元素框的高度和內(nèi)框的高度，以及目標(biāo)元素框的寬度和內(nèi)框的寬度，如果目標(biāo)元素框的高度小于內(nèi)框的高度，或者目標(biāo)元素框的寬度小于內(nèi)框的寬度，則說明當(dāng)前目標(biāo)元素框無法完全顯示目標(biāo)HTML元素的元素內(nèi)容，即目標(biāo)HTML元素是滾動視圖，如果目標(biāo)元素框的高度不小于內(nèi)框的高度且目標(biāo)元素框的寬度不小于內(nèi)框的寬度，則說明當(dāng)前目標(biāo)元素框能夠完全顯示目標(biāo)HTML元素的元素內(nèi)容，即目標(biāo)HTML元素不是滾動視圖。

步驟S106，在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖。

可選地，在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖包括：對滾動前的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖；以及每按照預(yù)設(shè)距離滾動一次目標(biāo)HTML元素，并對滾動后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行一次截圖，直至目標(biāo)HTML元素滾動至最底部。

具體地，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖可以包括如下步驟：

步驟1，對滾動前的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖。

由于目標(biāo)元素框無法完全顯示目標(biāo)HTML元素的元素內(nèi)容，因此每次僅能顯示局部的元素內(nèi)容。上述滾動前的目標(biāo)HTML元素的可視區(qū)域是指滾動前顯示在目標(biāo)元素框的元素內(nèi)容。

步驟2，按照預(yù)設(shè)移動距離滾動目標(biāo)HTML元素。

具體地，如果目標(biāo)HTML元素是縱向滾動視圖，則預(yù)設(shè)移動距離可以是目標(biāo)元素框的高度，如果目標(biāo)HTML元素是橫向滾動視圖，則預(yù)設(shè)移動距離可以是目標(biāo)元素框的寬度，如果目標(biāo)HTML元素同時是橫向滾動視圖和縱向滾動視圖，則預(yù)設(shè)移動距離同時包括橫向移動距離和縱向移動距離，其中，橫向移動距離可以是目標(biāo)元素框的寬 度，縱向移動距離可以是目標(biāo)元素框的高度。

步驟3，對滾動后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖。

步驟4，重復(fù)執(zhí)行步驟2至步驟3直至目標(biāo)HTML元素滾動至最底部。

優(yōu)選地，分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖包括：獲取目標(biāo)元素框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框；獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置，其中，目標(biāo)屏幕為顯示網(wǎng)頁的屏幕；以及根據(jù)目標(biāo)元素框相對于目標(biāo)屏幕的位置、高度和寬度生成目標(biāo)HTML元素的可視區(qū)域的截圖。

在獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置時，可以任意選定參考點，例如，可以取目標(biāo)屏幕的左上角頂點作為參考點來確定目標(biāo)元素框的位置，也可以是取目標(biāo)屏幕的其他點(例如，中心點，右上角頂點等)作為參考點來確定目標(biāo)元素框的位置。

具體地，獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置可以包括：獲取目標(biāo)元素框相對于目標(biāo)瀏覽器的位置，其中，目標(biāo)瀏覽器為顯示網(wǎng)頁的瀏覽器；獲取目標(biāo)瀏覽器相對于目標(biāo)屏幕的位置；以及根據(jù)目標(biāo)元素框相對于目標(biāo)瀏覽器的位置和目標(biāo)瀏覽器相對于目標(biāo)屏幕的位置計算目標(biāo)元素框相對于目標(biāo)屏幕的位置。

例如，目標(biāo)元素框的左上角頂點相對于目標(biāo)瀏覽器的左上角頂點的坐標(biāo)為(400，300)，目標(biāo)瀏覽器的左上角頂點相對于目標(biāo)屏幕的左上角頂點的坐標(biāo)為(10，10)，則目標(biāo)元素框的左上角頂點相對于目標(biāo)屏幕的左上角頂點的坐標(biāo)為(410，310)。

需要說明的是，本申請實施例可以通過調(diào)用瀏覽器的API快速獲取到目標(biāo)元素框的高度和寬度以及目標(biāo)元素框相對于目標(biāo)瀏覽器的位置和目標(biāo)瀏覽器相對于目標(biāo)屏幕的位置。

本申請實施例在獲取到目標(biāo)元素框相對于目標(biāo)屏幕的位置、目標(biāo)元素框的高度和目標(biāo)元素框的寬度之后，可以調(diào)用操作系統(tǒng)API繪制當(dāng)前目標(biāo)HTML元素的可視區(qū)域的圖像。

步驟S108，拼接多個截圖，作為待截圖區(qū)域的截圖。

通過上述步驟S106可以得到多個截圖，多個截圖分別對應(yīng)于目標(biāo)HTML元素的不同元素內(nèi)容。本申請實施例可以按照上述多個截圖的生成順序拼接上述多個截圖，并將拼接后的圖像作為待截圖區(qū)域的截圖。

本申請實施例通過接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷目標(biāo)HTML元素是否是滾動視圖；在判斷出目標(biāo) HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接多個截圖，作為待截圖區(qū)域的截圖，解決了相關(guān)技術(shù)中無法對網(wǎng)頁中滾動視圖區(qū)域進(jìn)行截圖的問題，進(jìn)而達(dá)到了截取網(wǎng)頁中滾動視圖區(qū)域的所有內(nèi)容的效果。

需要說明的是，如果上述目標(biāo)HTML元素不是滾動視圖，則可以直根據(jù)根據(jù)目標(biāo)元素框相對于目標(biāo)屏幕的位置、目標(biāo)元素框的高度和目標(biāo)元素框?qū)挼亩壬赡繕?biāo)HTML元素的截圖。

圖4是根據(jù)本申請第二實施例的網(wǎng)頁截圖方法的流程圖。如圖4所示，該方法包括如下步驟：

步驟S202：用戶選擇要截取的HTML元素。

具體地，可以給用戶一個網(wǎng)頁的HTML源文件界面，用戶可以通過選擇HTML元素(即目標(biāo)HTML元素)來確定自己想要截取的元素框。

步驟S204：獲取HTML元素相對于瀏覽器左上角的位置與HTML元素的高度和寬度。

步驟S206：計算HTML元素相對于屏幕左上角的位置。

具體地，可以獲取瀏覽器相對于屏幕左上角的位置，并根據(jù)HTML元素相對于瀏覽器左上角的位置和瀏覽器相對于屏幕左上角的位置來計算HTML元素相對于屏幕左上角的位置。

步驟S208：對HTML元素進(jìn)行截圖。

具體地，可以根據(jù)HTML元素相對于屏幕左上角的位置、HTML元素的高度和寬度對對HTML元素進(jìn)行截圖，例如，調(diào)用操作系統(tǒng)API繪制HTML元素的圖片。

需要說明的是，在調(diào)用操作系統(tǒng)API對HTML元素進(jìn)行截圖之前或之后，需要判斷HTML元素是否為滾動視圖，如果判斷出該HTML元素是滾動視圖，則執(zhí)行后續(xù)步驟S210，否則，直接輸出通過步驟S208得到的截圖。

步驟S210：判斷HTML元素是否到達(dá)滾動視圖最底部。

如果HTML元素未到達(dá)滾動視圖最底部，則執(zhí)行步驟S212，否則，執(zhí)行步驟S214。

步驟S212：以HTML元素可視高度滾動HTML元素。

HTML元素可視高度可以是HTML元素對應(yīng)的元素框的高度。

步驟S214：對截取的所有HTML元素部分截圖進(jìn)行拼接，保存成一種圖片。

步驟S216：導(dǎo)出拼接后的圖片。

需要說明的是，本申請實施例是以HTML元素為縱向滾動視圖為例進(jìn)行說明的，HTML元素為其他形式的滾動視圖(例如，橫向滾動視圖)時進(jìn)行截圖的方法與上述方法對應(yīng)，在此不再贅述。另外，上述步驟S202至步驟S214中的HTML元素即本申請實施例的目標(biāo)HTML元素。

此外，本申請實施例的網(wǎng)頁截圖方法可以是通過一個外部軟件實現(xiàn)，也可以是通過瀏覽器插件(例如，谷歌瀏覽器、火狐瀏覽器和IE瀏覽器都支持插件開發(fā))來實現(xiàn)，在外部軟件或瀏覽器插件的內(nèi)部包含一些位置計算轉(zhuǎn)換方法和調(diào)用操作系統(tǒng)API生成圖片的方法。具體操作可以是提供給用戶一個網(wǎng)頁的HTML源文件界面，用戶可以通過選擇HTML元素來確定自己想要截取的框模型，例如，可以谷歌瀏覽器的開發(fā)者工具，打開谷歌瀏覽器，按下F12鍵，既可以顯示網(wǎng)頁的HTML源文件，然后提供用戶一個截圖按鈕，一旦用戶點擊該截圖按鈕，就可以將選擇的HTML元素生成圖片。

由上述描述可知，本申請實施例通過CSS框模型和瀏覽器的API可以實現(xiàn)常用截圖軟件不具備的對滾動的HTML元素進(jìn)行截圖的功能。

需要說明的是，在附圖的流程圖示出的步驟可以在諸如一組計算機可執(zhí)行指令的計算機系統(tǒng)中執(zhí)行，并且，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。

根據(jù)本申請實施例的另一方面，提供了一種網(wǎng)頁截圖裝置，該網(wǎng)頁截圖裝置可以用于執(zhí)行本申請實施例的網(wǎng)頁截圖方法，本申請實施例的網(wǎng)頁截圖方法也可以通過本申請實施例的網(wǎng)頁截圖裝置來執(zhí)行。

圖5是根據(jù)本申請實施例的網(wǎng)頁截圖裝置的示意圖，如圖5所示，該裝置包括：接收單元10、判斷單元20、截圖單元30和拼接單元40。

接收單元10，用于接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素。

判斷單元20，用于判斷目標(biāo)HTML元素是否是滾動視圖。

可選地，判斷單元20包括：第三獲取模塊，用于獲取目標(biāo)元素框的高度和寬度與目標(biāo)元素框內(nèi)框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框；比較模塊，用于分別比較目標(biāo)元素框的高度和內(nèi)框的高度，以及目標(biāo)元素框的寬度和內(nèi)框的寬度；以及確定模塊，用于在目標(biāo)元素框的高度小于內(nèi)框的高度，和/或目標(biāo)元素框的寬度小于內(nèi)框的寬度時，則確定目標(biāo)HTML元素是滾動視圖，在目標(biāo)元素框的高度不小于內(nèi)框的高度且目標(biāo)元素框的寬度不小于內(nèi)框的寬度時，則確定目標(biāo)HTML 元素不是滾動視圖。

截圖單元30，用于在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖。

可選地，截圖單元30包括：第一截圖模塊，用于對滾動前的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖；以及第二截圖模塊，用于每按照預(yù)設(shè)距離滾動一次目標(biāo)HTML元素，并對滾動后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行一次截圖，直至目標(biāo)HTML元素滾動至最底部。

可選地，截圖單元40包括：第一獲取模塊，用于獲取目標(biāo)元素框的高度和寬度，其中，目標(biāo)元素框為顯示目標(biāo)HTML元素的元素框；第二獲取模塊，用于獲取目標(biāo)元素框相對于目標(biāo)屏幕的位置，其中，目標(biāo)屏幕為顯示網(wǎng)頁的屏幕；以及生成模塊，用于根據(jù)目標(biāo)元素框相對于目標(biāo)屏幕的位置、高度和寬度生成目標(biāo)HTML元素的可視區(qū)域的截圖。

拼接單元40，用于拼接多個截圖，作為待截圖區(qū)域的截圖。

本申請實施例通過接收單元10接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷單元20判斷目標(biāo)HTML元素是否是滾動視圖；截圖單元30在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接單元40拼接多個截圖，作為待截圖區(qū)域的截圖，解決了相關(guān)技術(shù)中無法對網(wǎng)頁中滾動視圖區(qū)域進(jìn)行截圖的問題，進(jìn)而達(dá)到了截取網(wǎng)頁中滾動視圖區(qū)域的所有內(nèi)容的效果。

優(yōu)選地，該裝置還包括：第一顯示單元，用于在接收到截圖指令時，顯示網(wǎng)頁的HTML源文件，其中，截圖指令用于指示對網(wǎng)頁執(zhí)行截圖操作。

優(yōu)選地，該裝置還包括：第二顯示單元，用于在網(wǎng)頁中突出顯示目標(biāo)HTML元素對應(yīng)的區(qū)域。

所述網(wǎng)頁截圖裝置包括處理器和存儲器，上述接收單元、判斷單元、截圖單元和拼接單元等均作為程序單元存儲在存儲器中，由處理器執(zhí)行存儲在存儲器中的上述程序單元來實現(xiàn)相應(yīng)的功能。

處理器中包含內(nèi)核，由內(nèi)核去存儲器中調(diào)取相應(yīng)的程序單元。內(nèi)核可以設(shè)置一個或以上，通過調(diào)整內(nèi)核參數(shù)來對網(wǎng)頁滾動區(qū)域進(jìn)行截圖。

存儲器可能包括計算機可讀介質(zhì)中的非永久性存儲器，隨機存取存儲器(RAM)和/或非易失性內(nèi)存等形式，如只讀存儲器(ROM)或閃存(flash RAM)，存儲器包括至少一個存儲芯片。

本申請還提供了一種計算機程序產(chǎn)品，當(dāng)在數(shù)據(jù)處理設(shè)備上執(zhí)行時，適于執(zhí)行初始化有如下方法步驟的程序代碼：接收目標(biāo)HTML元素，其中，目標(biāo)HTML元素為網(wǎng)頁中待截圖區(qū)域?qū)?yīng)的HTML元素；判斷目標(biāo)HTML元素是否是滾動視圖；在判斷出目標(biāo)HTML元素是滾動視圖時，滾動目標(biāo)HTML元素，并分別對滾動前后的目標(biāo)HTML元素的可視區(qū)域進(jìn)行截圖，得到多個截圖；以及拼接多個截圖，作為待截圖區(qū)域的截圖。

上述本申請實施例序號僅僅為了描述，不代表實施例的優(yōu)劣。

在本申請的上述實施例中，對各個實施例的描述都各有側(cè)重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關(guān)描述。

在本申請所提供的幾個實施例中，應(yīng)該理解到，所揭露的技術(shù)內(nèi)容，可通過其它的方式實現(xiàn)。其中，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，可以為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部單元來實現(xiàn)本實施例方案的目的。

另外，在本申請各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現(xiàn)，也可以采用軟件功能單元的形式實現(xiàn)。

所述集成的單元如果以軟件功能單元的形式實現(xiàn)并作為獨立的產(chǎn)品銷售或使用時，可以存儲在一個計算機可讀取存儲介質(zhì)中。基于這樣的理解，本申請的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質(zhì)中，包括若干指令用以使得一臺計算機設(shè)備(可為個人計算機、服務(wù)器或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本申請各個實施例所述方法的全部或部分步驟。而前述的存儲介質(zhì)包括：U盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、移動硬盤、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

以上所述僅是本申請的優(yōu)選實施方式，應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本申請原理的前提下，還可以做出若干改進(jìn)和潤飾，這些改進(jìn)和潤 飾也應(yīng)視為本申請的保護(hù)范圍。