網頁內容展示方法及裝置製造方法
2023-07-01 05:31:41 2
網頁內容展示方法及裝置製造方法
【專利摘要】本公開是關於網頁內容展示方法及裝置，用以提高網頁內容的3D展示的真實性，所述方法，用於瀏覽器，包括：調用攝像頭捕獲目標物體的外形圖像；根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；根據所述相對位置對所述網頁中內容進行三維渲染。本公開技術方案通過攝像頭捕獲的目標物體的外形圖像來確定目標物體與屏幕的相對位置，再根據相對位置來對網頁內容進行3D渲染，如此，能夠根據目標物體的相對位置的變化，而實時調整展示的網頁內容，進而使得網頁內容的3D展示具有實時性，提高了網頁內容的3D展示的逼真性。
【專利說明】網頁內容展示方法及裝置
【技術領域】
[0001 ] 本公開涉及計算機網絡【技術領域】，尤其涉及網頁內容展示方法及裝置。
【背景技術】
[0002]在相關技術中，採用終端遊戲所用的3D顯示技術對網頁內容進行展示。終端遊戲所用的3D顯示技術為:對遊戲中場景和角色進行建模，生成數據結構，根據該數據結構和設定的視點將圖像投影到屏幕上。在採用終端遊戲的3D顯示技術對網頁內容進行展示時，假定用戶距離屏幕的位置固定，展示過程中都是以該固定的位置為視點進行3D渲染。在這種情況下，屏幕中展示的網頁內容不會隨用戶位置的變化而變化；如果想要轉換網頁內容的展示角度，只能通過一些機械動作，例如點擊拖拽滑鼠、滑動滑鼠滾輪、操作鍵盤按鍵等動作來進行。
[0003]相關技術中具有如下缺陷:不能根據用戶位置的變化，而實時地調整展示中的網頁內容，進而降低了網頁內容的3D展示的真實性。
【發明內容】
[0004]為克服相關技術中存在的問題，本公開實施例提供網頁內容展示方法及裝置，用以提高網頁內容的3D展示的真實性。
[0005]根據本公開實施例的第一方面，提供一種網頁內容展示方法，用於瀏覽器，包括:
[0006]調用攝像頭捕獲目標物體的外形圖像；
[0007]根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；
[0008]根據所述相對位置對所述網頁中內容進行三維渲染。
[0009]在一個實施例中，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0010]對所述目標物體的外形進行人臉識別，識別出臉部圖像；
[0011]根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
[0012]在一個實施例中，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0013]比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；
[0014]根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
[0015]在一個實施例中，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0016]對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；
[0017]當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0018]在一個實施例中，所述根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，可包括:
[0019]根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者，
[0020]根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0021]在一個實施例中，所述根據所述相對位置對所述網頁中內容進行三維渲染，可包括:
[0022]對所述網頁中元素進行建模，生成數據結構；
[0023]以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
[0024]在一個實施例中，所述方法還可包括:
[0025]根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置；
[0026]根據所述過渡位置對所述網頁中內容進行三維渲染；
[0027]所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0028]在一個實施例中，所述根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置，包括:
[0029]比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息；
[0030]根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置；
[0031]所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置；
[0032]所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
[0033]根據本公開的實施例的第二方面，提供一種網頁內容展示裝置，用於瀏覽器，包括:
[0034]圖像捕獲模塊，用於調用攝像頭捕獲目標物體的外形圖像；
[0035]位置確定模塊，用於根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；
[0036]三維渲染模塊，用於根據所述相對位置對所述網頁中內容進行三維渲染。
[0037]在一個實施例中，所述位置確定模塊，可包括:
[0038]人臉識別單元，對所述目標物體的外形進行人臉識別，識別出臉部圖像；
[0039]位置確定單元，用於根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
[0040]在一個實施例中，所述位置確定單元，可包括:
[0041]第一圖像比較單元，用於比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；
[0042]第一位置確定單元，用於根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
[0043]在一個實施例中，所述位置確定單元，可包括:
[0044]第二圖像比較單元，用於對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；
[0045]第二位置確定單元，用於當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0046]在一個實施例中，所述第二位置確定子單元，可包括:
[0047]第一位置確定子單元，用於根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者，
[0048]第二位置確定子單元，用於根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0049]在一個實施例中，所述三維渲染模塊，可包括:
[0050]數據結構生產單元，用於對所述網頁中元素進行建模，生成數據結構；
[0051]網頁元素投影單元，用於以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
[0052]在一個實施例中，所述裝置還可包括:
[0053]過渡位置插補模塊，用於根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置；
[0054]所述三維渲染模塊還包括:
[0055]三維渲染單元，用於根據所述過渡位置對所述網頁中內容進行三維渲染；
[0056]所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0057]在一個實施例中，所述過渡位置插補模塊，可包括:
[0058]變化信息獲得單元，用於比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息；
[0059]過渡位置插補單元，用於根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置；
[0060]所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置；
[0061]所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
[0062]根據本公開實施例的第三方面，提供一種網頁內容展示裝置，包括:
[0063]處理器；
[0064]用於存儲處理器可執行指令的存儲器；
[0065]其中，所述處理器被配置為:
[0066]調用攝像頭捕獲目標物體的外形圖像；
[0067]根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；
[0068]根據所述相對位置對所述網頁中內容進行三維渲染。
[0069]本公開的實施例提供的技術方案可以包括以下有益效果:通過攝像頭捕獲的目標物體的外形圖像來確定目標物體與屏幕的相對位置，再根據相對位置來對網頁內容進行3D渲染，如此，能夠根據目標物體的相對位置的變化，而實時調整展示的網頁內容，進而使得網頁內容的3D展示具有實時性，提高了網頁內容的3D展示的逼真性。
[0070]應當理解的是，以上的一般描述和後文的細節描述僅是示例性和解釋性的，並不能限制本公開。
【專利附圖】
【附圖說明】
[0071]此處的附圖被併入說明書中並構成本說明書的一部分，示出了符合本公開的實施例，並與說明書一起用於解釋本公開的原理。
[0072]圖1是根據一示例性實施例示出的一種網頁內容展示方法的流程圖。
[0073]圖2A是根據一示例性實施例示出的用戶相對於屏幕進行位置變化的示意圖。
[0074]圖2B是根據一示例性實施例示出的屏幕中展示的網頁內容隨用戶位置變化而變化的示意圖。
[0075]圖3是根據一示例性實施例示出的另一種網頁內容展示方法的流程圖。
[0076]圖4A是根據一示例性實施例一示出的網頁內容展示方法的流程圖。
[0077]圖4B是根據一示例性實施例一中攝像頭捕獲的身體圖像的示意圖。
[0078]圖4C是根據一示例性實施例一中進行人臉識別的臉部圖像的示意圖。
[0079]圖4D是根據一示例性實施例一中兩幀臉部圖像比較的示意圖。
[0080]圖5是根據一示例性實施例示出的一種網頁內容展示裝置的框圖。
[0081]圖6是根據一示例性實施例示出的另一種網頁內容展示裝置的框圖。
[0082]圖7是根據一示例性實施例示出的一種適用於網頁內容展示裝置的框圖(終端設備的一般結構)。
【具體實施方式】
[0083]這裡將詳細地對示例性實施例進行說明，其示例表示在附圖中。下面的描述涉及附圖時，除非另有表示，不同附圖中的相同數字表示相同或相似的要素。以下示例性實施例中所描述的實施方式並不代表與本公開相一致的所有實施方式。相反，它們僅是與如所附權利要求書中所詳述的、本公開的一些方面相一致的裝置和方法的例子。
[0084]圖1是根據一示例性實施例示出的一種網頁內容展示方法的流程圖，如圖1所示，該網頁內容展示方法用於瀏覽器，該瀏覽器位於終端設備中，如手機、平板電腦中或應用程式中，包括以下步驟S101-S103:
[0085]在步驟SlOl中、調用攝像頭捕獲目標物體的外形圖像。
[0086]在一實施例中，瀏覽器中使用HTML5(超文本標記語言版本5,Hyper Text Make-upLanguage5),通過HTML5中Javascript (Java腳本語言)調用接口利用攝像頭捕獲目標物體的外形圖像，該目標物體的外形圖像可以為用戶的身體圖像。
[0087]在步驟S102中、根據所述目標物體的外形圖像的變化，確定目標物體與網頁所在屏幕的相對位置。
[0088]在一實施例中，上述步驟S102可以實施為如下步驟A1-A2:
[0089]在步驟Al中、對目標物體的外形進行人臉識別，識別出臉部圖像。
[0090]在一舉例說明中，步驟Al可以實施為:調用Open CV(開源計算機視覺庫，OpenSource Computer Vis1n Library)的人臉識別庫對目標物體的外形進行人臉識別，識別出面部圖像。
[0091]在步驟A2中、根據臉部圖像的變化，確定目標物體與網頁所在屏幕的相對位置。
[0092]上述步驟S102可以以多種方式實施。
[0093]在一示例性實施方式中，步驟S102可以實施為:比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；根據變化信息和標準圖像對應的預設位置信息確定相對位置。
[0094]例如，通過對用戶使用屏幕時位置進行統計，獲知用戶面對27寸顯示器的距離平均為X釐米，則以該X釐米為預設位置信息，並且對應於該預設位置信息設置一標準圖像。該標準圖像可以為用戶距離屏幕為X釐米時，攝像頭捕獲到的目標物體的外形圖像。比較目標物體的外形圖像與標準圖像中預設區域，例如雙眼連線，的大小的差別和位置的差別，進而獲得變化信息，該變化信息包括距離變化百分比和角度變化百分比。再依據該變化信息和預設位置信息得出相對位置。
[0095]在另一示例性實施方式中，步驟S102可以實施為:對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；當兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0096]在本實施方式中，當前後兩個時刻捕獲的兩幀外形圖像中預設區域發生差異時，說明相對位置發生了變化，所以需要確定新的相對位置。這樣，可以避免當位置沒有發生變化時，確定位置，因此減少了對位置確定的次數，減少了終端運行本公開中方法所用資源，提高了方法的執行效率。
[0097]上述根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置可實施為:根據將兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0098]舉例而言，對於前一時刻和當前時刻捕獲的兩幀外形圖像中的預設區域，比較預設區域，例如雙眼連線，的大小的差別和位置的差別，進而獲得變化信息。該變化信息包括距離變化百分比和角度變化百分比。再依據該變化信息和前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置得出當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。其中，對於攝像頭捕獲的第一幀外形圖像，將第一幀外形圖像與預設的標準圖像間進行比較，根據比較所得變化信息和標準圖像對應的預設位置信息，確定第一外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。對於攝像頭之後捕獲的各幀外形圖像，按本實施方式中方法，通過與攝像頭捕獲的前一幀外形圖像比較來確定相對位置。
[0099]上述根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置可實施為:根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0100]本公開中對於步驟S102具有多種實施方式，此處僅為示例性說明，對此沒有特別限制。
[0101]在步驟S103中、根據確定的相對位置對網頁中內容進行三維渲染。
[0102]在一實施例中，上述步驟S103可以實施為如下步驟B1-B2:
[0103]在步驟BI中、對網頁中元素進行建模，生成數據結構。
[0104]在步驟B2中、以確定的相對位置為視點，根據數據結構將網頁中元素投影到屏眷。
[0105]舉例而言，如圖2A所示，目標物體為用戶，攝像頭捕獲的外形圖像為身體圖像，用戶初始時位於屏幕中央，正對屏幕，之後用戶向下偏移。通過執行步驟SlOl和步驟S102，得出用戶的兩個位置，位置I和位置2。對網頁中元素進行建模，生成數據結構。本舉例中，網頁中元素為矩形，生成的數據結構中包括該矩形的狀態信息，該矩形可以是假定為空間的固定位置，也可以是與用戶相對靜止，其位置隨用戶位置的變化而變化。分別以用戶的位置I和位置2為視點，將矩形投影到屏幕，獲得如圖2B所示的展示內容。在位置I處，用戶正對屏幕，在屏幕中展示的圖像仍為一個矩形；在位置2處，用戶相對於屏幕位置下移，在屏幕中展示的圖像為一梯形。
[0106]當數據結構中定義網頁中元素相對於用戶靜止時，在用戶位置下移時，網頁中元素在屏幕中位置也下移，在用戶遠離屏幕時，屏幕中呈現的頁面元素變大，這樣使得用戶始終可以看清屏幕中呈現的網頁內容。
[0107]因此，可見，採用本公開中方法，通過攝像頭捕獲的目標物體的外形圖像來確定目標物體與屏幕的相對位置，再根據相對位置來對網頁內容進行3D渲染，如此，能夠根據目標物體的相對位置的變化，而實時調整展示的網頁內容，進而使得網頁內容的3D展示具有實時性，提高了網頁內容的3D展示的逼真性。
[0108]圖3是根據一示例性實施例示出的另一種網頁內容展示方法的流程圖，如圖3所示，該網頁內容展示方法用於瀏覽器，該瀏覽器位於終端設備中，如手機、平板電腦中或應用程式中，包括以下步驟S301-S304:
[0109]在步驟S301中、調用攝像頭捕獲目標物體的外形圖像。
[0110]在步驟S302中、根據目標物體的外形圖像的變化，確定目標物體與網頁所在屏幕的相對位置。
[0111]在步驟S303中、根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置。
[0112]其中，過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0113]在一實施例中，上述步驟S303可以實施為如下步驟C1-C2:
[0114]在步驟Cl中、比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息。
[0115]在步驟C2中、根據所述變化信息和第一相對位置在第一相對位置和第二相對位置間插補過渡位置。
[0116]其中，第一相對位置為根據第一外形圖像確定的目標物體與網頁所在屏幕的相對位置；第二相對位置為根據第二外形圖像確定的目標物體與網頁所在屏幕的相對位置。
[0117]舉例而言，對第一外形圖像和第二外形圖像中的預設區域，比較預設區域，例如雙眼連線，的大小的差別和位置的差別，獲得變化信息。該變化信息包括距離變化百分比a和角度變化百分比b。在區間(0，a)內取點al，按照al與a的比例，在區間(0，b)內取點bl。例如，當al = a/2時，取bl =b/2。根據取點al和bl以及第一相對位置，得出一個過渡位置，將該過渡位置插入第一相對位置和第二相對位置之間。如此，可以在區間(0，a)和區間(O, b)內取多個點，確定出多個過渡位置，插入到第一相對位置和第二相對位置之間。
[0118]步驟S303的實現方式不限於此。例如，步驟S303的實施方式也可以為:利用插補幀技術在第一外形圖像和第二外形圖像間插補圖像，根據插補的圖像確定出過渡位置。其中，根據插補的圖像確定出過渡位置的實現方式參考步驟S102中描述，在此不再贅述。又例如，步驟S303的實施方式還可以為:將多個相對位置進行擬合，擬合出軌跡，在軌跡中取點作為過渡位置。
[0119]在步驟S304中、根據相對位置和過渡位置對網頁中內容進行三維渲染。
[0120]在本實施例中，通過在相對位置間插補過渡位置，使得當用戶移動時，屏幕中呈現連續變化的3D渲染網頁具有更多幀的圖像，進而使得屏幕中呈現的3D網頁視頻頻率更高，從而避免人眼產生閃爍感。
[0121]實施例一
[0122]圖4A是根據一示例性實施例一示出的網頁內容展示方法的流程圖。實施例一中方法應用在瀏覽器中，其應用場景如下:瀏覽器位於終端，終端具有攝像頭，瀏覽器為用戶呈現3D效果的網頁內容。其中，目標物體為用戶，外形圖像為身體圖像，預設區域為臉部圖像。實施例一中方法包括如下步驟S401-S406:
[0123]在步驟S401中、調用攝像頭捕獲用戶的身體圖像。
[0124]如圖4B所示，調用攝像頭捕獲到一幀用戶的身體圖像。其中，可以將攝像頭設置為按一預設頻率捕獲用戶的身體圖像。
[0125]在步驟S402中、調用Open CV的人臉識別庫對身體圖像進行人臉識別，識別出面部圖像。
[0126]如圖4C所示，調用Open CV的人臉識別庫，識別出圖像中人臉的位置，並可以確定人臉是否面對屏幕。
[0127]在步驟S403中、對攝像頭在前一時刻和當前時刻捕獲的兩幀身體圖像中臉部圖像進行比較。
[0128]在步驟S404中、當兩幀身體圖像中臉部圖像具有差別時，根據兩幀身體圖像中臉部圖像的變化信息，以及在前一時刻捕獲的身體圖像所對應的相對位置，確定當前時刻用戶與網頁所在屏幕的相對位置。
[0129]如圖4D所示，對於前一時刻和當前時刻捕獲的兩幀身體圖像中的臉部圖像，比較相同區域的大小的差別和位置的差別，進而獲得用戶當前位置相對於前一時刻位置的變化信息。該變化信息包括距離變化百分比和角度變化百分比。依據該變化信息和前一時刻身體圖像對應的相對位置得出當前時刻用戶與網頁所在屏幕的相對位置。
[0130]在攝像頭捕獲的第一幀身體圖像時，將第一幀身體圖像中臉部圖像與預設的標準圖像間進行比較，根據比較所得差別信息和標準圖像對應的預設位置信息，確定第一幀身體圖像對應的相對位置。
[0131]在步驟S405中、根據兩幀身體圖像中臉部圖像的變化信息和前一時刻相對位置，在前一時刻相對位置和當前時刻相對位置間插補過渡位置。
[0132]其中，過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的位置。
[0133]在步驟S406中、根據前一時刻和當前時刻相對位置，以及過渡位置對網頁中內容進行三維渲染。
[0134]在本實施例一中，根據用戶位置來對網頁內容進行3D渲染，如此，能夠根據用戶位置的變化，而實時調整展示的網頁內容，進而使得網頁內容的3D展示具有實時性，提高了網頁內容的3D展示的逼真性。通過插補過渡位置，使得當用戶移動時，屏幕中呈現連續變化的3D渲染網頁具有更多幀的圖像，進而使得屏幕中呈現的3D網頁視頻頻率更高，從而避免人眼產生閃爍感。
[0135]圖5是根據一示例性實施例示出的一種網頁內容展示裝置的框圖。如圖5所示，網頁內容展示裝置，用於瀏覽器，包括:
[0136]圖像捕獲模塊51被配置為調用攝像頭捕獲目標物體的外形圖像；
[0137]位置確定模塊52被配置為根據目標物體的外形圖像的變化，確定目標物體與網頁所在屏幕的相對位置；
[0138]三維渲染模塊53被配置為根據相對位置對網頁中內容進行三維渲染。
[0139]在一個實施例中，如圖5所示，上述位置確定模塊52，可包括:
[0140]人臉識別單元521被配置為對目標物體的外形進行人臉識別，識別出臉部圖像；
[0141]位置確定單元522被配置為根據所述臉部圖像的變化，確定目標物體與網頁所在屏幕的相對位置。
[0142]在一個實施例中，上述位置確定模塊，可包括:
[0143]第一圖像比較單元被配置為比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；
[0144]第一位置確定單元被配置為根據變化信息和標準圖像對應的預設位置信息確定相對位置。
[0145]在一個實施例中，上述位置確定模塊，可包括:
[0146]第二圖像比較單元被配置為對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；
[0147]第二位置確定單元被配置為當兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0148]在一個實施例中，上述第二位置確定單元，可包括:
[0149]第一位置確定子單元被配置為根據將兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者，
[0150]第二位置確定子單元被配置為根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0151]在一個實施例中，上述三維渲染模塊，可包括:
[0152]數據結構生產單元被配置為對網頁中元素進行建模，生成數據結構；
[0153]網頁元素投影單元被配置為以相對位置為視點，根據數據結構將網頁中元素投影到所述屏幕。
[0154]在一個實施例中，如圖6所示，上述裝置還可包括:
[0155]過渡位置插補模塊61被配置為根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置；
[0156]三維渲染模塊53還可包括:
[0157]三維渲染單元531被配置為根據所述過渡位置對網頁中內容進行三維渲染；
[0158]過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0159]在一個實施例中，上述過渡位置插補模塊，可包括:
[0160]變化信息獲得單元被配置為比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息；
[0161]過渡位置插補單元被配置為根據變化信息和第一相對位置在第一相對位置和第二相對位置間插補過渡位置；
[0162]第一相對位置為根據第一外形圖像確定的目標物體與網頁所在屏幕的相對位置；
[0163]第二相對位置為根據第二外形圖像確定的目標物體與網頁所在屏幕的相對位置。
[0164]本實施例中裝置可以包括以下有益效果:通過攝像頭捕獲的目標物體的外形圖像來確定目標物體與屏幕的相對位置，再根據相對位置來對網頁內容進行3D渲染，如此，能夠根據目標物體的相對位置的變化，而實時調整展示的網頁內容，進而使得網頁內容的3D展示具有實時性，提高了網頁內容的3D展示的逼真性。
[0165]關於上述實施例中的裝置，其中各個模塊執行操作的具體方式已經在有關該方法的實施例中進行了詳細描述，此處將不做詳細闡述說明。
[0166]圖7是根據一示例性實施例示出的一種用於網頁內容展示裝置1200的框圖，該裝置適用於終端設備。例如，裝置1200可以是行動電話，計算機，數字廣播終端，消息收發設備，遊戲控制臺，平板設備，醫療設備，健身設備，個人數字助理等。
[0167]參照圖7，裝置1200可以包括以下一個或多個組件:處理組件1202，存儲器1204，電源組件1206，多媒體組件1208，音頻組件1210，輸入/輸出(I/O)的接口 1212，傳感器組件1214，以及通信組件1216。
[0168]處理組件1202通常控制裝置1200的整體操作，諸如與顯示，電話呼叫，數據通信，相機操作和記錄操作相關聯的操作。處理元件1202可以包括一個或多個處理器1220來執行指令，以完成上述的方法的全部或部分步驟。此外，處理組件1202可以包括一個或多個模塊，便於處理組件1202和其他組件之間的交互。例如，處理部件1202可以包括多媒體模塊，以方便多媒體組件1208和處理組件1202之間的交互。
[0169]存儲器1204被配置為存儲各種類型的數據以支持在設備1200的操作。這些數據的示例包括用於在裝置1200上操作的任何應用程式或方法的指令，聯繫人數據，電話簿數據，消息，圖片，視頻等。存儲器1204可以由任何類型的易失性或非易失性存儲設備或者它們的組合實現，如靜態隨機存取存儲器(SRAM)，電可擦除可編程只讀存儲器(EEPROM)，可擦除可編程只讀存儲器(EPROM)，可編程只讀存儲器(PROM)，只讀存儲器(R0M)，磁存儲器，快閃記憶體，磁碟或光碟。
[0170]電力組件1206為裝置1200的各種組件提供電力。電力組件1206可以包括電源管理系統，一個或多個電源，及其他與為裝置1200生成、管理和分配電力相關聯的組件。
[0171]多媒體組件1208包括在所述裝置1200和用戶之間的提供一個輸出接口的屏幕。在一些實施例中，屏幕可以包括液晶顯示器(LCD)和觸摸面板(TP)。如果屏幕包括觸摸面板，屏幕可以被實現為觸控螢幕，以接收來自用戶的輸入信號。觸摸面板包括一個或多個觸摸傳感器以感測觸摸、滑動和觸摸面板上的手勢。所述觸摸傳感器可以不僅感測觸摸或滑動動作的邊界，而且還檢測與所述觸摸或滑動操作相關的持續時間和壓力。在一些實施例中，多媒體組件1208包括一個前置攝像頭和/或後置攝像頭。當設備1200處於操作模式，如拍攝模式或視頻模式時，前置攝像頭和/或後置攝像頭可以接收外部的多媒體數據。每個前置攝像頭和後置攝像頭可以是一個固定的光學透鏡系統或具有焦距和光學變焦能力。
[0172]音頻組件1210被配置為輸出和/或輸入音頻信號。例如，音頻組件1210包括一個麥克風(MIC)，當裝置1200處於操作模式，如呼叫模式、記錄模式和語音識別模式時，麥克風被配置為接收外部音頻信號。所接收的音頻信號可以被進一步存儲在存儲器1204或經由通信組件1216發送。在一些實施例中，音頻組件1210還包括一個揚聲器，用於輸出音頻信號。
[0173]I/O接口 1212為處理組件1202和外圍接口模塊之間提供接口，上述外圍接口模塊可以是鍵盤，點擊輪，按鈕等。這些按鈕可包括但不限於:主頁按鈕、音量按鈕、啟動按鈕和鎖定按鈕。
[0174]傳感器組件1214包括一個或多個傳感器，用於為裝置1200提供各個方面的狀態評估。例如，傳感器組件1214可以檢測到設備1200的打開/關閉狀態，組件的相對定位，例如所述組件為裝置1200的顯示器和小鍵盤，傳感器組件1214還可以檢測裝置1200或裝置1200 —個組件的位置改變，用戶與裝置1200接觸的存在或不存在，裝置1200方位或加速/減速和裝置1200的溫度變化。傳感器組件1214可以包括接近傳感器，被配置用來在沒有任何的物理接觸時檢測附近物體的存在。傳感器組件1214還可以包括光傳感器，如CMOS或CXD圖像傳感器，用於在成像應用中使用。在一些實施例中，該傳感器組件1214還可以包括加速度傳感器，陀螺儀傳感器，磁傳感器，壓力傳感器或溫度傳感器。
[0175]通信組件1216被配置為便於裝置1200和其他設備之間有線或無線方式的通信。裝置1200可以接入基於通信標準的無線網絡，如WiFi，2G或3G，或它們的組合。在一個示例性實施例中，通信部件1216經由廣播信道接收來自外部廣播管理系統的廣播信號或廣播相關信息。在一個示例性實施例中，所述通信部件1216還包括近場通信(NFC)模塊，以促進短程通信。例如，在NFC模塊可基於射頻識別(RFID)技術，紅外數據協會(IrDA)技術，超寬帶(UWB)技術，藍牙(BT)技術和其他技術來實現。
[0176]在示例性實施例中，裝置1200可以被一個或多個應用專用集成電路(ASIC)、數位訊號處理器(DSP)、數位訊號處理設備(DSro)、可編程邏輯器件(PLD)、現場可編程門陣列(FPGA)、控制器、微控制器、微處理器或其他電子元件實現，用於執行上述方法。
[0177]在示例性實施例中，還提供了一種包括指令的非臨時性計算機可讀存儲介質，例如包括指令的存儲器1204，上述指令可由裝置1200的處理器820執行以完成上述方法。例如，所述非臨時性計算機可讀存儲介質可以是ROM、隨機存取存儲器(RAM)、CD-ROM、磁帶、軟盤和光數據存儲設備等。
[0178]一種網頁內容展示裝置，包括:
[0179]處理器；
[0180]用於存儲處理器可執行指令的存儲器；
[0181]其中，處理器被配置為:
[0182]調用攝像頭捕獲目標物體的外形圖像；
[0183]根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；
[0184]根據所述相對位置對所述網頁中內容進行三維渲染。
[0185]該處理器還被配置為:對所述目標物體的外形進行人臉識別，識別出臉部圖像；
[0186]根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
[0187]該處理器還被配置為:比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；
[0188]根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
[0189]該處理器還被配置為:對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；
[0190]當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0191]該處理器還被配置為:根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者，
[0192]根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0193]該處理器還被配置為:對所述網頁中元素進行建模，生成數據結構；
[0194]以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
[0195]該處理器還被配置為:根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置；
[0196]根據所述過渡位置對所述網頁中內容進行三維渲染；
[0197]所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0198]該處理器還被配置為:比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息；
[0199]根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置；
[0200]所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置；
[0201]所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
[0202]一種非臨時性計算機可讀存儲介質，當所述存儲介質中的指令由移動終端的處理器執行時，使得移動終端能夠執行一種網頁展示內容方法，所述方法包括:
[0203]調用攝像頭捕獲目標物體的外形圖像；
[0204]根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置；
[0205]根據所述相對位置對所述網頁中內容進行三維渲染。
[0206]所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0207]對所述目標物體的外形進行人臉識別，識別出臉部圖像；
[0208]根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
[0209]所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0210]比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息；
[0211]根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
[0212]所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，可包括:
[0213]對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較；
[0214]當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0215]所述根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，可包括:
[0216]根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者，
[0217]根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
[0218]所述根據所述相對位置對所述網頁中內容進行三維渲染，可包括:
[0219]對所述網頁中元素進行建模，生成數據結構；
[0220]以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
[0221]所述方法還可包括:
[0222]根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置；
[0223]根據所述過渡位置對所述網頁中內容進行三維渲染；
[0224]所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
[0225]所述根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置，可包括:
[0226]比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息；
[0227]根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置；
[0228]所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置；
[0229]所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
[0230]本領域技術人員在考慮說明書及實踐這裡公開的公開後，將容易想到本公開的其它實施方案。本申請旨在涵蓋本公開的任何變型、用途或者適應性變化，這些變型、用途或者適應性變化遵循本公開的一般性原理並包括本公開未公開的本【技術領域】中的公知常識或慣用技術手段。說明書和實施例僅被視為示例性的，本公開的真正範圍和精神由下面的權利要求指出。
[0231]應當理解的是，本公開並不局限於上面已經描述並在附圖中示出的精確結構，並且可以在不脫離其範圍進行各種修改和改變。本公開的範圍僅由所附的權利要求來限制。
【權利要求】
1.一種網頁內容展示方法，用於瀏覽器，其特徵在於，包括: 調用攝像頭捕獲目標物體的外形圖像； 根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置； 根據所述相對位置對所述網頁中內容進行三維渲染。
2.如權利要求1所述的方法，其特徵在於，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，包括: 對所述目標物體的外形進行人臉識別，識別出臉部圖像； 根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
3.如權利要求1或2所述的方法，其特徵在於，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，包括: 比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化信息； 根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
4.如權利要求1或2所述的方法，其特徵在於，所述根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置，包括: 對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較； 當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
5.如權利要求4所述的方法，其特徵在於，所述根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，包括: 根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者， 根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
6.如權利要求1所述的方法，其特徵在於，所述根據所述相對位置對所述網頁中內容進行三維渲染，包括: 對所述網頁中元素進行建模，生成數據結構； 以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
7.如權利要求1所述的方法，其特徵在於，所述方法還包括: 根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置； 根據所述過渡位置對所述網頁中內容進行三維渲染； 所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
8.如權利要求7所述的方法，其特徵在於，所述根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置，包括: 比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息； 根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置； 所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置； 所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
9.一種網頁內容展示裝置，用於瀏覽器，其特徵在於，包括: 圖像捕獲模塊，用於調用攝像頭捕獲目標物體的外形圖像； 位置確定模塊，用於根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置； 三維渲染模塊，用於根據所述相對位置對所述網頁中內容進行三維渲染。
10.如權利要求9所述的裝置，其特徵在於，所述位置確定模塊，包括: 人臉識別單元，對所述目標物體的外形進行人臉識別，識別出臉部圖像； 位置確定單元，用於根據所述臉部圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置。
11.如權利要求9或10所述的裝置，其特徵在於，所述位置確定模塊，包括: 第一圖像比較單元，用於比較當前捕獲的目標物體的外形圖像與預設的標準圖像間的差別，獲得變化息； 第一位置確定單元，用於根據所述變化信息和所述標準圖像對應的預設位置信息確定所述相對位置。
12.如權利要求9或10所述的裝置，其特徵在於，所述位置確定模塊，包括: 第二圖像比較單元，用於對攝像頭在前一時刻和當前時刻捕獲的兩幀外形圖像中預設區域進行比較； 第二位置確定單元，用於當所述兩幀外形圖像中預設區域具有差別時，根據當前時刻捕獲的外形圖像中預設區域確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
13.如權利要求12所述的裝置，其特徵在於，所述第二位置確定單元，包括: 第一位置確定子單元，用於根據將所述兩幀外形圖像中預設區域進行比較所獲得的變化信息，以及前一時刻外形圖像幀對應的目標物體與網頁所在屏幕的相對位置，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置；或者， 第二位置確定子單元，用於根據將當前時刻捕獲的外形圖像中預設區域與預設的標準圖像間進行比較所獲得的變化信息，以及所述標準圖像對應的預設位置信息，確定當前外形圖像幀對應的目標物體與網頁所在屏幕的相對位置。
14.如權利要求9所述的裝置，其特徵在於，所述三維渲染模塊，包括: 數據結構生產單元，用於對所述網頁中元素進行建模，生成數據結構； 網頁元素投影單元，用於以所述相對位置為視點，根據所述數據結構將所述網頁中元素投影到所述屏幕。
15.如權利要求9所述的裝置，其特徵在於，所述裝置還包括: 過渡位置插補模塊，用於根據攝像頭在至少兩個時刻所捕獲的至少兩幀目標物體的外形圖像，在相對位置間插補過渡位置； 所述三維渲染模塊還包括: 三維渲染單元，用於根據所述過渡位置對所述網頁中內容進行三維渲染； 所述過渡位置是為使網頁內容在展示過程中不出現閃爍而插補的目標物體與網頁所在屏幕的相對位置。
16.如權利要求15所述的裝置，其特徵在於，所述過渡位置插補模塊，包括: 變化信息獲得單元，用於比較攝像頭在相鄰的第一時刻和第二時刻所捕獲的目標物體的第一外形圖像和第二外形圖像間的差別，獲得變化信息； 過渡位置插補單元，用於根據所述變化信息和第一相對位置在所述第一相對位置和第二相對位置間插補過渡位置； 所述第一相對位置為根據所述第一外形圖像確定的所述目標物體與網頁所在屏幕的相對位置； 所述第二相對位置為根據所述第二外形圖像確定的所述目標物體與網頁所在屏幕的相對位置。
17.—種網頁內容展示裝置，其特徵在於，包括: 處理器； 用於存儲處理器可執行指令的存儲器； 其中，所述處理器被配置為: 調用攝像頭捕獲目標物體的外形圖像； 根據所述目標物體的外形圖像的變化，確定所述目標物體與網頁所在屏幕的相對位置； 根據所述相對位置對所述網頁中內容進行三維渲染。
【文檔編號】G06K9/00GK104133553SQ201410371531
【公開日】2014年11月5日 申請日期:2014年7月30日 優先權日:2014年7月30日
【發明者】江岱霖, 潘俊, 任遠 申請人:小米科技有限責任公司