自适应的图像呈现系统的制作方法

本实用新型涉及图像处理领域，尤其涉及一种自适应的图像呈现系统。

背景技术：

由于比传统的图片展现更加具有沉浸感，全景技术越来越得到广泛的应用和普及。传统的全景展示系统包含图像采集、数据处理、前端展现等过程，最终通过计算机图形技术呈现给用户。由于近年来浏览器技术的迅猛发展，不同浏览器的内核不一样，对WebGL的支持也不一样。因此，基于Web的全景展示系统遇到了很多兼容性的问题。

因此，需要提供一种自适应的图像呈现系统来克服或缓解上述技术问题。

技术实现要素：

根据本实用新型的一方面，提供了一种自适应的图像呈现系统，包括：

图像采集部件，用于从多个视角采集目标对象的多视角图像；

数据处理部件，用于接收由图像采集部件采集的多视角图像，将所述多视角图像合成为全景图像；

模式切换部件，与所述数据处理部件相连；

前端呈现部件，用于向模式切换部件发送图像呈现请求，从数据处理部件接收相对应的图像并呈现接收到的图像；

其中，模式切换部件接收来自前端呈现部件的图像呈现请求，根据所述图像呈现请求确定所述前端呈现部件的信息，根据确定的所述前端呈现部件的信息来选择要使用的图像处理模式；

其中，所述数据处理部件使用所述模式切换部件选择的图像处理模式对要呈现的图像进行处理得到与前端呈现部件相对应的图像，并将所述相对应的图像发送到前端呈现部件。

优选地，所述图像采集部件包括多个照相机。

优选地，所述图像采集部件包括六个照相机。

优选地，所述图像处理部件和模式切换部件是分离的或集成的，并实现为现场可编辑逻辑器件或数字信号处理器件。

根据本实用新型，能够针对用户设备的类型，在使用用户设备呈现例如全景图像时，实现图像的按需加载，从而节省流量并减少成本。此外，能够根据用户设备的类型，制定不同的图像瓦片切分策略，可以改善用户体验。

附图说明

通过参考附图更加清楚地理解本实用新型的特征和优点，附图是示意性的而不应理解为对本实用新型进行任何限制，在附图中：

图1示出了根据本实用新型的图像呈现系统的方框图；

图2示出了根据本实用新型的图像呈现方法的流程图；

图3示出了根据本实用新型的图像呈现方法中选择图像处理模式的详细流程图；

图4示出了根据本实用新型的图像呈现系统中确定用户设备的类型的示例；

图5示出了根据本实用新型的图像呈现系统中选择全景图像绘制引擎以及模型的示例；

图6示出了根据本实用新型的图像呈现系统中选择全景图像的切片方式的示例；

图7示出了根据本实用新型的全景图像呈现系统的方框图；以及

图8示出了根据本实用新型的全景图像呈现系统中图像采集部件的示意方框图。

具体实施方式

为使本实用新型的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本实用新型进一步详细说明。显然，所描述的实施例仅仅是本实用新型一部分实施例，而不是全部的实施例。基于本实用新型的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本实用新型保护的范围。

全景也称为全景摄影或虚拟实景，是基于静态图像的虚拟现实技术。通过将相机环360°拍摄的一组照片拼接成一个全景图像，并使用专用的全景绘制引擎在互联网上显示，能够让用户能够通过PC或移动终端的屏幕来控制环视的方向，从而可左可右、可近可远地观看物体或场景。

图1示出了根据本实用新型的自适应的图像呈现系统的方框图。如图1所示，根据本实用新型的图像呈现系统1000可以包括：用户设备1010和服务器1020。本领域技术人员可以理解，尽管图1中将用户设备1010与服务器1020直接相连，这二者之间当然可以包括其他组件。此外，用户设备1010与服务器1020可以通过任意有线或无线的方式相连。

根据本实用新型的图像呈现系统，用户设备1010配置为向服务器发送图像呈现请求；服务器1020，配置为接收来自用户设备的图像呈现请求，根据所述图像呈现请求确定所述用户设备的信息，根据确定的所述用户设备的信息来选择要使用的图像处理模式，以及使用选择的图像处理模型对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。

图2示出了根据本实用新型的图像呈现方法的流程图。如图2所示，在步骤S10，接收来自用户设备的图像呈现请求。

在步骤S20，根据所述图像呈现请求确定所述用户设备的信息。

在步骤S30，根据确定的所述用户设备的信息来选择要使用的图像处理模式。

然后，在步骤S40，使用选择的所述图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。

图3示出了根据本实用新型的图像呈现方法中图像处理模式选择的详细流程图。图4、图5和图6分别示出了根据本实用新型的图像呈现系统中确定用户设备的类型、选择全景图像绘制引擎和模型以及选择全景图像的切片方式的示例。

