本實(shí)用新型涉及圖像處理領(lǐng)域，尤其涉及一種自適應(yīng)的圖像呈現(xiàn)系統(tǒng)。

背景技術(shù)：

由于比傳統(tǒng)的圖片展現(xiàn)更加具有沉浸感，全景技術(shù)越來(lái)越得到廣泛的應(yīng)用和普及。傳統(tǒng)的全景展示系統(tǒng)包含圖像采集、數(shù)據(jù)處理、前端展現(xiàn)等過(guò)程，最終通過(guò)計(jì)算機(jī)圖形技術(shù)呈現(xiàn)給用戶。由于近年來(lái)瀏覽器技術(shù)的迅猛發(fā)展，不同瀏覽器的內(nèi)核不一樣，對(duì)WebGL的支持也不一樣。因此，基于Web的全景展示系統(tǒng)遇到了很多兼容性的問(wèn)題。

因此，需要提供一種自適應(yīng)的圖像呈現(xiàn)系統(tǒng)來(lái)克服或緩解上述技術(shù)問(wèn)題。

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

根據(jù)本實(shí)用新型的一方面，提供了一種自適應(yīng)的圖像呈現(xiàn)系統(tǒng)，包括：

圖像采集部件，用于從多個(gè)視角采集目標(biāo)對(duì)象的多視角圖像；

數(shù)據(jù)處理部件，用于接收由圖像采集部件采集的多視角圖像，將所述多視角圖像合成為全景圖像；

模式切換部件，與所述數(shù)據(jù)處理部件相連；

前端呈現(xiàn)部件，用于向模式切換部件發(fā)送圖像呈現(xiàn)請(qǐng)求，從數(shù)據(jù)處理部件接收相對(duì)應(yīng)的圖像并呈現(xiàn)接收到的圖像；

其中，模式切換部件接收來(lái)自前端呈現(xiàn)部件的圖像呈現(xiàn)請(qǐng)求，根據(jù)所述圖像呈現(xiàn)請(qǐng)求確定所述前端呈現(xiàn)部件的信息，根據(jù)確定的所述前端呈現(xiàn)部件的信息來(lái)選擇要使用的圖像處理模式；

其中，所述數(shù)據(jù)處理部件使用所述模式切換部件選擇的圖像處理模式對(duì)要呈現(xiàn)的圖像進(jìn)行處理得到與前端呈現(xiàn)部件相對(duì)應(yīng)的圖像，并將所述相對(duì)應(yīng)的圖像發(fā)送到前端呈現(xiàn)部件。

優(yōu)選地，所述圖像采集部件包括多個(gè)照相機(jī)。

優(yōu)選地，所述圖像采集部件包括六個(gè)照相機(jī)。

優(yōu)選地，所述圖像處理部件和模式切換部件是分離的或集成的，并實(shí)現(xiàn)為現(xiàn)場(chǎng)可編輯邏輯器件或數(shù)字信號(hào)處理器件。

根據(jù)本實(shí)用新型，能夠針對(duì)用戶設(shè)備的類型，在使用用戶設(shè)備呈現(xiàn)例如全景圖像時(shí)，實(shí)現(xiàn)圖像的按需加載，從而節(jié)省流量并減少成本。此外，能夠根據(jù)用戶設(shè)備的類型，制定不同的圖像瓦片切分策略，可以改善用戶體驗(yàn)。

附圖說(shuō)明

通過(guò)參考附圖更加清楚地理解本實(shí)用新型的特征和優(yōu)點(diǎn)，附圖是示意性的而不應(yīng)理解為對(duì)本實(shí)用新型進(jìn)行任何限制，在附圖中：

圖1示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)的方框圖；

圖2示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)方法的流程圖；

圖3示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)方法中選擇圖像處理模式的詳細(xì)流程圖；

圖4示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)中確定用戶設(shè)備的類型的示例；

圖5示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)中選擇全景圖像繪制引擎以及模型的示例；

圖6示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)中選擇全景圖像的切片方式的示例；

圖7示出了根據(jù)本實(shí)用新型的全景圖像呈現(xiàn)系統(tǒng)的方框圖；以及

