CN106445439A - 一种在线展示图片的方法 - Google Patents

Abstract

一种在线展示图片的方法，属于图像处理、计算机程序技术领域。利用计算机图形学技术构建的数字化展览馆，进行全景、自助展览和VR看展，利用虚拟技术将展馆及艺术画作移植到互联网上进行展示与宣传。本发明的优点是：利用计算机图形学技术构建的数字化展览馆，此次DEMO版实现了全景和VR展览，享有三维互动体验，利用虚拟技术将展馆及艺术画作移植到互联网上进行展示与宣传，真正突破了传统意义上时间与空间的局限。操作简单，人人都是策展人，上传作品，一键生成展厅，流畅观展，易于分享与传播，提供不同风格展厅及画框模板，写实感强。

Description

一种在线展示图片的方法

技术领域

本发明涉及一种在线展示图片的方法，属于图像处理、计算机程序技术领域。

背景技术

随着微博、微信等社交网站/应用的日益火爆，越来越多人倾向于通过网络展示、分享自己的摄影作品、书画等图片。目前常用的在线图片展示形式单一，互动性较差。

也有一些专业机构如美术馆、博物馆开发网上展厅，这种展厅一般风格固定，用户无法编辑。当需要变换展厅风格时需重新开发，效率低，成本高。

发明内容

为了克服现有技术的不足,本发明提供一种在线展示图片的方法。

一种在线展示图片的方法,利用计算机图形学技术构建的数字化展览馆，进行全景、自助展览和VR看展，利用虚拟技术将展馆及艺术画作移植到互联网上进行展示与宣传。

一种在线展示图片的方法,包含如下环节步骤：展厅模板制作环节步骤，画框模板制作环节步骤，图片处理环节步骤，图片展示环节步骤。

展厅模板制作环节步骤，包括：

设计制作步骤：用三维软件，设计制作空间场景，贴上真实材质图片；

全景图渲染输出步骤：空间场景制作好后，选定浏览位置，在浏览位置渲染输出全景大图；根据场景规模设定若干个不同的浏览位置；

切图步骤：将全景大图切成多个不同分辨率的图片；

配置展厅模板参数步骤：将模板参数、设置模板浏览位置数量、可挂画的数量、各可挂画的空间位置(x,y,z)保存为展厅参数配置文件；

保存步骤：将切好的图片及展厅参数配置文件保存到服务器。

画框模板制作环节步骤，包括：

设计制作步骤：在作图软件里设计图制作画框，框四周边距相等，透明背景；制作画框阴影；将制作好的画框切成8部分：四角为等距正方形图片，四条直边的短边与四角正方形图片边长相等，长边可伸缩；将切好的各图保存为png格式文件；

配置画框模板参数步骤：作品图片距画框边沿距离M1，切图尺寸即四角正方形图片的边长M2，保存为画框配置文件；

保存步骤：将切好的8部分图片及画框配置文件保存到服务器。

图片处理环节步骤，包括：

用户上传图片后，服务器对图片进行处理，生成大图、缩略图，并分配作品ID，将生成的大图、缩略图和相应的作品ID保存到服务器；

从服务器读取画框模板及画框配置文件，将其与用户上传的图片合并生成带框图，将带框图及相应地址保存到服务器。

图片展示环节步骤，包括：

服务器接收到观展指令后，启动挂画服务，传入展览ID；

挂画服务根据展览ID从服务器读取展厅模板及展厅参数配置文件；

读取展厅参数配置文件中可挂画的空间位置(x,y,z)及带框图，将带框图逐个摆放到相应可挂画的位置。

从服务器读取画框模板及画框配置文件，将其与用户上传的图片合并生成带框图，将带框图及相应地址保存到服务器，包括：

