生成網(wǎng)頁截圖的方法及裝置制造方法
【專利摘要】一種生成網(wǎng)頁截圖的方法，包括：獲取上傳的網(wǎng)頁鏈接，根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁；監(jiān)聽所述網(wǎng)頁的加載完畢事件；遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)；根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件并返回。此外，還提供了一種生成網(wǎng)頁截圖的裝置。上述生成網(wǎng)頁截圖的方法及裝置能夠?qū)崿F(xiàn)全網(wǎng)頁截圖。
【專利說明】生成網(wǎng)頁截圖的方法及裝置

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，特別是涉及一種生成網(wǎng)頁截圖的方法及裝置。

【背景技術(shù)】
[0002]傳統(tǒng)技術(shù)中，操作系統(tǒng)提供有屏幕截圖接口，截圖軟件可利用操作系統(tǒng)的截圖接口函數(shù)截圖。用戶在使用瀏覽器瀏覽網(wǎng)頁時，可通過打開截圖軟件并在網(wǎng)頁中框選劃定相應(yīng)的區(qū)域生成網(wǎng)頁截圖。
[0003]然而，發(fā)明人經(jīng)研究發(fā)現(xiàn)傳統(tǒng)技術(shù)中生成網(wǎng)頁截圖的方法至少存在以下問題:傳統(tǒng)技術(shù)中的網(wǎng)頁截圖實際上是調(diào)用操作系統(tǒng)的屏幕截圖接口函數(shù)截取屏幕圖像，使得對于網(wǎng)頁內(nèi)容較多超出屏幕范圍的網(wǎng)頁無法整個進(jìn)行截圖，只能截取顯示屏中處于顯示狀態(tài)的部分，因此，傳統(tǒng)技術(shù)中的網(wǎng)頁截圖方法無法實現(xiàn)全網(wǎng)頁截圖。


【發(fā)明內(nèi)容】

[0004]基于此，有必要提供一種能夠?qū)崿F(xiàn)全網(wǎng)頁截圖的生成網(wǎng)頁截圖的方法。
[0005]一種生成網(wǎng)頁截圖的方法，包括:
[0006]獲取上傳的網(wǎng)頁鏈接，根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁；
[0007]監(jiān)聽所述網(wǎng)頁的加載完畢事件；
[0008]遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)；
[0009]根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件并返回。
[0010]此外，還有必要提供一種能夠?qū)崿F(xiàn)全網(wǎng)頁截圖的生成網(wǎng)頁截圖的裝置。
[0011]一種生成網(wǎng)頁截圖的裝置，包括:
[0012]網(wǎng)頁加載模塊，用于獲取上傳的網(wǎng)頁鏈接，根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁；
[0013]事件監(jiān)聽模塊，用于監(jiān)聽所述網(wǎng)頁的加載完畢事件；
[0014]渲染數(shù)據(jù)獲取模塊，用于遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)；
[0015]圖片生成模塊，用于根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件并返回。
[0016]上述生成網(wǎng)頁截圖的方法及裝置與傳統(tǒng)技術(shù)中的解屏方法相比，并沒有利用操作系統(tǒng)提供的屏幕截圖接口對顯示網(wǎng)頁的屏幕窗口進(jìn)行截屏，而是通過在先加載網(wǎng)頁，再遍歷網(wǎng)頁的頁面元素，獲取頁面元素的頁面渲染數(shù)據(jù)生成網(wǎng)頁截圖。由于，加載網(wǎng)頁的過程能夠生成網(wǎng)頁中所有頁面元素的頁面渲染數(shù)據(jù)，即全網(wǎng)頁的頁面渲染數(shù)據(jù)，其并不依賴于顯示屏幕的大小和位置，因此，能夠生成全網(wǎng)頁截圖。
[0017]并且，由于加載網(wǎng)頁遍歷網(wǎng)頁的頁面元素，獲取頁面元素的頁面渲染數(shù)據(jù)的過程并不需要先調(diào)用操作系統(tǒng)的顯示接口進(jìn)行預(yù)覽或顯示，再通過屏幕截圖接口函數(shù)進(jìn)行截圖，使得生成網(wǎng)頁截圖的方法還可運行于沒有顯示設(shè)備的計算機(jī)系統(tǒng)上。