圖8示出了根據(jù)本實(shí)用新型的全景圖像呈現(xiàn)系統(tǒng)中圖像采集部件的示意方框圖。

具體實(shí)施方式

為使本實(shí)用新型的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚明白，以下結(jié)合具體實(shí)施例，并參照附圖，對(duì)本實(shí)用新型進(jìn)一步詳細(xì)說(shuō)明。顯然，所描述的實(shí)施例僅僅是本實(shí)用新型一部分實(shí)施例，而不是全部的實(shí)施例?；诒緦?shí)用新型的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本實(shí)用新型保護(hù)的范圍。

全景也稱為全景攝影或虛擬實(shí)景，是基于靜態(tài)圖像的虛擬現(xiàn)實(shí)技術(shù)。通過(guò)將相機(jī)環(huán)360°拍攝的一組照片拼接成一個(gè)全景圖像，并使用專用的全景繪制引擎在互聯(lián)網(wǎng)上顯示，能夠讓用戶能夠通過(guò)PC或移動(dòng)終端的屏幕來(lái)控制環(huán)視的方向，從而可左可右、可近可遠(yuǎn)地觀看物體或場(chǎng)景。

圖1示出了根據(jù)本實(shí)用新型的自適應(yīng)的圖像呈現(xiàn)系統(tǒng)的方框圖。如圖1所示，根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)1000可以包括：用戶設(shè)備1010和服務(wù)器1020。本領(lǐng)域技術(shù)人員可以理解，盡管圖1中將用戶設(shè)備1010與服務(wù)器1020直接相連，這二者之間當(dāng)然可以包括其他組件。此外，用戶設(shè)備1010與服務(wù)器1020可以通過(guò)任意有線或無(wú)線的方式相連。

根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)，用戶設(shè)備1010配置為向服務(wù)器發(fā)送圖像呈現(xiàn)請(qǐng)求；服務(wù)器1020，配置為接收來(lái)自用戶設(shè)備的圖像呈現(xiàn)請(qǐng)求，根據(jù)所述圖像呈現(xiàn)請(qǐng)求確定所述用戶設(shè)備的信息，根據(jù)確定的所述用戶設(shè)備的信息來(lái)選擇要使用的圖像處理模式，以及使用選擇的圖像處理模型對(duì)要呈現(xiàn)的圖像進(jìn)行處理，并將處理后的圖像發(fā)送到所述用戶設(shè)備以便進(jìn)行呈現(xiàn)。

圖2示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)方法的流程圖。如圖2所示，在步驟S10，接收來(lái)自用戶設(shè)備的圖像呈現(xiàn)請(qǐng)求。

在步驟S20，根據(jù)所述圖像呈現(xiàn)請(qǐng)求確定所述用戶設(shè)備的信息。

在步驟S30，根據(jù)確定的所述用戶設(shè)備的信息來(lái)選擇要使用的圖像處理模式。

然后，在步驟S40，使用選擇的所述圖像處理模式對(duì)要呈現(xiàn)的圖像進(jìn)行處理，并將處理后的圖像發(fā)送到所述用戶設(shè)備以便進(jìn)行呈現(xiàn)。

圖3示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)方法中圖像處理模式選擇的詳細(xì)流程圖。圖4、圖5和圖6分別示出了根據(jù)本實(shí)用新型的圖像呈現(xiàn)系統(tǒng)中確定用戶設(shè)備的類型、選擇全景圖像繪制引擎和模型以及選擇全景圖像的切片方式的示例。

接下來(lái)將參考圖3-圖6來(lái)詳細(xì)描述根據(jù)本實(shí)用新型的圖像處理模式的選擇。

