一種頁面的匹配方法和裝置制造方法
【專利摘要】本申請?zhí)峁┝艘环N頁面的匹配方法和裝置，對不同瀏覽器顯示的相同頁面進行匹配以快速的查找出顯示效果存在差異的頁面。所述的方法包括：在至少兩種瀏覽器中開啟服務器中運行的同一頁面，并分別從各瀏覽器中截取所述同一頁面的圖像；分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中提取的關鍵像素點確定局部特征，其中，所述截取的圖像包括基準圖像和對比圖像；計算所述對比圖像相對于基準圖像的全局特征的第一相似度，以及局部特征的第二相似度；通過對所述全局特征的第一相似度和局部特征的第二相似度進行加權求和，確定所述基準圖像和對比圖像對應頁面的匹配結果。
【專利說明】一種頁面的匹配方法和裝置

【技術領域】
[0001] 本申請涉及互聯(lián)網(wǎng)技術，特別是涉及一種頁面的匹配方法和裝置。

【背景技術】
[0002] 隨著科技的發(fā)展，越來越多的用戶在網(wǎng)絡上瀏覽、查找資源，用戶通常是通過瀏覽 器進行上網(wǎng)的。用戶使用瀏覽器打開網(wǎng)站的頁面時，瀏覽器通常先從網(wǎng)站的服務器中獲取 頁面的頁面腳本，如HTML腳本，然后瀏覽器會對頁面腳本進行渲染以顯示該頁面。
[0003] 但是，當前存在多款瀏覽器，如IE (Internet Explorer)瀏覽器，火狐（FireFox) 瀏覽器和Chrome瀏覽器等，不同瀏覽器在顯示頁面時會采取不同的技術。如HTML腳本采 用html語言生成，采用不同的瀏覽器打開同一頁面時，雖然是采用相同的HTML腳本，但由 于不同瀏覽器對腳本中的html語言可能會有不同的解釋，并可能采取不同的渲染技術進 行頁面的渲染，因而可能出現(xiàn)在不同瀏覽器打開相同頁面時，頁面的顯示效果存在差異的 情況。
[0004] 而在實際情況中，上述頁面顯示的效果存在差異時，可能會出現(xiàn)某種瀏覽器打開 的頁面信息表達不完整，甚至頁面信息出現(xiàn)錯誤的情況。
[0005] 因此，本領域技術人員迫切解決的技術問題是，提出一種頁面的匹配方法，對不同 瀏覽器顯示的相同頁面進行匹配，以快速的查找出顯示效果存在差異的頁面。


【發(fā)明內容】