用户上传图片后，服务器启用制框服务，读取图片尺寸，计算图片短边与长边的比例B，读入参数文件，新建透明空图片F,尺寸长边600px,短边600*B，用户图片长边缩至600-M1*2，短边缩至600*B-M1*2，置入F并居中，取出画框模板第一部分，原大置入F，计算并调整位置，重复上述步骤，画框模板与用户图片合成完毕，保存F和图片地址到服务器。

本发明的优点是：利用计算机图形学技术构建的数字化展览馆，此次DEMO版实现了全景和VR展览，享有三维互动体验，利用虚拟技术将展馆及艺术画作移植到互联网上进行展示与宣传，真正突破了传统意义上时间与空间的局限。

操作简单，人人都是策展人，上传作品，一键生成展厅，流畅观展，易于分享与传播，提供不同风格展厅及画框模板，写实感强。

附图说明

当结合附图考虑时，通过参照下面的详细描述，能够更完整更好地理解本发明以及容易得知其中许多伴随的优点，但此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定，如图其中：

图1为本发明的程序模板素材准备流程示意图。

图2为本发明的画框切图拆解示意图。

图3为本发明的程序流程示意图。

图4为本发明的画框合成示意图。

图5为本发明的空白展厅示意图。

图6为本发明的首页-创建展览示意图。

图7为本发明的创建展览-添加图片示意图。

图8为本发明的创建展览-添加图片详情示意图。

图9为本发明的首页-进入展览信息页示意图。

图10为本发明的展览信息页-进入展厅示意图。

图11为本发明的展厅示意图。

图12为本发明的弹出大图显示图片信息示意图。

图13为本发明的VR看展示意图。

下面结合附图和实施例对本发明进一步说明。

具体实施方式

显然，本领域技术人员基于本发明的宗旨所做的许多修改和变化属于本发明的保护范围。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样定义，不会用理想化或过于正式的含义来解释。

为便于对本发明实施例的理解，下面将做进一步的解释说明，且各个实施例并不构成对本发明实施例的限定。

实施例1：如图1所示，一种在线展示图片的方法,含有以下步骤；

素材准备步骤；制备展厅模板；

设计制作步骤；用三维软件，设计制作空间场景，贴上真实材质图片；

输出全景图，空间场景制作好后，选定浏览位置，在浏览位置渲染输出全景大图(18000*9000px),根据场景规模可以有多个浏览位置。

切图步骤；将全景大图切成多分辨率图片，每张图片不超过512*512px，模板参数，设置模板浏览位置数量，可挂画的数量，每张画的空间位置(x,y,z)，保存为参数配置文件。

保存步骤；将切好的图片及模板参数配置文件保存到服务器指定目录下。

画框模板步骤；

在作图软件里设计图制作画框，画框尺寸按600*600px制作，框四周边距相等，透明背景。

制作画框阴影，注意光影关系。

将制作好的画框切成8部分，保存为png格式文件，切图原则：四角为等距正方形图片，四条直边的短边与四角正方形图片边长相等，长边可伸缩。

模板参数，作品图片距画框边沿距离M1，切图尺寸(四角正方形图片的边长)M2，保存为配置文件

保存步骤；将切好的8部分图片及配置文件保存到服务器指定文件夹。

实现步骤及用户创建展览步骤；

单击首页中的“创建展览”按钮，只需简单三步，即可创建自己的展览。

第一步骤；填写展览基本信息，并上传展览图片。在创建展览页上，创建者可在编辑栏上填写展览信息，并点击左侧“+”号图标上传图片。由于目前该版本处于DEMO阶段，在虚拟展览里最多可摆放18张图片，并且图片总容量要在20M以内，上传的图片过大时请先自行压缩。

第二步骤；对上传的展览图片进行编辑说明。单击上传的任意图片，在右侧编辑栏中对其进行介绍说明，点击右侧“保存”按钮，对单幅图片的说明进行保存。

第三步骤；整体保存后，展览创建完成。当单张图片的编辑完成后，点击下方的“保存”按钮，整个展览即刻创建完成，并显示在首页上。