首先，在步驟305，確定用戶設(shè)備是否是移動(dòng)設(shè)備。在Web開(kāi)發(fā)中，User Agent可用來(lái)識(shí)別瀏覽器名稱、版本、引擎以及操作系統(tǒng)等信息的內(nèi)容。此外，例如，如圖4所示，還可以通過(guò)User Agent判斷來(lái)用戶設(shè)備是PC端設(shè)備還是移動(dòng)設(shè)備，從而利用這些信息來(lái)改善程序的兼容性。具體地，例如通過(guò)在JavaScript語(yǔ)言中植入以下代碼，就可以獲得用戶設(shè)備的信息，從而分析出用戶設(shè)備是安卓設(shè)備還是ios設(shè)備或者wp設(shè)備，除此以外，可以歸類為屬于PC端設(shè)備。

ua＝navigator.userAgent，

android＝ua.match(/(Android)[\s∨]+([\d\.]+)/)，

ios＝ua.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/)，

wp＝ua.match(/(Windows\s+Phone)\s([\d\.]+)/)，

isWebkit＝/WebKit∨[\d.]+/i.test(ua)，

isSafari＝ios？(navigator.standalone？isWebkit：(/Safari/i.test(ua)&&！/CriOS/i.test(ua)&&！/MQQBrowser/i.test(ua)))：false.

當(dāng)確定用戶設(shè)備是移動(dòng)設(shè)備時(shí)，執(zhí)行步驟307，否則執(zhí)行步驟309。在步驟307，確定用戶設(shè)備當(dāng)前是否支持WebGL。如果確定用戶設(shè)備當(dāng)前支持WebGL，則執(zhí)行步驟310，選擇第一圖像處理模式，如果確定用戶設(shè)備當(dāng)前不支持WebGL，則執(zhí)行步驟312，選擇第二圖像處理模式。當(dāng)前瀏覽器類型眾多，不同瀏覽器對(duì)WebGL的支持情況也不一樣，并且，在瀏覽器支持WebGL的情況下，也存在著該功能是處于關(guān)閉還是開(kāi)啟的問(wèn)題。當(dāng)通過(guò)瀏覽器去瀏覽全景時(shí)，需要根據(jù)用戶使用的瀏覽器是否支持WebGL以及WebGL功能處于關(guān)閉還是開(kāi)啟狀態(tài)，以決定全景繪制引擎是使用Div+Html5方式還是WebGL方式，是選用球面模型還是六面體模型。通過(guò)檢測(cè)瀏覽器對(duì)WebGL的支持情況，確保引擎自主切換，正常運(yùn)行。如圖5所示，根據(jù)本實(shí)用新型，第一圖像處理模式包括使用WebGL方式并選擇球面全景模型來(lái)繪制全景圖像，以及將繪制的全景圖像切分為第一分辨率的多個(gè)圖像瓦片，第二圖像處理模式包括使用Div+html 5方式并選擇六面體全景模型來(lái)繪制全景圖像，以及將繪制的全景圖像切分為第一分辨率的多個(gè)圖像瓦片。

當(dāng)在步驟305確定用戶設(shè)備不是移動(dòng)設(shè)備時(shí)，即，例如用戶設(shè)備是PC端，則執(zhí)行步驟309。在步驟309，確定用戶設(shè)備當(dāng)前是否支持WebGL。如果確定用戶設(shè)備當(dāng)前支持WebGL，則執(zhí)行步驟314，選擇第三圖像處理模式，如果確定用戶設(shè)備當(dāng)前不支持WebGL，則執(zhí)行步驟316，選擇第四圖像處理模式。根據(jù)本實(shí)用新型，第三圖像處理模式包括使用WebGL方式并選擇球面全景模型來(lái)繪制全景圖像，以及將繪制的全景圖像切分為所述第二分辨率的多個(gè)圖像瓦片，以及第四圖像處理模式包括使用Div+html5方式并選擇六面體全景模型來(lái)繪制全景圖像，以及將繪制的全景圖像切分為所述第二分辨率的多個(gè)圖像瓦片。

