本發(fā)明涉及一種在線展示圖片的方法，屬于圖像處理、計算機程序技術(shù)領(lǐng)域。

背景技術(shù)：

隨著微博、微信等社交網(wǎng)站/應(yīng)用的日益火爆，越來越多人傾向于通過網(wǎng)絡(luò)展示、分享自己的攝影作品、書畫等圖片。目前常用的在線圖片展示形式單一，互動性較差。

也有一些專業(yè)機構(gòu)如美術(shù)館、博物館開發(fā)網(wǎng)上展廳，這種展廳一般風(fēng)格固定，用戶無法編輯。當(dāng)需要變換展廳風(fēng)格時需重新開發(fā)，效率低，成本高。

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

為了克服現(xiàn)有技術(shù)的不足,本發(fā)明提供一種在線展示圖片的方法。

一種在線展示圖片的方法,利用計算機圖形學(xué)技術(shù)構(gòu)建的數(shù)字化展覽館，進行全景、自助展覽和VR看展，利用虛擬技術(shù)將展館及藝術(shù)畫作移植到互聯(lián)網(wǎng)上進行展示與宣傳。

一種在線展示圖片的方法,包含如下環(huán)節(jié)步驟：展廳模板制作環(huán)節(jié)步驟，畫框模板制作環(huán)節(jié)步驟，圖片處理環(huán)節(jié)步驟，圖片展示環(huán)節(jié)步驟。

展廳模板制作環(huán)節(jié)步驟，包括：

設(shè)計制作步驟：用三維軟件，設(shè)計制作空間場景，貼上真實材質(zhì)圖片；

全景圖渲染輸出步驟：空間場景制作好后，選定瀏覽位置，在瀏覽位置渲染輸出全景大圖；根據(jù)場景規(guī)模設(shè)定若干個不同的瀏覽位置；

切圖步驟：將全景大圖切成多個不同分辨率的圖片；

配置展廳模板參數(shù)步驟：將模板參數(shù)、設(shè)置模板瀏覽位置數(shù)量、可掛畫的數(shù)量、各可掛畫的空間位置(x,y,z)保存為展廳參數(shù)配置文件；

保存步驟：將切好的圖片及展廳參數(shù)配置文件保存到服務(wù)器。

畫框模板制作環(huán)節(jié)步驟，包括：

設(shè)計制作步驟：在作圖軟件里設(shè)計圖制作畫框，框四周邊距相等，透明背景；制作畫框陰影；將制作好的畫框切成8部分：四角為等距正方形圖片，四條直邊的短邊與四角正方形圖片邊長相等，長邊可伸縮；將切好的各圖保存為png格式文件；

配置畫框模板參數(shù)步驟：作品圖片距畫框邊沿距離M1，切圖尺寸即四角正方形圖片的邊長M2，保存為畫框配置文件；

保存步驟：將切好的8部分圖片及畫框配置文件保存到服務(wù)器。

圖片處理環(huán)節(jié)步驟，包括：

用戶上傳圖片后，服務(wù)器對圖片進行處理，生成大圖、縮略圖，并分配作品ID，將生成的大圖、縮略圖和相應(yīng)的作品ID保存到服務(wù)器；

從服務(wù)器讀取畫框模板及畫框配置文件，將其與用戶上傳的圖片合并生成帶框圖，將帶框圖及相應(yīng)地址保存到服務(wù)器。

圖片展示環(huán)節(jié)步驟，包括：

服務(wù)器接收到觀展指令后，啟動掛畫服務(wù)，傳入展覽ID；

掛畫服務(wù)根據(jù)展覽ID從服務(wù)器讀取展廳模板及展廳參數(shù)配置文件；

讀取展廳參數(shù)配置文件中可掛畫的空間位置(x,y,z)及帶框圖，將帶框圖逐個擺放到相應(yīng)可掛畫的位置。

從服務(wù)器讀取畫框模板及畫框配置文件，將其與用戶上傳的圖片合并生成帶框圖，將帶框圖及相應(yīng)地址保存到服務(wù)器，包括：