【專利附圖】

【附圖說明】
[0018]圖1為一個實施例中生成網(wǎng)頁截圖的方法的流程圖；
[0019]圖2為一個實施例中生成網(wǎng)頁截圖的裝置的結(jié)構(gòu)示意圖。

【具體實施方式】
[0020]在一個實施例中，如圖1所示，一種生成網(wǎng)頁截圖的方法，該方法完全依賴于計算機(jī)程序，該計算機(jī)程序可運行于基于馮洛伊曼體系的計算機(jī)系統(tǒng)上，該方法包括:
[0021]步驟S102，獲取上傳的網(wǎng)頁鏈接，根據(jù)網(wǎng)頁鏈接加載網(wǎng)頁。
[0022]在本實施例中，該方法的運行基于客戶端和服務(wù)器組成的系統(tǒng)。用戶可通過客戶端向服務(wù)器上傳需要截圖的網(wǎng)頁頁面的網(wǎng)頁鏈接，服務(wù)器將該網(wǎng)頁頁面截圖后生成的圖片返回給該客戶端。
[0023]例如，在一個應(yīng)用場景中，用戶通過手機(jī)瀏覽器訪問網(wǎng)頁時，可通過點擊瀏覽器上的按鈕進(jìn)行網(wǎng)頁截圖，瀏覽器獲取地址欄中的網(wǎng)頁鏈接，將其發(fā)送給服務(wù)器，并接收服務(wù)器返回的截圖文件，預(yù)覽后可提示用戶是否保存在本地。
[0024]在本實施例中，可通過QtWebkit組件的QtWebPage對象加載所述網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁。QtWebkit組件是QT框架下的基于開源的瀏覽器引擎webkit的組件。QT框架是一個跨平臺的C++應(yīng)用框架，又稱為部件工具箱。QtWebkit組件中實例化有QtWebPage對象,QtWebPage對象可通過調(diào)用底層的webkit庫完成web頁面的渲染和編輯。在本實施例中，可通過調(diào)用QWebPage實例的mainFrame方法，獲取到frame指針，再通過調(diào)用frame的1ad方法，加載與上傳的網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁。
[0025]優(yōu)選的，根據(jù)網(wǎng)頁鏈接加載網(wǎng)頁之前還可對上傳的網(wǎng)頁鏈接進(jìn)行驗證，判斷其參數(shù)是否符合規(guī)范以及該網(wǎng)頁鏈接是否具有安全風(fēng)險。
[0026]例如，在上述應(yīng)用場景中，服務(wù)器接收到客戶端上傳的網(wǎng)頁鏈接后，可獲取其參數(shù)(鏈接中“？ ”字符的后續(xù)部分字符串)，并判斷該參數(shù)是否符合參數(shù)定義規(guī)范(通常網(wǎng)頁鏈接以字符串“http://”或“https://”起始，且其后續(xù)的參數(shù)部分的字符串為“al=xl&a2=x2&a3=x3…”的格式，其中al、a2和a3為參數(shù)名，xl、x2和x3為參數(shù)值)，若該參數(shù)不符合定義規(guī)范，則可返回錯誤提示信息，告知用戶其上傳的網(wǎng)頁鏈接不合法。
[0027]再例如，在上述應(yīng)用場景中，服務(wù)器還可將接收到的客戶端上傳的網(wǎng)頁鏈接在病毒庫或木馬庫等安全應(yīng)用中進(jìn)行檢測，判斷該鏈接是否存在病毒或木馬等安全風(fēng)險，若是，則不加載該網(wǎng)頁，并向客戶端返回錯誤提示信息，告知用戶該網(wǎng)頁鏈接存在安全風(fēng)險，不能用于生成網(wǎng)頁截圖。
[0028]步驟S104，監(jiān)聽網(wǎng)頁的加載完畢事件。
[0029]加載完畢事件即網(wǎng)頁內(nèi)所有的頁面元素加載完成后觸發(fā)的系統(tǒng)事件。
[0030]在本實施例中，可監(jiān)聽QtWebPage對象派發(fā)的LoadFinished事件指令。如前所述，QtffebPage對象的load函數(shù)在將網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁上的頁面元素加載完畢后，即派發(fā)LoadFinished系統(tǒng)事件，通知其他組件其已將網(wǎng)頁加載完畢。
[0031]步驟S106，遍歷網(wǎng)頁的頁面元素，獲取頁面元素的頁面渲染數(shù)據(jù)。
[0032]頁面渲染數(shù)據(jù)包括頁面元素的高度、寬度以及像素值。在本實施例中，可通過調(diào)用QtffebPage對象的render函數(shù)，即頁面渲染函數(shù),遍歷網(wǎng)頁的頁面元素,獲取頁面元素的高度、寬度以及像素值，根據(jù)高度、寬度以及像素值生成頁面渲染數(shù)據(jù)。
[0033]進(jìn)一步的，遍歷網(wǎng)頁的頁面元素的步驟還包括:判斷頁面元素是否存在腳本錯誤，若是，則將頁面元素替換為相應(yīng)的提示信息。
[0034]頁面上的頁面元素通常部分由網(wǎng)頁腳本(例如javascript)定義,可能會存在腳本錯誤(如腳本語法錯誤、資源文件定位錯誤等)，從而導(dǎo)致頁面元素為錯誤數(shù)據(jù)。在本實施例中，若頁面元素存在腳本錯誤，可將該頁面元素替換為錯誤提示信息。例如，若頁面元素為腳本加載的圖片，而該加載圖片的腳本存在語法錯誤導(dǎo)致圖片數(shù)據(jù)無法獲取，則可將該頁面元素替換成提示圖片，提示圖片上可顯示提示信息“腳本錯誤”等字樣。
[0035]步驟S108，根據(jù)頁面渲染數(shù)據(jù)生成圖片文件并返回。
[0036]在本實施例中，可通過調(diào)用viewportSize函數(shù)獲取已加載的網(wǎng)頁中各個頁面元素的高度、寬度以及每個像素點位置的RGB信息,然后逐行逐列獲取每一個像素點在頁面上的RGB值，并把該值寫到圖片對應(yīng)的像素位置，從而生成圖片。圖片生成完畢后即可將其返回給客戶端。
[0037]在一個實施例中，監(jiān)聽網(wǎng)頁的加載完畢事件的步驟之后還可判斷加載完畢事件是否包含異常指令，若是，則可根據(jù)異常指令生成錯誤提示信息返回；若否，則遍歷網(wǎng)頁的頁面元素。
[0038]在本實施例中，可監(jiān)聽LoadFinished事件包含的異常信息。若LoadFinished事件中的狀態(tài)值為ok，則表示加載成功，可繼續(xù)執(zhí)行步驟S106 ;若LoadFinished事件中的狀態(tài)值不為ok，則表示加載失敗，可根據(jù)該狀態(tài)值生成錯誤提示信息返回給客戶端。例如，服務(wù)器在加載該網(wǎng)頁時，可能由于網(wǎng)絡(luò)問題出現(xiàn)404錯誤，也有可能該網(wǎng)頁對應(yīng)的web服務(wù)器的內(nèi)部錯誤而出現(xiàn)510錯誤。當(dāng)LoadFinished事件中出現(xiàn)上述狀態(tài)碼時，即存在異常信息，即可返回客戶端相應(yīng)的錯誤提示信息。
[0039]在一個實施例中，根據(jù)頁面渲染數(shù)據(jù)生成圖片文件的步驟包括:獲取圖片格式參數(shù)，根據(jù)圖片格式參數(shù)將頁面渲染數(shù)據(jù)編碼為圖片文件。
[0040]在本實施例中，用戶可在通過客戶端上傳網(wǎng)頁鏈接的同時選擇相應(yīng)的格式參數(shù)，格式參數(shù)包括jpg、pdf.、gif和png等。服務(wù)器接收到該格式參數(shù)之后，即可根據(jù)該格式參數(shù)對頁面渲染數(shù)據(jù)進(jìn)行編碼，生成圖片文件。
[0041]優(yōu)選的，服務(wù)器可定期重復(fù)執(zhí)行上述步驟S106和S108，從而生成具有動態(tài)效果的gif圖片格式文件，從而可將包含有flash或動態(tài)腳本的網(wǎng)頁通過gif格式動態(tài)效果圖保存。
[0042]在一個實施例中，如圖2所示，一種生成網(wǎng)頁截圖的裝置，包括:
[0043]網(wǎng)頁加載模塊102，用于獲取上傳的網(wǎng)頁鏈接，根據(jù)網(wǎng)頁鏈接加載網(wǎng)頁。
[0044]事件監(jiān)聽模塊104，用于監(jiān)聽網(wǎng)頁的加載完畢事件。
[0045]渲染數(shù)據(jù)獲取模塊106，用于遍歷網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)。
[0046]圖片生成模塊108，用于根據(jù)頁面渲染數(shù)據(jù)生成圖片文件并返回。
[0047]在本實施例中，網(wǎng)頁加載模塊102還用于通過QtWebkit組件的QtWebPage對象加載網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁。
[0048]在本實施例中，事件監(jiān)聽模塊104還用于監(jiān)聽QtWebPage對象派發(fā)的LoadFinished 事件指令。
[0049]在本實施例中，頁面渲染數(shù)據(jù)包括頁面元素的高度、寬度以及像素值。
[0050]渲染數(shù)據(jù)獲取模塊106還用于調(diào)用QtWebPage對象的頁面渲染函數(shù)，遍歷網(wǎng)頁的頁面元素，獲取頁面元素的高度、寬度以及像素值，根據(jù)高度、寬度以及像素值生成頁面渲染數(shù)據(jù)。
[0051]在本實施例中，渲染數(shù)據(jù)獲取模塊106還用于判斷頁面元素是否包含腳本錯誤，若是，則將頁面元素替換為相應(yīng)的提示信息。
[0052]在本實施例中，事件監(jiān)聽模塊104還用于判斷加載完畢事件是否包含異常指令，若否，則調(diào)用所述渲染數(shù)據(jù)獲取模塊。
[0053]在本實施例中，圖片生成模塊108還用于獲取圖片格式參數(shù)，根據(jù)圖片格式參數(shù)將頁面渲染數(shù)據(jù)編碼為圖片文件。
[0054]上述生成網(wǎng)頁截圖的方法及裝置與傳統(tǒng)技術(shù)中的解屏方法相比，并沒有利用操作系統(tǒng)提供的屏幕截圖接口對顯示網(wǎng)頁的屏幕窗口進(jìn)行截屏，而是通過在先加載網(wǎng)頁，再遍歷網(wǎng)頁的頁面元素，獲取頁面元素的頁面渲染數(shù)據(jù)生成網(wǎng)頁截圖。由于，加載網(wǎng)頁的過程能夠生成網(wǎng)頁中所有頁面元素的頁面渲染數(shù)據(jù)，即全網(wǎng)頁的頁面渲染數(shù)據(jù)，其并不依賴于顯示屏幕的大小和位置，因此，能夠生成全網(wǎng)頁截圖。
[0055]并且，由于加載網(wǎng)頁遍歷網(wǎng)頁的頁面元素，獲取頁面元素的頁面渲染數(shù)據(jù)的過程并不需要先調(diào)用操作系統(tǒng)的顯示接口進(jìn)行預(yù)覽或顯示，再通過屏幕截圖接口函數(shù)進(jìn)行截圖，使得生成網(wǎng)頁截圖的方法還可運行于沒有顯示設(shè)備的計算機(jī)系統(tǒng)上。
[0056]以上所述實施例僅表達(dá)了本發(fā)明的幾種實施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
【權(quán)利要求】
1.一種生成網(wǎng)頁截圖的方法，包括: 獲取上傳的網(wǎng)頁鏈接，根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁； 監(jiān)聽所述網(wǎng)頁的加載完畢事件； 遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)； 根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件并返回。
2.根據(jù)權(quán)利要求1所述的生成網(wǎng)頁截圖的方法，其特征在于，所述根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁的步驟還包括: 通過QtWebkit組件的QtWebPage對象加載所述網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁。
3.根據(jù)權(quán)利要求2所述的生成網(wǎng)頁截圖的方法，其特征在于，所述監(jiān)聽所述網(wǎng)頁的加載完畢事件的步驟還包括: 監(jiān)聽所述QtWebPage對象派發(fā)的LoadFinished事件指令。
4.根據(jù)權(quán)利要求2所述的生成網(wǎng)頁截圖的方法，其特征在于，所述頁面渲染數(shù)據(jù)包括所述頁面元素的高度、寬度以及像素值； 所述遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)的步驟還包括: 調(diào)用所述QtWebPage對象的頁面渲染函數(shù)，遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的高度、寬度以及像素值，根據(jù)所述高度、寬度以及像素值生成頁面渲染數(shù)據(jù)。
5.根據(jù)權(quán)利要求4所述的生成網(wǎng)頁截圖的方法，其特征在于，所述遍歷所述網(wǎng)頁的頁面元素的步驟還包括: 判斷所述頁面元素是否包含腳本錯誤，若是，則將所述頁面元素替換為相應(yīng)的提示信肩、O
6.根據(jù)權(quán)利要求1至5任一項所述的生成網(wǎng)頁截圖的方法，其特征在于，所述監(jiān)聽所述網(wǎng)頁的加載完畢事件的步驟之后還包括: 判斷所述加載完畢事件是否包含異常指令，若否，則遍歷所述網(wǎng)頁的頁面元素。
7.根據(jù)權(quán)利要求1至5任一項所述的生成網(wǎng)頁截圖的方法，其特征在于，所述根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件的步驟包括: 獲取圖片格式參數(shù)； 根據(jù)所述圖片格式參數(shù)將所述頁面渲染數(shù)據(jù)編碼為圖片文件。
8.—種生成網(wǎng)頁截圖的裝置，其特征在于，包括: 網(wǎng)頁加載模塊，用于獲取上傳的網(wǎng)頁鏈接，根據(jù)所述網(wǎng)頁鏈接加載網(wǎng)頁； 事件監(jiān)聽模塊，用于監(jiān)聽所述網(wǎng)頁的加載完畢事件； 渲染數(shù)據(jù)獲取模塊，用于遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的頁面渲染數(shù)據(jù)； 圖片生成模塊，用于根據(jù)所述頁面渲染數(shù)據(jù)生成圖片文件并返回。
9.根據(jù)權(quán)利要求8所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述網(wǎng)頁加載模塊還用于通過QtWebkit組件的QtWebPage對象加載所述網(wǎng)頁鏈接對應(yīng)的網(wǎng)頁。
10.根據(jù)權(quán)利要求9所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述事件監(jiān)聽模塊還用于監(jiān)聽所述QtWebPage對象派發(fā)的LoadFinished事件指令。
11.根據(jù)權(quán)利要求9所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述頁面渲染數(shù)據(jù)包括所述頁面元素的高度、寬度以及像素值； 所述渲染數(shù)據(jù)獲取模塊還用于調(diào)用所述QtWebPage對象的頁面渲染函數(shù)，遍歷所述網(wǎng)頁的頁面元素，獲取所述頁面元素的高度、寬度以及像素值，根據(jù)所述高度、寬度以及像素值生成頁面渲染數(shù)據(jù)。
12.根據(jù)權(quán)利要求11所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述渲染數(shù)據(jù)獲取模塊還用于判斷所述頁面元素是否包含腳本錯誤，若是，則將所述頁面元素替換為相應(yīng)的提不?目息。
13.根據(jù)權(quán)利要求8至12任一項所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述事件監(jiān)聽模塊還用于判斷所述加載完畢事件是否包含異常指令，若否，則調(diào)用所述渲染數(shù)據(jù)獲取模塊。
14.根據(jù)權(quán)利要求8至12任一項所述的生成網(wǎng)頁截圖的裝置，其特征在于，所述圖片生成模塊還用于獲取圖片格式參數(shù)；根據(jù)所述圖片格式參數(shù)將所述頁面渲染數(shù)據(jù)編碼為圖片文件。
【文檔編號】G06F17/30GK104462125SQ201310430933
【公開日】2015年3月25日 申請日期:2013年9月18日 優(yōu)先權(quán)日:2013年9月18日
【發(fā)明者】潘金赤, 蔡智博 申請人:騰訊科技（深圳）有限公司