点击已创建的展览步骤；进入展览信息页面。可再次对自己创建的展览进行修改编辑，也可点击“进入展厅”按钮直接进行全景展览。

上传作品后台实现步骤；

用户在前台点上传后，服务器后台接收图片数据，调图片处理模块进行图片处理，生成大图、综略图保存到图片库，图片地址写入数库；

调用制框服务生成带框图片保存到图片库步骤：

从模板库取出画框模板的8部分png文件及参数文件；

读取用户上传图片的尺寸，计算比例，缩放图片：长边＝600px-2*M1，另一边等比例；

创建空白文件，长边＝600px，另一边＝600px*图片比例，放入用户图片，居中摆放，

模板四角框图原尺寸置入，计算摆放坐标放置入位；模板四直边原尺寸置入，调整至所需长度，计算摆放坐标放置入位。

保存合成好的图片到图片库。

合成原则：用户作品图片不变形，画框不变形、保持原有材质，四条直边可伸缩以适配用户图片；

图片用途：

缩略图400*400px：用于浏览展览作品列表时展示；

带框图600*600px:用于在展厅里展示；

大图2000*2000px：用于展厅查看大图展示；

观看展览步骤；

在首页点击展览信息页，点击“进入展览”按钮进行全景观展，

进入全景展厅后，按下鼠标拖动切换视角，鼠标滚轮缩放视角。

Demo版实现了也以下交互功能，界面上有相应的功能按钮，将鼠标轻轻靠近，会出现功能提示：

展厅地图步骤；展示当前所处位置及视角；

背景音乐步骤；播放展览背景音乐；

自动浏览步骤；自动旋转视角，旋转一周后自动跳到下浏览位置；

分享展览步骤；分享展览到朋友圈。

赞赏步骤；向展览以布者支付现金(微信支付)；

说说步骤；对展览进行文字或语音评论，评论显示中展厅三维空间内；

图片交互步骤；点击展览上的任上张图片，弹出大图，并显示之前编辑的图片信息。

VR看展步骤；

在手机端点击右下角的“切换到VR全景”按钮，可以从全景展览一键切换到VR展览，按提示将手机旋转并放入VR眼镜，带上VR眼镜，犹如身临其境在展览馆中。

VR交互：转动头部，焦点对准图片下放的“放大镜”图标，弹出大图，焦点离开图片后自动关闭；

摘下VR眼镜，取出手机，点“切换到普通全景”退出VR模式；

观看展览技术实现步骤；

用户前台点击“进入展厅”后，向服务器后台发送观看展览请求。

后台收到请求，接收展览id；

启动挂画服务，传入展览id；

从展厅模板库取出展厅及参数文件；

读取参数文件的作品位置，从图片库取出展览id所属的带框图片，摆放到展厅对应位置，重复上述步骤到全部作品摆放完成。

展厅作品摆放完成，响应用户，开始下载展览数据，呈现给用户。

如图3所示，一种在线展示图片的方法，自助展览技术实现流程步骤；含有以下步骤；

上传作品步骤；

用户上传图片后，后台进行图片处理，生成大图、缩略图保存到图片服务器；

调用制框服务步骤；从模板库取出画框模板及参数文件与用户图片合并生成带框图片保存到图片服务器；

合成原则：用户作品图片不变形，画框不变形、保持原有材质，四条直边可伸缩以适配用户图片；

图片用途：

缩略图400*400px：用于浏览展览作品列表时展示；

带框图600*600px:用于在展厅里展示；

大图2000*2000px：用于展厅查看大图展示；

观看展览步骤；

用户发出观看展览请求，后台处理请求，启动挂画服务，传入展览id；

挂画服务根据展览id，从展厅模板库取出展厅及参数据文件；

读取参数文件的作品位置，从图片库取出带框图，摆放到对应位置，重复以上步骤至全部作品摆放完成；

摆放好作品的展厅呈现给用户，用户观看展览；