[0006] 本申請?zhí)峁┮环N頁面的匹配方法和裝置，對不同瀏覽器顯示的相同頁面進行匹 配，以快速的查找出顯示效果存在差異的頁面。
[0007] 為了解決上述問題，本申請公開了一種頁面的匹配方法，包括：
[0008] 在至少兩種瀏覽器中開啟服務器中運行的同一頁面，并分別從各瀏覽器中截取所 述同一頁面的圖像；
[0009] 分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中提取的關鍵像素點確 定局部特征，其中，所述截取的圖像包括基準圖像和對比圖像，所述基準圖像為選定的瀏覽 器中截取的圖像，所述對比圖像為除所述基準圖像以外的其他瀏覽器中截取的圖像；
[0010] 計算所述對比圖像相對于基準圖像的全局特征的第一相似度，以及局部特征的第 二相似度；
[0011] 通過對所述全局特征的第一相似度和局部特征的第二相似度進行加權求和，確定 所述基準圖像和對比圖像對應頁面的匹配結果。
[0012] 可選的，所述從各瀏覽器中截取所述同一頁面的圖像之后，還包括：對截取的圖像 進行預處理得到尺寸相同的灰度圖像。
[0013] 可選的，所述分別提取各截取的圖像的全局特征，包括：分別提取各灰度圖像的梯 度，并依據(jù)所述梯度計算梯度直方圖；將所述基準圖像的梯度和梯度直方圖作為所述基準 圖像的全局特征，并將所述對比圖像的梯度和梯度直方圖作為所述對比圖像的全局特征。
[0014] 可選的，所述分別提取各灰度圖像的梯度，并依據(jù)所述梯度計算梯度直方圖，包 括：分別提取所述各灰度圖像中像素點的像素值；通過所述像素值計算對應灰度圖像的梯 度；依據(jù)所述灰度圖像的梯度計算梯度的和，作為所述灰度圖像的梯度直方圖。
[0015] 可選的，所述依據(jù)各截取的圖像中提取的關鍵像素點確定局部特征，包括：采取尺 度不變特征轉換SIFT算法提取所述灰度圖像中的關鍵像素點；以所述關鍵像素點為中心 確定所述關鍵像素點的局部特征；將所述基準圖像中關鍵像素點的局部特征作為所述基準 圖像的局部特征，并將所述對比圖像中關鍵像素點的局部特征作為所述對比圖像的局部特 征。
[0016] 可選的，以所述關鍵像素點為中心確定所述關鍵像素點的局部特征，包括：以所述 關鍵像素點為中心選取像素點作為像素組；將所述像素組與所述關鍵像素點進行比較，確 定所述關鍵像素點的局部特征。
[0017] 可選的，計算所述對比圖像相對于基準圖像的全局特征的第一相似度，包括：計算 所述對比圖像的梯度直方圖相對于所述基準圖像的梯度直方圖的相似度，作為所述基準圖 像相對于對比圖像的全局特征的第一相似度。
[0018] 可選的，其特征在于，所述對比圖像相對于基準圖像的局部特征的第二相似度的 計算方法包括：以所述基準圖像的關鍵像素點為節(jié)點構建視覺樹；采用所述對比圖像的關 鍵像素點對所述視覺樹進行查找，確定對比的葉子節(jié)點；計算所述對比圖像的關鍵像素點 相對于所述葉子節(jié)點的相似度，作為所述對比圖像相對于基準圖像的局部特征的第二相似 度。
[0019] 可選的，所述通過對所述全局特征的第一相似度和局部特征的第二相似度進行加 權求和，確定所述基準圖像和對比圖像對應頁面的匹配結果，包括：按照預置的權重分別對 所述全局特征的第一相似度和局部特征的第二相似度進行加權并求和，確定所述對比圖像 相對于所述基準圖像的整體相似度；將所述整體相似度與預置的匹配閾值進行比較，確定 所述基準圖像和對比圖像對應頁面的匹配結果。
[0020] 可選的，所述將所述整體相似度與預置的匹配閾值進行比較，確定所述基準圖像 和對比圖像對應頁面的匹配結果，包括：檢測所述整體相似度是否大于所述預置的匹配閾 值；當所述整體相似度大于所述預置的匹配閾值時，所述基準圖像和對比圖像對應頁面匹 配失??；當所述整體相似度小于或等于所述預置的匹配閾值時，所述基準圖像和對比圖像 對應頁面匹配成功。
[0021] 可選的，所述對截取的圖像進行預處理得到尺寸相同的灰度圖像，包括：對所述截 取的圖像進行尺度變換，得到尺寸相同的圖像；對所述尺寸相同的圖像進行灰度圖像轉換， 得到對應的灰度圖像。
[0022] 相應的，本申請還公開了一種頁面的匹配裝置，包括：
[0023] 頁面開啟并截取模塊，用于在至少兩種瀏覽器中開啟服務器中運行的同一頁面， 并分別從各瀏覽器中截取所述同一頁面的圖像；
[0024] 特征提取模塊，用于分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中 提取的關鍵像素點確定局部特征，其中，所述截取的圖像包括基準圖像和對比圖像，所述基 準圖像為選定的瀏覽器中截取的圖像，所述對比圖像為除所述基準圖像以外的其他瀏覽器 中截取的圖像；
[0025] 相似度計算模塊，用于計算所述基準圖像相對于對比圖像的全局特征的第一相似 度，以及局部特征的第二相似度；
[0026] 結果確定模塊，用于通過對所述全局特征的第一相似度和局部特征的第二相似度 進行加權求和，確定所述基準圖像和對比圖像對應頁面的匹配結果。
[0027] 與現(xiàn)有技術相比，本申請包括以下優(yōu)點：
[0028] 首先，本申請實施例對不同瀏覽器中開啟的同一頁面進行圖像截取，從而通過圖 像獲取頁面的真實顯示情況。再對截取的圖像進行全局特征和局部特征的比對，以對不同 瀏覽器中開啟的同一頁面進行匹配，確定不同瀏覽器開啟的同一頁面的匹配結果，通過圖 像的特征比對可以提高頁面匹配的準確性，并可以快速的查找出顯示效果存在差異的頁 面，提高頁面的匹配的效率。

【專利附圖】

【附圖說明】
[0029] 圖1是本申請實施例一提供的頁面匹配方法流程圖；
[0030] 圖2是本申請實施例一提供的局部特征提取示意圖；
[0031] 圖3是本發(fā)明實施例二提供的頁面的匹配裝置結構圖。

