本發(fā)明涉及瀏覽器技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)頁截圖方法及系統(tǒng)。

背景技術(shù)：

隨著html5標準的推廣，網(wǎng)頁所能展示的圖像越來越豐富。現(xiàn)有技術(shù)的瀏覽器截圖方法中，或通過activex控件截圖工具進行截圖，存在操作系統(tǒng)兼容性差，開發(fā)成本高，容易被當做病毒等缺陷；或通過html2canvas采用javacript進行截圖，存在不支持可縮放矢量圖，在3d圖像z-index復雜時截取的圖像缺失嚴重等缺陷。

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

為了克服現(xiàn)有技術(shù)中的上述不足，本發(fā)明的目的在于提供一種網(wǎng)頁截圖方法，應(yīng)用于與相互通信的用戶終端及服務(wù)器，所述方法包括：

所述用戶終端接收網(wǎng)頁上的截圖觸發(fā)，獲取在該網(wǎng)頁的上指定的截圖范圍；

所述用戶終端判斷所述截圖范圍內(nèi)是否包含有可縮放矢量圖層；

當所述截圖范圍內(nèi)包含有可縮放矢量圖層時，所述用戶終端根據(jù)所述指定的截圖范圍在該網(wǎng)頁的位置及該網(wǎng)頁的鏈接地址生成截圖請求；

所述用戶終端將所述截圖請求發(fā)送至所述服務(wù)器；

所述服務(wù)器獲取所述截圖請求，根據(jù)所述鏈接地址請求所述網(wǎng)頁并進行渲染，截取渲染后網(wǎng)頁中與所述截圖范圍對應(yīng)區(qū)域的圖片并發(fā)送給所述用戶終端。

進一步地，在上述方法中，所述服務(wù)器獲取所述截圖請求，根據(jù)所述鏈接地址請求所述網(wǎng)頁并進行渲染，截取渲染后網(wǎng)頁中與所述截圖范圍對應(yīng)區(qū)域的圖片并發(fā)送給所述用戶終端的步驟，包括：

接收所述用戶終端發(fā)送的鏈接地址，根據(jù)所述鏈接地址請求所述網(wǎng)頁，并通過該服務(wù)器上的瀏覽器渲染獲得渲染后的網(wǎng)頁；

根據(jù)所述用戶終端發(fā)送的所述截圖范圍，通過webdriver截取所述渲染后網(wǎng)頁中該截圖范圍對應(yīng)區(qū)域的圖片；

將截取到的圖片發(fā)送給所述用戶終端。

進一步地，在上述方法中，所述截圖請求中還包括指定的截圖格式；所述根據(jù)所述用戶終端發(fā)送的所述截圖范圍，通過webdriver截取所述渲染后網(wǎng)頁中該截圖范圍對應(yīng)區(qū)域的圖片的步驟，包括：

根據(jù)所述用戶終端發(fā)送的所述截圖范圍，通過webdriver截取所述渲染后網(wǎng)頁中該截圖范圍對應(yīng)區(qū)域以生成預(yù)設(shè)格式的圖片。

進一步地，在上述方法中，所述方法還包括：

當所述截圖范圍內(nèi)不包含有可縮放矢量圖層時，所述用戶終端通過應(yīng)用程序編程接口調(diào)用convas函數(shù)對所述截圖范圍內(nèi)的圖像進行繪圖以獲得截圖圖片。

進一步地，在上述方法中，所述用戶終端接收網(wǎng)頁上的截圖觸發(fā)，獲取指定在該網(wǎng)頁的上指定的截圖范圍的步驟，包括：

在待截圖的網(wǎng)頁上繪制一定位方式為絕對定位的顯示層；

通過javascript在該顯示層上生成大小可調(diào)整的截圖框，獲取對所述截圖框的操作以確定所述截圖范圍，記錄所述截圖范圍在所述顯示層上的位置及大小。