用戶上傳圖片后，服務(wù)器啟用制框服務(wù)，讀取圖片尺寸，計算圖片短邊與長邊的比例B，讀入?yún)?shù)文件，新建透明空圖片F(xiàn),尺寸長邊600px,短邊600*B，用戶圖片長邊縮至600-M1*2，短邊縮至600*B-M1*2，置入F并居中，取出畫框模板第一部分，原大置入F，計算并調(diào)整位置，重復(fù)上述步驟，畫框模板與用戶圖片合成完畢，保存F和圖片地址到服務(wù)器。

本發(fā)明的優(yōu)點是：利用計算機圖形學(xué)技術(shù)構(gòu)建的數(shù)字化展覽館，此次DEMO版實現(xiàn)了全景和VR展覽，享有三維互動體驗，利用虛擬技術(shù)將展館及藝術(shù)畫作移植到互聯(lián)網(wǎng)上進行展示與宣傳，真正突破了傳統(tǒng)意義上時間與空間的局限。

操作簡單，人人都是策展人，上傳作品，一鍵生成展廳，流暢觀展，易于分享與傳播，提供不同風(fēng)格展廳及畫框模板，寫實感強。

附圖說明

當(dāng)結(jié)合附圖考慮時，通過參照下面的詳細(xì)描述，能夠更完整更好地理解本發(fā)明以及容易得知其中許多伴隨的優(yōu)點，但此處所說明的附圖用來提供對本發(fā)明的進一步理解，構(gòu)成本發(fā)明的一部分，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當(dāng)限定，如圖其中：

圖1為本發(fā)明的程序模板素材準(zhǔn)備流程示意圖。

圖2為本發(fā)明的畫框切圖拆解示意圖。

圖3為本發(fā)明的程序流程示意圖。

圖4為本發(fā)明的畫框合成示意圖。

圖5為本發(fā)明的空白展廳示意圖。

圖6為本發(fā)明的首頁-創(chuàng)建展覽示意圖。

圖7為本發(fā)明的創(chuàng)建展覽-添加圖片示意圖。

圖8為本發(fā)明的創(chuàng)建展覽-添加圖片詳情示意圖。

圖9為本發(fā)明的首頁-進入展覽信息頁示意圖。

圖10為本發(fā)明的展覽信息頁-進入展廳示意圖。

圖11為本發(fā)明的展廳示意圖。

圖12為本發(fā)明的彈出大圖顯示圖片信息示意圖。

圖13為本發(fā)明的VR看展示意圖。

下面結(jié)合附圖和實施例對本發(fā)明進一步說明。

具體實施方式

顯然，本領(lǐng)域技術(shù)人員基于本發(fā)明的宗旨所做的許多修改和變化屬于本發(fā)明的保護范圍。

本技術(shù)領(lǐng)域技術(shù)人員可以理解，除非另外定義，這里使用的所有術(shù)語(包括技術(shù)術(shù)語和科學(xué)術(shù)語)具有與本發(fā)明所屬領(lǐng)域中的普通技術(shù)人員的一般理解相同的意義。還應(yīng)該理解的是，諸如通用字典中定義的那些術(shù)語應(yīng)該被理解為具有與現(xiàn)有技術(shù)的上下文中的意義一致的意義，并且除非像這里一樣定義，不會用理想化或過于正式的含義來解釋。

為便于對本發(fā)明實施例的理解，下面將做進一步的解釋說明，且各個實施例并不構(gòu)成對本發(fā)明實施例的限定。

實施例1：如圖1所示，一種在線展示圖片的方法,含有以下步驟；

素材準(zhǔn)備步驟；制備展廳模板；

設(shè)計制作步驟；用三維軟件，設(shè)計制作空間場景，貼上真實材質(zhì)圖片；

輸出全景圖，空間場景制作好后，選定瀏覽位置，在瀏覽位置渲染輸出全景大圖(18000*9000px),根據(jù)場景規(guī)?？梢杂卸鄠€瀏覽位置。

切圖步驟；將全景大圖切成多分辨率圖片，每張圖片不超過512*512px，模板參數(shù)，設(shè)置模板瀏覽位置數(shù)量，可掛畫的數(shù)量，每張畫的空間位置(x,y,z)，保存為參數(shù)配置文件。

保存步驟；將切好的圖片及模板參數(shù)配置文件保存到服務(wù)器指定目錄下。

畫框模板步驟；

在作圖軟件里設(shè)計圖制作畫框，畫框尺寸按600*600px制作，框四周邊距相等，透明背景。