当用户点击作作品查看大图时，取出大图展示。

实施例3：一种在线展示图片的方法，用户创建展览过程步骤；

单击首页中的“创建展览”按钮，只需简单三步，即可创建自己的展览。

第一步骤；填写展览基本信息，并上传展览图片。在创建展览页上，创建者可在编辑栏上填写展览信息，并点击左侧“+”号图标上传图片。由于目前该版本处于DEMO阶段，在虚拟展览里最多可摆放18张图片，并且图片总容量要在20M以内，上传的图片过大时请先自行压缩。

第二步骤；对上传的展览图片进行编辑说明。单击上传的任意图片，在右侧编辑栏中对其进行介绍说明，点击右侧“保存”按钮，对单幅图片的说明进行保存。

第三步骤；整体保存后，展览创建完成。当单张图片的编辑完成后，点击下方的“保存”按钮，整个展览即刻创建完成，并显示在首页上。

点击已创建的展览步骤；进入展览信息页面。可再次对自己创建的展览进行修改编辑，也可点击“进入展厅”按钮直接进行全景展览。

进入全景展览步骤；会看到四列工具栏，将鼠标轻轻靠近，会出现功能提示。

DEMO版也实现了图片的交互功能，点击展览上的任一张图片，图片会单张弹出，并显示之前编辑的图片信息。

点击右下角的“切换到VR全景”按钮，可以从全景展览一键切换到VR展览，带上VR眼镜，犹如身临其境在展览馆中。

实施例4：如图2所示，一种在线展示图片的方法,含有以下步骤；

图框素材准备，在图片处理软件内切成如图所示8个部分，画框实际宽度(有效像素)即作品图片距画框边沿距离(参数M1)，切图尺寸参数M2，四角尺寸为M2*M2,四条直边为400*M2,有效像素外为透明，保存为png格式，放服务器待用。

如图4所示，一种在线展示图片的方法,含有以下步骤；

画框合成，用户上传图片后，后台启用制框服务，读取图片尺寸，计算比例B(短边/长边)，读入参数文件，新建透明空图片F,尺寸长边600px,短边600*B，用户图片长边缩至600-M1*2，短边缩至600*B-M1*2，置入F并居中，取出画框模板第一部分，原大置入F，计算并调整位置，重复上述步骤，画框模板与用户图片合成完毕，保存F在服务器待用，图片地址写入数库。

如图5所示，一种在线展示图片的方法,含有以下步骤；

空白展厅场景，三维软件内制作好展厅三维模型及材质，渲染输出全景大图，切图渐进式分辨率图片。

如图6所示，一种在线展示图片的方法,含有以下步骤；

创建展览，在首页点击‘创建展览’按钮进入创建展览页面。

如图7所示，一种在线展示图片的方法,含有以下步骤；

添加图片，在创建展览页面，点‘+’按钮，选择图片，点确定后开始上传，后台接收到图片后，对图片进行处理，生成缩略图及大图保存服务器，调用制框服务生成框图存服务器，重复上述步骤上传多张图片；在创建展览页面可以输入展览的基本信息，保存到后台数据库。

如图8所示，一种在线展示图片的方法,含有以下步骤；

为作品添加信息，在左侧图片列表中选中图片，右侧表单录入字段信息，输入完成点保存，保存到后台数据库。

如图9所示，一种在线展示图片的方法,含有以下步骤；

在首页，点击展览图片，跳转到展览详情信息页面。

如图10所示，一种在线展示图片的方法,含有以下步骤；

在展览信息页面，点击进入展厅按钮，向后台请求展厅页面，并传送展览id参数。

如图11所示，一种在线展示图片的方法,含有以下步骤；

后台收到用户展厅页面请求后，接收展览ID参数，

在数据库中取出该展览在信息，

读取展厅模板及参数；

调用挂图服务，取参数，取框图，挂到场景中，重复上述步骤至全部全成展示给用户。