進一步地，在上述方法中，所述用戶終端判斷所述截圖范圍內(nèi)是否包含有可縮放矢量圖層的步驟，包括：

獲取所述截圖范圍在該網(wǎng)頁的html文件中對應(yīng)的html代碼片段；

檢測所述html代碼片段中是否存在svg標簽，以判斷該截圖范圍內(nèi)是否包含可縮放矢量圖層。

進一步地，在上述方法中，所述獲取所述截圖范圍在該網(wǎng)頁的html文件中對應(yīng)的html代碼片段的步驟，包括：

通過javascript獲取所述截圖范圍在該網(wǎng)頁的html文件中對應(yīng)的html代碼片段。

進一步地，在上述方法中，所述用戶終端將所述截圖請求發(fā)送至所述服務(wù)器的步驟，包括：

所述用戶終端通過ajax請求將所述截圖請求發(fā)送至所述服務(wù)器。

本發(fā)明的另一目的在于提供一種網(wǎng)頁截圖系統(tǒng)，所述系統(tǒng)包括相互通信的用戶終端及服務(wù)器；

所述用戶終端用于接收網(wǎng)頁上的截圖觸發(fā)，獲取指定在該網(wǎng)頁的上指定的截圖范圍；判斷所述截圖范圍內(nèi)是否包含有可縮放矢量圖層；當所述截圖范圍內(nèi)包含有可縮放矢量圖層時，所述用戶終端根據(jù)所述指定的截圖范圍在該網(wǎng)頁的位置及該網(wǎng)頁的鏈接地址生成截圖請求；及將所述截圖請求發(fā)送至所述服務(wù)器；

所述服務(wù)器用于獲取所述截圖請求，根據(jù)所述鏈接地址請求所述網(wǎng)頁并進行渲染，截取渲染后網(wǎng)頁中與所述截圖范圍對應(yīng)區(qū)域的圖片并發(fā)送給所述用戶終端。

進一步地，在上述系統(tǒng)中，所述用戶終端還用于當所述截圖范圍內(nèi)不包含有可縮放矢量圖層時，所述用戶終端通過應(yīng)用程序編程接口調(diào)用convas函數(shù)對所述截圖范圍內(nèi)的圖像進行繪圖以獲得截圖圖片。

相對于現(xiàn)有技術(shù)而言，本發(fā)明具有以下有益效果：

本發(fā)明提供的網(wǎng)頁截圖方法及系統(tǒng)，通過用戶終端判斷網(wǎng)頁上指定截圖范圍內(nèi)是否存在可縮放矢量圖層，當存在可縮放矢量圖層時，將截圖范圍的位置及所述網(wǎng)頁的連接發(fā)送給服務(wù)器進行截圖。如此，在所述用戶終端無法完成對可縮放矢量圖層的截圖時，通過發(fā)送截圖請求給服務(wù)器的方式由服務(wù)器代替所述用戶終端完成截圖。

附圖說明

為了更清楚地說明本發(fā)明實施例的技術(shù)方案，下面將對實施例中所需要使用的附圖作簡單地介紹，應(yīng)當理解，以下附圖僅示出了本發(fā)明的某些實施例，因此不應(yīng)被看作是對范圍的限定，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他相關(guān)的附圖。

圖1為本發(fā)明實施例提供的網(wǎng)頁截圖系統(tǒng)的示意圖；

圖2為本發(fā)明實施例提供的網(wǎng)頁截圖方法的步驟流程示意圖之一；

圖3為本發(fā)明實施例提供的截圖范圍選定示意圖；

圖4為本發(fā)明實施例提供的網(wǎng)頁截圖方法的步驟流程示意圖之二。

圖標：10-網(wǎng)頁截圖系統(tǒng)；100-服務(wù)器；200-用戶終端；300-網(wǎng)絡(luò)。

具體實施方式