制作畫框陰影，注意光影關(guān)系。

將制作好的畫框切成8部分，保存為png格式文件，切圖原則：四角為等距正方形圖片，四條直邊的短邊與四角正方形圖片邊長相等，長邊可伸縮。

模板參數(shù)，作品圖片距畫框邊沿距離M1，切圖尺寸(四角正方形圖片的邊長)M2，保存為配置文件

保存步驟；將切好的8部分圖片及配置文件保存到服務(wù)器指定文件夾。

實現(xiàn)步驟及用戶創(chuàng)建展覽步驟；

單擊首頁中的“創(chuàng)建展覽”按鈕，只需簡單三步，即可創(chuàng)建自己的展覽。

第一步驟；填寫展覽基本信息，并上傳展覽圖片。在創(chuàng)建展覽頁上，創(chuàng)建者可在編輯欄上填寫展覽信息，并點擊左側(cè)“+”號圖標(biāo)上傳圖片。由于目前該版本處于DEMO階段，在虛擬展覽里最多可擺放18張圖片，并且圖片總?cè)萘恳?0M以內(nèi)，上傳的圖片過大時請先自行壓縮。

第二步驟；對上傳的展覽圖片進行編輯說明。單擊上傳的任意圖片，在右側(cè)編輯欄中對其進行介紹說明，點擊右側(cè)“保存”按鈕，對單幅圖片的說明進行保存。

第三步驟；整體保存后，展覽創(chuàng)建完成。當(dāng)單張圖片的編輯完成后，點擊下方的“保存”按鈕，整個展覽即刻創(chuàng)建完成，并顯示在首頁上。

點擊已創(chuàng)建的展覽步驟；進入展覽信息頁面?？稍俅螌ψ约簞?chuàng)建的展覽進行修改編輯，也可點擊“進入展廳”按鈕直接進行全景展覽。

上傳作品后臺實現(xiàn)步驟；

用戶在前臺點上傳后，服務(wù)器后臺接收圖片數(shù)據(jù)，調(diào)圖片處理模塊進行圖片處理，生成大圖、綜略圖保存到圖片庫，圖片地址寫入數(shù)庫；

調(diào)用制框服務(wù)生成帶框圖片保存到圖片庫步驟：

從模板庫取出畫框模板的8部分png文件及參數(shù)文件；

讀取用戶上傳圖片的尺寸，計算比例，縮放圖片：長邊＝600px-2*M1，另一邊等比例；

創(chuàng)建空白文件，長邊＝600px，另一邊＝600px*圖片比例，放入用戶圖片，居中擺放，

模板四角框圖原尺寸置入，計算擺放坐標(biāo)放置入位；模板四直邊原尺寸置入，調(diào)整至所需長度，計算擺放坐標(biāo)放置入位。

保存合成好的圖片到圖片庫。

合成原則：用戶作品圖片不變形，畫框不變形、保持原有材質(zhì)，四條直邊可伸縮以適配用戶圖片；

圖片用途：

縮略圖400*400px：用于瀏覽展覽作品列表時展示；

帶框圖600*600px:用于在展廳里展示；

大圖2000*2000px：用于展廳查看大圖展示；

觀看展覽步驟；

在首頁點擊展覽信息頁，點擊“進入展覽”按鈕進行全景觀展，

進入全景展廳后，按下鼠標(biāo)拖動切換視角，鼠標(biāo)滾輪縮放視角。

Demo版實現(xiàn)了也以下交互功能，界面上有相應(yīng)的功能按鈕，將鼠標(biāo)輕輕靠近，會出現(xiàn)功能提示：

展廳地圖步驟；展示當(dāng)前所處位置及視角；

背景音樂步驟；播放展覽背景音樂；

自動瀏覽步驟；自動旋轉(zhuǎn)視角，旋轉(zhuǎn)一周后自動跳到下瀏覽位置；

分享展覽步驟；分享展覽到朋友圈。

贊賞步驟；向展覽以布者支付現(xiàn)金(微信支付)；

說說步驟；對展覽進行文字或語音評論，評論顯示中展廳三維空間內(nèi)；

圖片交互步驟；點擊展覽上的任上張圖片，彈出大圖，并顯示之前編輯的圖片信息。

VR看展步驟；