【具體實施方式】
[0032] 為使本申請的上述目的、特征和優(yōu)點能夠更加明顯易懂，下面結合附圖和具體實 施方式對本申請作進一步詳細的說明。
[0033] 由于不同的瀏覽器采取了不同的技術，導致其在使用同一網(wǎng)頁腳本打開同一頁面 時，對腳本語言可能存在不同的解釋，并可能采取不同的渲染技術進行頁面的渲染，因而可 能出現(xiàn)在不同瀏覽器打開相同頁面時，頁面的顯示效果存在差異的情況。
[0034] 這種差異可能導致用戶使用某款瀏覽器時，開啟的頁面中出現(xiàn)頁面信息表達不完 整，甚至頁面信息出現(xiàn)錯誤的情況。使得用戶看到錯誤的頁面信息或無法獲取頁面信息，嚴 重的影響了用戶的體驗。
[0035] 為了防止出現(xiàn)上述問題，其中一種應用場景是在網(wǎng)站構建、維護，網(wǎng)頁開發(fā)等過程 中，會預先對不同瀏覽器顯示同一頁面進行測試、匹配，并在出現(xiàn)上述問題時對頁面腳本進 行修改，提高用戶的體驗效果。
[0036] 本申請實施例提供了頁面的匹配方法，采用圖像處理技術，對不同瀏覽器中開啟 的同一頁面進行圖像截取，再對截取的圖像進行全局特征和局部特征的比對，以對不同瀏 覽器中開啟的同一頁面進行匹配，確定不同瀏覽器開啟的同一頁面的匹配結果，通過圖像 的特征比對可以提高頁面匹配的準確性，并可以快速的查找出顯示效果存在差異的頁面， 提高頁面的匹配的效率。
[0037] 實施例一
[0038] 參照圖1，給出了本申請實施例一提供的頁面匹配方法流程圖。
[0039] 步驟101，在至少兩種瀏覽器中開啟服務器中運行的同一頁面，并分別從各瀏覽器 中截取所述同一頁面的圖像。
[0040] 為了檢測同一頁面腳本在不同瀏覽器中顯示的頁面是否一致，本申請獲取服務器 中運行的某一頁面的頁面腳本，然后在至少兩種瀏覽器中運行該頁面腳本，從而在至少兩 種瀏覽器中開啟同一頁面。具體實施中，可以在各瀏覽器中輸入要開啟的頁面的網(wǎng)頁地址， 即統(tǒng)一資源定位符（Uniform Resource Locator,URL)地址，然后該瀏覽器會自動向服務器 請求頁面腳本，并對頁面腳本進行渲染以開啟頁面。
[0041] 本申請實施例中,所采用的瀏覽器可以按照內核劃分，如IE內核和非IE內核，也 可以按照所采用的排版引擎劃分，包括：Trident排版引擎（如IE瀏覽器）、Gecko排版引 擎（如FireFox)、KHTML排版引擎（如搜狗瀏覽器2)和Presto排版引擎（如Opera瀏覽 器）等。還可以按照瀏覽器的名稱劃分，如可以包括IE瀏覽器、FireFoxXhrome瀏覽器和 Opera瀏覽器等。瀏覽器的劃分可以按照實際需求而定，本申請實施例對此不作限定。 [0042] 然后針對同一頁面的相同位置，從各瀏覽器中截取對應的圖像，如選取同一頁面 的標題位置，然則可以從各瀏覽器中顯示的頁面的標題位置處截取圖像。
[0043] 步驟102,分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中提取的關鍵 像素點確定局部特征。
[0044] 在圖像截取完畢后，可以對截取的圖像進行特征提取操作。本申請實施例為了對 圖像進行更準確的比對，采用將圖像的全局特征與局部特征相融合的方法，因此針對每一 個截取的圖像，可以提取該截取的圖像的全局特征，如計算直方圖等，然后再從各截取的圖 像中提取關鍵像素點，依據(jù)該關鍵像素點確定圖像的局部特征。
[0045] 其中，全局特征描述如顏色直方圖、顏色矩陣、灰度共生矩陣等，這些特征描述反 映的是圖像的全局信息。而局部特征從圖像的內容出發(fā)，提取出感興趣的內容，通常，局部 特征具有足夠的描述能力和區(qū)分度，以達到描述圖像特征的目的。從而本申請實施例在依 據(jù)全局的角度對圖像進行比對的基礎上，還可以對圖像的細節(jié)進行區(qū)分，從而更準確的對 兩張圖像進行比對，以確定圖像對應的頁面是否匹配。
[0046] 本申請實施例中，為了對截取的圖像進行標準化的比對，可以將截取的圖像劃分 為基準圖像和對比圖像。其中，所述基準圖像為選定的瀏覽器中截取的圖像，所述對比圖像 為除所述基準圖像以外的其他瀏覽器中截取的圖像。
[0047] 如進行對比的瀏覽器包括IE瀏覽器、FireFox和Chrome瀏覽器，則可以將IE瀏 覽器作為選定的瀏覽器，則將從IE瀏覽器中截取的圖像作為基準圖像，將從FireFox和 Chrome瀏覽器中截取的圖像作為對比圖像。采用對比圖像與基準圖像進行比對，確定對應 頁面的匹配結果。
[0048] 在本申請的一種可選實施例中，步驟101之后，還包括：對截取的圖像進行預處理 得到尺寸相同的灰度圖像。進一步的，所述對截取的圖像進行預處理得到尺寸相同的灰度 圖像，包括：對所述截取的圖像進行尺度變換，得到尺寸相同的圖像；對所述尺寸相同的圖 像進行灰度圖像轉換，得到對應的灰度圖像。
[0049] 本發(fā)明實施例中，為了能夠更準確的進行后續(xù)的特征提取和比對處理，可以在截 取圖像后將截取的圖像進行預處理以獲取尺寸相同的灰度圖像。首先可以對截取的圖像進 行尺度變換，如以基準圖像的尺寸為基準，將對比圖像通過尺寸變換（如放大或縮小等）得 到與基準圖像的尺寸相同的對比圖像，然后再對基準圖像和對比圖像分別進行灰度圖像轉 換，得到對應的灰度圖像。則經(jīng)過預處理后對比圖像和基準圖像均為灰度圖像并且尺寸相 同。
[0050] 在本申請的一種可選實施例中，步驟102中分別提取各截取的圖像的全局特征， 可以包括如下步驟：分別提取各灰度圖像的梯度，并依據(jù)所述梯度計算梯度直方圖；將所 述基準圖像的梯度和梯度直方圖作為所述基準圖像的全局特征，并將所述對比圖像的梯度 和梯度直方圖作為所述對比圖像的全局特征。
[0051] 則所述分別提取各灰度圖像的梯度，并依據(jù)所述梯度計算梯度直方圖，包括如下 子步驟：
[0052] 子步驟S201，分別提取所述各灰度圖像中像素點的像素值；
[0053] 子步驟S202,通過所述像素值計算對應灰度圖像的梯度；
[0054] 子步驟S203,依據(jù)所述灰度圖像的梯度計算梯度的和，作為所述灰度圖像的梯度 直方圖。
[0055] 本申請實施例中，將各截取的圖像預處理成尺寸相同的灰度圖像后，可以提取各 灰度圖像的全局特征，其中，可以通過灰度的變化來反映圖像的全局特征，因此可以將邊緣 定義為圖像中灰度發(fā)生急劇變化的區(qū)域邊界，而圖像灰度的變化情況可以用圖像灰度分布 的梯度來反映。從而本申請實施例可以通過提取各灰度圖像的梯度并計算梯度直方圖來描 述全局特征。
[0056] 實際處理中，可以把圖像看作二維離散函數(shù)，圖像的梯度就是這個二維離散函數(shù) 的求導，可以得到如下的向量：
[0057]