為使本發(fā)明實施例的目的、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例是本發(fā)明一部分實施例，而不是全部的實施例。通常在此處附圖中描述和示出的本發(fā)明實施例的組件可以以各種不同的配置來布置和設(shè)計。

因此，以下對在附圖中提供的本發(fā)明的實施例的詳細描述并非旨在限制要求保護的本發(fā)明的范圍，而是僅僅表示本發(fā)明的選定實施例。基于本發(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

應(yīng)注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步定義和解釋。

在本發(fā)明的描述中，還需要說明的是，除非另有明確的規(guī)定和限定，術(shù)語“設(shè)置”、“安裝”、“相連”、“連接”應(yīng)做廣義理解，例如，可以是固定連接，也可以是可拆卸連接，或一體地連接；可以是機械連接，也可以是電連接；可以是直接相連，也可以通過中間媒介間接相連，可以是兩個元件內(nèi)部的連通。對于本領(lǐng)域的普通技術(shù)人員而言，可以具體情況理解上述術(shù)語在本發(fā)明中的具體含義。

請參照圖1，圖1是本發(fā)明較佳實施例提供的網(wǎng)頁截圖系統(tǒng)10的示意圖，所述網(wǎng)頁截圖系統(tǒng)10包括相互通信的服務(wù)器100與用戶終端200。所述服務(wù)器100可通過網(wǎng)絡(luò)300與所述用戶終端200進行通信，以實現(xiàn)服務(wù)器100與用戶終端200之間的數(shù)據(jù)通信或交互。

本實施例中，所述服務(wù)器100可以是，但不限于，web(網(wǎng)站)服務(wù)器、ftp(filetransferprotocol，文件傳輸協(xié)議)服務(wù)器等。所述用戶終端200可以是，但不限于，智能手機、個人電腦(personalcomputer，pc)、平板電腦、個人數(shù)字助理(personaldigitalassistant，pda)、移動上網(wǎng)設(shè)備(mobileinternetdevice，mid)等。所述用戶終端200的操作系統(tǒng)可以是，但不限于，安卓(android)系統(tǒng)、ios(iphoneoperatingsystem)系統(tǒng)、windowsphone系統(tǒng)、windows系統(tǒng)等。

所述網(wǎng)絡(luò)300可以是，但不限于，有線網(wǎng)絡(luò)或無線網(wǎng)絡(luò)。

所述用戶終端200用于接收網(wǎng)頁上的截圖觸發(fā)，獲取指定在該網(wǎng)頁的上指定的截圖范圍；判斷所述截圖范圍內(nèi)是否包含有可縮放矢量圖層；當所述截圖范圍內(nèi)包含有可縮放矢量圖層時，所述用戶終端200根據(jù)所述指定的截圖范圍在該網(wǎng)頁的位置及該網(wǎng)頁的鏈接地址生成截圖請求；及將所述截圖請求發(fā)送至所述服務(wù)器100。

所述服務(wù)器100用于獲取所述截圖請求，根據(jù)所述鏈接地址請求所述網(wǎng)頁并進行渲染，截取渲染后網(wǎng)頁中與所述截圖范圍對應(yīng)區(qū)域的圖片并發(fā)送給所述用戶終端200。

進一步地，所述用戶終端200還用于當所述截圖范圍內(nèi)不包含有可縮放矢量圖層時，所述用戶終端200通過應(yīng)用程序編程接口調(diào)用convas函數(shù)對所述截圖范圍內(nèi)的圖像進行繪圖以獲得截圖圖片。

請參照圖2，圖2為應(yīng)用于圖1所示的網(wǎng)頁截圖系統(tǒng)10的一種應(yīng)用信息獲取方法的流程圖，以下將對所述方法包括各個步驟進行詳細闡述。

步驟s110，所述用戶終端200接收網(wǎng)頁上的截圖觸發(fā)，獲取在該網(wǎng)頁的上指定的截圖范圍。

具體地，在本實施例中，所述用戶終端200可以接收截圖觸發(fā)，在待截圖的網(wǎng)頁上繪制一定位方式(position)為絕對定位(absolute)的顯示層。

然后，請參照圖3，所述用戶終端通過javascript在該顯示層上生成大小可調(diào)整的截圖框，將所述截圖框以外的范圍渲染為灰色。獲取對所述截圖框的操作以確定所述截圖范圍，記錄所述截圖范圍在所述顯示層上的位置及大小。

值得說明的是，上述獲取確定截圖方位的方式僅為本實施例提供的一種可能的實施方式，在本實施例的其他方式中，也可采用現(xiàn)有技術(shù)中的其他技術(shù)手段在所述帶截圖網(wǎng)頁上確定所述截圖范圍。

步驟s120，所述用戶終端200判斷所述截圖范圍內(nèi)是否包含有可縮放矢量圖層。

由于所述用戶終端200在對矢量圖或z-index復雜的3d圖截圖向效果不佳，矢量圖或3d圖一般繪制在可縮放矢量圖層中，故在本實施例中，所述用戶終端先判斷所述截圖范圍內(nèi)是否包含可縮放矢量圖層。

具體地，在本實施例中，所述用戶終端200通過javascript獲取所述截圖范圍在該網(wǎng)頁的html文件中對應(yīng)的html代碼片段，檢測所述html代碼片段中是否存在svg標簽，以判斷該截圖范圍內(nèi)是否包含可縮放矢量圖層。

步驟s130，當所述截圖范圍內(nèi)包含有可縮放矢量圖層時，所述用戶終端200根據(jù)所述指定的截圖范圍在該網(wǎng)頁的位置及該網(wǎng)頁的鏈接地址生成截圖請求并發(fā)送至所述服務(wù)器100。

具體地，在本實施例中，所述用戶終端200在檢測到所述截圖范圍內(nèi)包含有可縮放矢量圖層時，則認為此次截圖不能在該用戶終端200本地完成，故所述用戶終端根據(jù)截圖范圍的大小、截圖范圍在所述網(wǎng)頁上的位置以及所述網(wǎng)頁的連接地址生成截圖請求。在本實施例中，所述用戶終端200可以通過ajax請求的方式將所述截圖請求發(fā)送至所述服務(wù)器100，也可以通過其他傳輸方式將所述截圖請求發(fā)送給所述服務(wù)器100。

步驟s140，所述服務(wù)器100獲取所述截圖請求，根據(jù)所述鏈接地址請求所述網(wǎng)頁并進行渲染，截取渲染后網(wǎng)頁中與所述截圖范圍對應(yīng)區(qū)域的圖片并發(fā)送給所述用戶終端200。

具體地，所述服務(wù)器100接收所述用戶終端200發(fā)送的鏈接地址，根據(jù)所述鏈接地址請求所述網(wǎng)頁，并通過該服務(wù)器100上的瀏覽器渲染獲得渲染后的網(wǎng)頁。根據(jù)所述用戶終端200發(fā)送的所述截圖范圍，通過webdriver截取所述渲染后網(wǎng)頁中該截圖范圍對應(yīng)區(qū)域的圖片，并將將截取到的圖片發(fā)送給所述用戶終端200。如此，通過所述服務(wù)器100可以對矢量圖或3d圖進行效果更好的截取。

進一步地，所述截圖請求中還可以包括指定的截圖格式，所述服務(wù)器100根據(jù)所述用戶終端200發(fā)送的所述截圖范圍，通過webdriver截取所述渲染后網(wǎng)頁中該截圖范圍對應(yīng)區(qū)域以生成預(yù)設(shè)格式的圖片。所述預(yù)設(shè)格式可以包括，但不僅限于jpeg、png、gif或base64。

進一步地，請參照圖4，在本實施例中，所述方法還可以包括步驟s150.

步驟s150，當所述截圖范圍內(nèi)不包含有可縮放矢量圖層時，所述用戶終端200通過應(yīng)用程序編程接口調(diào)用convas函數(shù)對所述截圖范圍內(nèi)的圖像進行繪圖以獲得截圖圖片。

綜上所述，本發(fā)明提供的網(wǎng)頁截圖方法及系統(tǒng)，所述用戶終端200在檢測到待截圖的網(wǎng)頁上存在可縮放矢量圖層時，向服務(wù)器100發(fā)送截圖請求，通過服務(wù)器100渲染帶截圖的網(wǎng)頁并采用webdriver的方式進行截圖。而在帶截圖的網(wǎng)頁上不存在可縮放矢量圖層時，在所述用戶終端200本地進行截圖。如此，填補了現(xiàn)有技術(shù)中用戶終端200無法對可縮放矢量圖層進行截圖的缺陷。

在本申請所提供的實施例中，應(yīng)該理解到，所揭露的裝置和方法，也可以通過其它的方式實現(xiàn)。以上所描述的裝置實施例僅僅是示意性的，例如，附圖中的流程圖和框圖顯示了根據(jù)本發(fā)明的多個實施例的裝置、方法和計算機程序產(chǎn)品的可能實現(xiàn)的體系架構(gòu)、功能和操作。在這點上，流程圖或框圖中的每個方框可以代表一個模塊、程序段或代碼的一部分，所述模塊、程序段或代碼的一部分包含一個或多個用于實現(xiàn)規(guī)定的邏輯功能的可執(zhí)行指令。也應(yīng)當注意，在有些作為替換的實現(xiàn)方式中，方框中所標注的功能也可以以不同于附圖中所標注的順序發(fā)生。例如，兩個連續(xù)的方框?qū)嶋H上可以基本并行地執(zhí)行，它們有時也可以按相反的順序執(zhí)行，這依所涉及的功能而定。也要注意的是，框圖和/或流程圖中的每個方框、以及框圖和/或流程圖中的方框的組合，可以用執(zhí)行規(guī)定的功能或動作的專用的基于硬件的系統(tǒng)來實現(xiàn)，或者可以用專用硬件與計算機指令的組合來實現(xiàn)。