在手機端點擊右下角的“切換到VR全景”按鈕，可以從全景展覽一鍵切換到VR展覽，按提示將手機旋轉(zhuǎn)并放入VR眼鏡，帶上VR眼鏡，猶如身臨其境在展覽館中。

VR交互：轉(zhuǎn)動頭部，焦點對準(zhǔn)圖片下放的“放大鏡”圖標(biāo)，彈出大圖，焦點離開圖片后自動關(guān)閉；

摘下VR眼鏡，取出手機，點“切換到普通全景”退出VR模式；

觀看展覽技術(shù)實現(xiàn)步驟；

用戶前臺點擊“進入展廳”后，向服務(wù)器后臺發(fā)送觀看展覽請求。

后臺收到請求，接收展覽id；

啟動掛畫服務(wù)，傳入展覽id；

從展廳模板庫取出展廳及參數(shù)文件；

讀取參數(shù)文件的作品位置，從圖片庫取出展覽id所屬的帶框圖片，擺放到展廳對應(yīng)位置，重復(fù)上述步驟到全部作品擺放完成。

展廳作品擺放完成，響應(yīng)用戶，開始下載展覽數(shù)據(jù)，呈現(xiàn)給用戶。

如圖3所示，一種在線展示圖片的方法，自助展覽技術(shù)實現(xiàn)流程步驟；含有以下步驟；

上傳作品步驟；

用戶上傳圖片后，后臺進行圖片處理，生成大圖、縮略圖保存到圖片服務(wù)器；

調(diào)用制框服務(wù)步驟；從模板庫取出畫框模板及參數(shù)文件與用戶圖片合并生成帶框圖片保存到圖片服務(wù)器；

合成原則：用戶作品圖片不變形，畫框不變形、保持原有材質(zhì)，四條直邊可伸縮以適配用戶圖片；

圖片用途：

縮略圖400*400px：用于瀏覽展覽作品列表時展示；

帶框圖600*600px:用于在展廳里展示；

大圖2000*2000px：用于展廳查看大圖展示；

觀看展覽步驟；

用戶發(fā)出觀看展覽請求，后臺處理請求，啟動掛畫服務(wù)，傳入展覽id；

掛畫服務(wù)根據(jù)展覽id，從展廳模板庫取出展廳及參數(shù)據(jù)文件；

讀取參數(shù)文件的作品位置，從圖片庫取出帶框圖，擺放到對應(yīng)位置，重復(fù)以上步驟至全部作品擺放完成；

擺放好作品的展廳呈現(xiàn)給用戶，用戶觀看展覽；

當(dāng)用戶點擊作作品查看大圖時，取出大圖展示。

實施例3：一種在線展示圖片的方法，用戶創(chuàng)建展覽過程步驟；

單擊首頁中的“創(chuàng)建展覽”按鈕，只需簡單三步，即可創(chuàng)建自己的展覽。

第一步驟；填寫展覽基本信息，并上傳展覽圖片。在創(chuàng)建展覽頁上，創(chuàng)建者可在編輯欄上填寫展覽信息，并點擊左側(cè)“+”號圖標(biāo)上傳圖片。由于目前該版本處于DEMO階段，在虛擬展覽里最多可擺放18張圖片，并且圖片總?cè)萘恳?0M以內(nèi)，上傳的圖片過大時請先自行壓縮。

第二步驟；對上傳的展覽圖片進行編輯說明。單擊上傳的任意圖片，在右側(cè)編輯欄中對其進行介紹說明，點擊右側(cè)“保存”按鈕，對單幅圖片的說明進行保存。

第三步驟；整體保存后，展覽創(chuàng)建完成。當(dāng)單張圖片的編輯完成后，點擊下方的“保存”按鈕，整個展覽即刻創(chuàng)建完成，并顯示在首頁上。

點擊已創(chuàng)建的展覽步驟；進入展覽信息頁面?？稍俅螌ψ约簞?chuàng)建的展覽進行修改編輯，也可點擊“進入展廳”按鈕直接進行全景展覽。

進入全景展覽步驟；會看到四列工具欄，將鼠標(biāo)輕輕靠近，會出現(xiàn)功能提示。

DEMO版也實現(xiàn)了圖片的交互功能，點擊展覽上的任一張圖片，圖片會單張彈出，并顯示之前編輯的圖片信息。