可以根據(jù)所述用戶設(shè)備的顯示屏幕的尺寸和分辨率來(lái)確定第一分辨率和第一分辨率。由于全景圖像比較大，可以根據(jù)用戶的可見(jiàn)區(qū)域進(jìn)行按需加載，這就要求將全景圖切分成多個(gè)圖像瓦片。通常，由于移動(dòng)設(shè)備的顯示屏幕比PC端的顯示屏幕更小，針對(duì)PC端可以將圖像瓦片切分成更大分辨率的圖像，而移動(dòng)端則切分成更小的瓦片。在圖6所示的示例中，針對(duì)移動(dòng)設(shè)備，將全景圖像切分為分辨率為256*256的多個(gè)圖像瓦片，針對(duì)PC端，將全景圖像切分為分辨率為512*512的多個(gè)圖像瓦片。本領(lǐng)域技術(shù)人員可以理解，并不局限于上述分辨率，而是可以使用其他任何分辨率。

根據(jù)本實(shí)用新型，提供了一種自適應(yīng)的圖像呈現(xiàn)系統(tǒng)。圖7示出了根據(jù)本實(shí)用新型的自適應(yīng)的圖像呈現(xiàn)系統(tǒng)的方框圖，如圖7所示，自適應(yīng)的圖像呈現(xiàn)系統(tǒng)可以包括：

圖像采集部件，用于從多個(gè)視角采集目標(biāo)對(duì)象的多視角圖像；

數(shù)據(jù)處理部件，用于接收由圖像采集部件采集的多視角圖像，將所述多視角圖像合成為全景圖像；

模式切換部件，與所述數(shù)據(jù)處理部件相連；

前端呈現(xiàn)部件，用于向模式切換部件發(fā)送圖像呈現(xiàn)請(qǐng)求，從數(shù)據(jù)處理部件接收相對(duì)應(yīng)的圖像并呈現(xiàn)接收到的圖像；

其中，模式切換部件接收來(lái)自前端呈現(xiàn)部件的圖像呈現(xiàn)請(qǐng)求，根據(jù)所述圖像呈現(xiàn)請(qǐng)求確定所述前端呈現(xiàn)部件的信息，根據(jù)確定的所述前端呈現(xiàn)部件的信息來(lái)選擇要使用的圖像處理模式；

其中，所述數(shù)據(jù)處理部件使用所述模式切換部件選擇的圖像處理模式對(duì)要呈現(xiàn)的圖像進(jìn)行處理得到與前端呈現(xiàn)部件相對(duì)應(yīng)的圖像，并將所述相對(duì)應(yīng)的圖像發(fā)送到前端呈現(xiàn)部件。

如圖8所示，圖像采集部件可以包括多個(gè)照相機(jī)。優(yōu)選地，所述圖像采集部件包括六個(gè)照相機(jī)，以便360度采集目標(biāo)對(duì)象的多視角圖像。

優(yōu)選地，所述圖像處理部件和模式切換部件是分離的或集成的，并實(shí)現(xiàn)為現(xiàn)場(chǎng)可編輯門(mén)器件或數(shù)字信號(hào)處理器件。

根據(jù)本實(shí)用新型，當(dāng)在用戶設(shè)備端瀏覽全景圖像時(shí)，根據(jù)瀏覽器是否支持WebGL以及WebGL處于開(kāi)啟還是關(guān)閉狀態(tài)，自動(dòng)選擇全景模型采用球面模型還是六面體模型，圖像繪制方法是使用WebGL方式還是Div+html5的方式。同時(shí)，根據(jù)設(shè)備是移動(dòng)端設(shè)備還是PC端設(shè)備，決定將全景圖像切分成更大還是更小分辨率的瓦片。由此，能夠針對(duì)用戶設(shè)備的類型，實(shí)現(xiàn)按需加載，從而節(jié)省流量并減少成本。此外，能夠根據(jù)用戶設(shè)備的類型，制定不同的圖像瓦片切分策略，可以改善用戶體驗(yàn)。

以上所述的具體實(shí)施例，對(duì)本實(shí)用新型的目的、技術(shù)方案和有益效果進(jìn)行了進(jìn)一步詳細(xì)說(shuō)明，所應(yīng)理解的是，以上所述僅為本實(shí)用新型的具體實(shí)施例而已，并不用于限制本實(shí)用新型，凡在本實(shí)用新型的精神和原則之內(nèi)，所做的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本實(shí)用新型的保護(hù)范圍之內(nèi)。