另外，在本發(fā)明各個實施例中的各功能模塊可以集成在一起形成一個獨立的部分，也可以是各個模塊單獨存在，也可以兩個或兩個以上模塊集成形成一個獨立的部分。

所述功能如果以軟件功能模塊的形式實現(xiàn)并作為獨立的產(chǎn)品銷售或使用時，可以存儲在一個計算機可讀取存儲介質(zhì)中?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分或者該技術(shù)方案的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質(zhì)中，包括若干指令用以使得一臺計算機設(shè)備(可以是個人計算機，服務(wù)器100，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述方法的全部或部分步驟。而前述的存儲介質(zhì)包括：u盤、移動硬盤、只讀存儲器(rom，read-onlymemory)、隨機存取存儲器(ram，randomaccessmemory)、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

需要說明的是，在本文中，諸如第一和第二等之類的關(guān)系術(shù)語僅僅用來將一個實體或者操作與另一個實體或操作區(qū)分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關(guān)系或者順序。而且，術(shù)語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設(shè)備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括所述要素的過程、方法、物品或者設(shè)備中還存在另外的相同要素。

以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。應(yīng)注意到：相似的標號和字母在下面的附圖中表示類似項，因此，一旦某一項在一個附圖中被定義，則在隨后的附圖中不需要對其進行進一步定義和解釋。

以上所述，僅為本發(fā)明的具體實施方式，但本發(fā)明的保護范圍并不局限于此，任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到變化或替換，都應(yīng)涵蓋在本發(fā)明的保護范圍之內(nèi)。因此，本發(fā)明的保護范圍應(yīng)所述以權(quán)利要求的保護范圍為準。