點擊右下角的“切換到VR全景”按鈕，可以從全景展覽一鍵切換到VR展覽，帶上VR眼鏡，猶如身臨其境在展覽館中。

實施例4：如圖2所示，一種在線展示圖片的方法,含有以下步驟；

圖框素材準(zhǔn)備，在圖片處理軟件內(nèi)切成如圖所示8個部分，畫框?qū)嶋H寬度(有效像素)即作品圖片距畫框邊沿距離(參數(shù)M1)，切圖尺寸參數(shù)M2，四角尺寸為M2*M2,四條直邊為400*M2,有效像素外為透明，保存為png格式，放服務(wù)器待用。

如圖4所示，一種在線展示圖片的方法,含有以下步驟；

畫框合成，用戶上傳圖片后，后臺啟用制框服務(wù)，讀取圖片尺寸，計算比例B(短邊/長邊)，讀入?yún)?shù)文件，新建透明空圖片F(xiàn),尺寸長邊600px,短邊600*B，用戶圖片長邊縮至600-M1*2，短邊縮至600*B-M1*2，置入F并居中，取出畫框模板第一部分，原大置入F，計算并調(diào)整位置，重復(fù)上述步驟，畫框模板與用戶圖片合成完畢，保存F在服務(wù)器待用，圖片地址寫入數(shù)庫。

如圖5所示，一種在線展示圖片的方法,含有以下步驟；

空白展廳場景，三維軟件內(nèi)制作好展廳三維模型及材質(zhì)，渲染輸出全景大圖，切圖漸進式分辨率圖片。

如圖6所示，一種在線展示圖片的方法,含有以下步驟；

創(chuàng)建展覽，在首頁點擊‘創(chuàng)建展覽’按鈕進入創(chuàng)建展覽頁面。

如圖7所示，一種在線展示圖片的方法,含有以下步驟；

添加圖片，在創(chuàng)建展覽頁面，點‘+’按鈕，選擇圖片，點確定后開始上傳，后臺接收到圖片后，對圖片進行處理，生成縮略圖及大圖保存服務(wù)器，調(diào)用制框服務(wù)生成框圖存服務(wù)器，重復(fù)上述步驟上傳多張圖片；在創(chuàng)建展覽頁面可以輸入展覽的基本信息，保存到后臺數(shù)據(jù)庫。

如圖8所示，一種在線展示圖片的方法,含有以下步驟；

為作品添加信息，在左側(cè)圖片列表中選中圖片，右側(cè)表單錄入字段信息，輸入完成點保存，保存到后臺數(shù)據(jù)庫。

如圖9所示，一種在線展示圖片的方法,含有以下步驟；

在首頁，點擊展覽圖片，跳轉(zhuǎn)到展覽詳情信息頁面。

如圖10所示，一種在線展示圖片的方法,含有以下步驟；

在展覽信息頁面，點擊進入展廳按鈕，向后臺請求展廳頁面，并傳送展覽id參數(shù)。

如圖11所示，一種在線展示圖片的方法,含有以下步驟；

后臺收到用戶展廳頁面請求后，接收展覽ID參數(shù)，

在數(shù)據(jù)庫中取出該展覽在信息，

讀取展廳模板及參數(shù)；

調(diào)用掛圖服務(wù)，取參數(shù)，取框圖，掛到場景中，重復(fù)上述步驟至全部全成展示給用戶。

如圖12所示，一種在線展示圖片的方法,含有以下步驟；

在展廳里點擊作品后，向后臺發(fā)送顯示大圖請求，并傳該作品id,后臺收到請求后從數(shù)庫取出作品信息及作品大圖，呈現(xiàn)給用戶。

如圖13所示，一種在線展示圖片的方法,含有以下步驟；

VR模式，在手機端，點擊展廳頁面右下角“切換模式”按鈕，啟用手機陀螺儀感應(yīng)，手機放入VR頭顯設(shè)備內(nèi)，在VR模式下看。

如上所述，對本發(fā)明的實施例進行了詳細(xì)地說明，但是只要實質(zhì)上沒有脫離本發(fā)明的發(fā)明點及效果可以有很多的變形，這對本領(lǐng)域的技術(shù)人員來說是顯而易見的。因此，這樣的變形例也全部包含在本發(fā)明的保護范圍之內(nèi)。