【權利要求】
1. 一種頁面的匹配方法，其特征在于，包括： 在至少兩種瀏覽器中開啟服務器中運行的同一頁面，并分別從各瀏覽器中截取所述同 一頁面的圖像； 分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中提取的關鍵像素點確定局 部特征，其中，所述截取的圖像包括基準圖像和對比圖像，所述基準圖像為選定的瀏覽器中 截取的圖像，所述對比圖像為除所述基準圖像以外的其他瀏覽器中截取的圖像； 計算所述對比圖像相對于基準圖像的全局特征的第一相似度，以及局部特征的第二相 似度； 通過對所述全局特征的第一相似度和局部特征的第二相似度進行加權求和，確定所述 基準圖像和對比圖像對應頁面的匹配結果。
2. 根據(jù)權利要求1所述的方法，其特征在于，所述從各瀏覽器中截取所述同一頁面的 圖像之后，還包括： 對截取的圖像進行預處理得到尺寸相同的灰度圖像。
3. 根據(jù)權利要求2所述的方法，其特征在于，所述分別提取各截取的圖像的全局特征， 包括： 分別提取各灰度圖像的梯度，并依據(jù)所述梯度計算梯度直方圖； 將所述基準圖像的梯度和梯度直方圖作為所述基準圖像的全局特征，并將所述對比圖 像的梯度和梯度直方圖作為所述對比圖像的全局特征。
4. 根據(jù)權利要求3所述的方法，其特征在于，所述分別提取各灰度圖像的梯度，并依據(jù) 所述梯度計算梯度直方圖，包括： 分別提取所述各灰度圖像中像素點的像素值； 通過所述像素值計算對應灰度圖像的梯度； 依據(jù)所述灰度圖像的梯度計算梯度的和，作為所述灰度圖像的梯度直方圖。
5. 根據(jù)權利要求2所述的方法，其特征在于，所述依據(jù)各截取的圖像中提取的關鍵像 素點確定局部特征，包括： 采取尺度不變特征轉換SIFT算法提取所述灰度圖像中的關鍵像素點； 以所述關鍵像素點為中心確定所述關鍵像素點的局部特征； 將所述基準圖像中關鍵像素點的局部特征作為所述基準圖像的局部特征，并將所述對 比圖像中關鍵像素點的局部特征作為所述對比圖像的局部特征。
6. 根據(jù)權利要求5所述的方法，其特征在于，以所述關鍵像素點為中心確定所述關鍵 像素點的局部特征，包括： 以所述關鍵像素點為中心選取像素點作為像素組； 將所述像素組與所述關鍵像素點進行比較，確定所述關鍵像素點的局部特征。
7. 根據(jù)權利要求1至4任一所述的方法，其特征在于，計算所述對比圖像相對于基準圖 像的全局特征的第一相似度，包括： 計算所述對比圖像的梯度直方圖相對于所述基準圖像的梯度直方圖的相似度，作為所 述基準圖像相對于對比圖像的全局特征的第一相似度。
8. 根據(jù)權利要求1、2、5或6任一所述的方法，其特征在于，所述對比圖像相對于基準圖 像的局部特征的第二相似度的計算方法包括： 以所述基準圖像的關鍵像素點為節(jié)點構建視覺樹； 采用所述對比圖像的關鍵像素點對所述視覺樹進行查找，確定對比的葉子節(jié)點； 計算所述對比圖像的關鍵像素點相對于所述葉子節(jié)點的相似度，作為所述對比圖像相 對于基準圖像的局部特征的第二相似度。
9. 根據(jù)權利要求1至6任一所述的方法，其特征在于，所述通過對所述全局特征的第一 相似度和局部特征的第二相似度進行加權求和，確定所述基準圖像和對比圖像對應頁面的 匹配結果，包括： 按照預置的權重分別對所述全局特征的第一相似度和局部特征的第二相似度進行加 權并求和，確定所述對比圖像相對于所述基準圖像的整體相似度； 將所述整體相似度與預置的匹配閾值進行比較，確定所述基準圖像和對比圖像對應頁 面的匹配結果。
10. 根據(jù)權利要求9所述的方法，其特征在于，所述將所述整體相似度與預置的匹配閾 值進行比較，確定所述基準圖像和對比圖像對應頁面的匹配結果，包括： 檢測所述整體相似度是否大于所述預置的匹配閾值； 當所述整體相似度大于所述預置的匹配閾值時，所述基準圖像和對比圖像對應頁面匹 配失?。? 當所述整體相似度小于或等于所述預置的匹配閾值時，所述基準圖像和對比圖像對應 頁面匹配成功。
11. 根據(jù)權利要求2所述的方法，其特征在于，所述對截取的圖像進行預處理得到尺寸 相同的灰度圖像，包括： 對所述截取的圖像進行尺度變換，得到尺寸相同的圖像； 對所述尺寸相同的圖像進行灰度圖像轉換，得到對應的灰度圖像。
12. -種頁面的匹配裝置，其特征在于，包括： 頁面開啟并截取模塊，用于在至少兩種瀏覽器中開啟服務器中運行的同一頁面，并分 別從各瀏覽器中截取所述同一頁面的圖像； 特征提取模塊，用于分別提取各截取的圖像的全局特征，并依據(jù)各截取的圖像中提取 的關鍵像素點確定局部特征，其中，所述截取的圖像包括基準圖像和對比圖像，所述基準圖 像為選定的瀏覽器中截取的圖像，所述對比圖像為除所述基準圖像以外的其他瀏覽器中截 取的圖像； 相似度計算模塊，用于計算所述基準圖像相對于對比圖像的全局特征的第一相似度， 以及局部特征的第二相似度； 結果確定模塊，用于通過對所述全局特征的第一相似度和局部特征的第二相似度進行 加權求和，確定所述基準圖像和對比圖像對應頁面的匹配結果。
【文檔編號】G06F17/30GK104111960SQ201310142160
【公開日】2014年10月22日 申請日期:2013年4月22日 優(yōu)先權日:2013年4月22日
【發(fā)明者】張 榮 申請人:阿里巴巴集團控股有限公司