接下来将参考图3-图6来详细描述根据本实用新型的图像处理模式的选择。

首先，在步骤305，确定用户设备是否是移动设备。在Web开发中，User Agent可用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。此外，例如，如图4所示，还可以通过User Agent判断来用户设备是PC端设备还是移动设备，从而利用这些信息来改善程序的兼容性。具体地，例如通过在JavaScript语言中植入以下代码，就可以获得用户设备的信息，从而分析出用户设备是安卓设备还是ios设备或者wp设备，除此以外，可以归类为属于PC端设备。

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.

当确定用户设备是移动设备时，执行步骤307，否则执行步骤309。在步骤307，确定用户设备当前是否支持WebGL。如果确定用户设备当前支持WebGL，则执行步骤310，选择第一图像处理模式，如果确定用户设备当前不支持WebGL，则执行步骤312，选择第二图像处理模式。当前浏览器类型众多，不同浏览器对WebGL的支持情况也不一样，并且，在浏览器支持WebGL的情况下，也存在着该功能是处于关闭还是开启的问题。当通过浏览器去浏览全景时，需要根据用户使用的浏览器是否支持WebGL以及WebGL功能处于关闭还是开启状态，以决定全景绘制引擎是使用Div+Html5方式还是WebGL方式，是选用球面模型还是六面体模型。通过检测浏览器对WebGL的支持情况，确保引擎自主切换，正常运行。如图5所示，根据本实用新型，第一图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为第一分辨率的多个图像瓦片，第二图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为第一分辨率的多个图像瓦片。

当在步骤305确定用户设备不是移动设备时，即，例如用户设备是PC端，则执行步骤309。在步骤309，确定用户设备当前是否支持WebGL。如果确定用户设备当前支持WebGL，则执行步骤314，选择第三图像处理模式，如果确定用户设备当前不支持WebGL，则执行步骤316，选择第四图像处理模式。根据本实用新型，第三图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片，以及第四图像处理模式包括使用Div+html5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片。

可以根据所述用户设备的显示屏幕的尺寸和分辨率来确定第一分辨率和第一分辨率。由于全景图像比较大，可以根据用户的可见区域进行按需加载，这就要求将全景图切分成多个图像瓦片。通常，由于移动设备的显示屏幕比PC端的显示屏幕更小，针对PC端可以将图像瓦片切分成更大分辨率的图像，而移动端则切分成更小的瓦片。在图6所示的示例中，针对移动设备，将全景图像切分为分辨率为256*256的多个图像瓦片，针对PC端，将全景图像切分为分辨率为512*512的多个图像瓦片。本领域技术人员可以理解，并不局限于上述分辨率，而是可以使用其他任何分辨率。

根据本实用新型，提供了一种自适应的图像呈现系统。图7示出了根据本实用新型的自适应的图像呈现系统的方框图，如图7所示，自适应的图像呈现系统可以包括：

图像采集部件，用于从多个视角采集目标对象的多视角图像；

数据处理部件，用于接收由图像采集部件采集的多视角图像，将所述多视角图像合成为全景图像；

模式切换部件，与所述数据处理部件相连；

前端呈现部件，用于向模式切换部件发送图像呈现请求，从数据处理部件接收相对应的图像并呈现接收到的图像；

其中，模式切换部件接收来自前端呈现部件的图像呈现请求，根据所述图像呈现请求确定所述前端呈现部件的信息，根据确定的所述前端呈现部件的信息来选择要使用的图像处理模式；

其中，所述数据处理部件使用所述模式切换部件选择的图像处理模式对要呈现的图像进行处理得到与前端呈现部件相对应的图像，并将所述相对应的图像发送到前端呈现部件。

如图8所示，图像采集部件可以包括多个照相机。优选地，所述图像采集部件包括六个照相机，以便360度采集目标对象的多视角图像。

优选地，所述图像处理部件和模式切换部件是分离的或集成的，并实现为现场可编辑门器件或数字信号处理器件。

根据本实用新型，当在用户设备端浏览全景图像时，根据浏览器是否支持WebGL以及WebGL处于开启还是关闭状态，自动选择全景模型采用球面模型还是六面体模型，图像绘制方法是使用WebGL方式还是Div+html5的方式。同时，根据设备是移动端设备还是PC端设备，决定将全景图像切分成更大还是更小分辨率的瓦片。由此，能够针对用户设备的类型，实现按需加载，从而节省流量并减少成本。此外，能够根据用户设备的类型，制定不同的图像瓦片切分策略，可以改善用户体验。

以上所述的具体实施例，对本实用新型的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本实用新型的具体实施例而已，并不用于限制本实用新型，凡在本实用新型的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本实用新型的保护范围之内。