如图12所示，一种在线展示图片的方法,含有以下步骤；

在展厅里点击作品后，向后台发送显示大图请求，并传该作品id,后台收到请求后从数库取出作品信息及作品大图，呈现给用户。

如图13所示，一种在线展示图片的方法,含有以下步骤；

VR模式，在手机端，点击展厅页面右下角“切换模式”按钮，启用手机陀螺仪感应，手机放入VR头显设备内，在VR模式下看。

如上所述，对本发明的实施例进行了详细地说明，但是只要实质上没有脱离本发明的发明点及效果可以有很多的变形，这对本领域的技术人员来说是显而易见的。因此，这样的变形例也全部包含在本发明的保护范围之内。

Claims (7)

1.一种在线展示图片的方法,其特征在于利用计算机图形学技术构建的数字化展览馆，进行全景、自助展览和VR看展，利用虚拟技术将展馆及艺术画作移植到互联网上进行展示与宣传。

2.根据权利要求1所述的一种在线展示图片的方法，其特征在于包含如下环节步骤：展厅模板制作环节步骤，画框模板制作环节步骤，图片处理环节步骤，图片展示环节步骤。

3.根据权利要求2所述的一种在线展示图片的方法，其特征在于，展厅模板制作环节步骤，包括：

设计制作步骤：用三维软件，设计制作空间场景，贴上真实材质图片；

全景图渲染输出步骤：空间场景制作好后，选定浏览位置，在浏览位置渲染输出全景大图；根据场景规模设定若干个不同的浏览位置；

切图步骤：将全景大图切成多个不同分辨率的图片；

配置展厅模板参数步骤：将模板参数、设置模板浏览位置数量、可挂画的数量、各可挂画的空间位置(x,y,z)保存为展厅参数配置文件；

保存步骤：将切好的图片及展厅参数配置文件保存到服务器。

4.根据权利要求2所述的一种在线展示图片的方法，其特征在于，画框模板制作环节步骤，包括：

设计制作步骤：在作图软件里设计、制作画框，框四周边距相等，透明背景；制作画框阴影；将制作好的画框切成8部分：四角为等距正方形图片，四条直边的短边与四角正方形图片边长相等，长边可伸缩；将切好的各图保存为png格式文件；

配置画框模板参数步骤：作品图片距画框边沿距离M1，切图尺寸即四角正方形图片的边长M2，保存为画框配置文件；

保存步骤：将切好的8部分图片及画框配置文件保存到服务器。

5.根据权利要求2所述的一种在线展示图片的方法，其特征在于，图片处理环节步骤，包括：

用户上传图片后，服务器对图片进行处理，生成大图、缩略图，并分配作品ID，将生成的大图、缩略图和相应的作品ID保存到服务器；

从服务器读取画框模板及画框配置文件，将其与用户上传的图片合并生成带框图，将带框图及相应地址保存到服务器。

6.根据权利要求2所述的一种在线展示图片的方法，其特征在于，图片展示环节步骤，包括：

服务器接收到观展指令后，启动挂画服务，传入展览ID；

挂画服务根据展览ID从服务器读取展厅模板及展厅参数配置文件；

读取展厅参数配置文件中可挂画的空间位置(x,y,z)及带框图，将带框图逐个摆放到相应可挂画的位置。

7.根据权利要求5所述的一种在线展示图片的方法，其特征在于，从服务器读取画框模板及画框配置文件，将其与用户上传的图片合并生成带框图，将带框图及相应地址保存到服务器，包括：

用户上传图片后，服务器启用制框服务，读取图片尺寸，计算图片短边与长边的比例B，读入参数文件，新建透明空图片F,尺寸长边600px,短边600*B，用户图片长边缩至600-M1*2，短边缩至600*B-M1*2，置入F并居中，取出画框模板第一部分，原大置入F，计算并调整位置，重复上述步骤，画框模板与用户图片合成完毕，保存F和图片地址到服务器。