自适应图像呈现系统和自适应图像呈现方法
【专利摘要】本发明实施例公开了一种自适应图像呈现方法，包括：接收来自用户设备的图像呈现请求；根据所述图像呈现请求确定所述用户设备的信息；根据确定的所述用户设备的信息来选择要使用的图像处理模式；使用选择的图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。
【专利说明】
自适应图像呈现系统和自适应图像呈现方法
技术领域
[0001]本发明实施例涉及图像处理领域，尤其涉及一种自适应图像呈现系统和一种自适应图像呈现方法。
【背景技术】
[0002]全景技术的应用越来越普遍。对于全景技术中的全景三维引擎技术，市场上主流的全景模型包括球面模型、六面体模型和柱面模型。此外，对于基于Web的全景绘制引擎，由于不同浏览器对WebGL的支持情况不同，常见的构建模型的方式包括WebGL方式和div+html5方式。传统的全景绘制引擎大多采用单一的模型和构建方法，不能根据浏览设备和浏览器对WebGL的支持情况作出合理的响应，兼容性较差，因此用户体验较差。
[0003]因此，需要提供一种图像呈现系统和图像呈现方法来克服或缓解上述技术问题。
【发明内容】
[0004]根据本发明实施例的一个方面，提供了一种自适应图像呈现方法，可以包括:
[0005]接收来自用户设备的图像呈现请求；
[0006]根据所述图像呈现请求确定所述用户设备的信息；
[0007]根据确定的所述用户设备的信息来选择要使用的图像处理模式；
[0008]使用选择的图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。
[0009 ]优选地，所述要呈现的图像是全景图像。
[0010]优选地，所述用户设备的信息包括以下中的至少一个:用户设备的类型和用户设备使用的浏览器的类型。
[0011]优选地，根据确定的所述用户设备的信息来选择要使用的图像处理模式包括:
[0012]如果确定所述用户设备是移动设备且当前WebGL可用，则选择第一图像处理模式；
[0013]如果确定所述用户设备是移动设备且当前WebGL不可用，则选择第二图像处理模式；
[0014]如果确定所述用户设备是PC端且当前WebGL可用，则选择第三图像处理模式；以及
[0015]如果确定所述用户设备是PC端且当前WebGL不可用，则选择第四图像处理模式。
[0016]优选地，所述第一图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片；
[0017]所述第二图像处理模式包括使用Div+html5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片；
[0018]所述第三图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片；以及
[0019]所述第四图像处理模式包括使用Div+html5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片；
[0020]其中，所述第二分辨率大于所述第一分辨率。
[0021]优选地，根据所述用户设备的显示屏幕的尺寸和分辨率来确定所述第一分辨率和所述第一分辨率。
[0022]根据本发明的另一方面，提供了一种自适应图像呈现系统，包括:
[0023]用户设备，配置为向服务器发送图像呈现请求，接收来自服务器的图像并呈现接收到的图像；
[0024]服务器，配置为接收来自用户设备的图像呈现请求，根据所述图像呈现请求确定所述用户设备的信息，根据确定的所述用户设备的信息来选择要使用的图像处理模式，以及使用选择的图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备。
[0025]优选地，所述要呈现的图像是全景图像，以及所述用户设备的信息包括以下中的至少一个:用户设备的类型和用户设备使用的浏览器的类型。
[0026]优选地，所述服务器配置为:
[0027]如果确定所述用户设备中当前WebGL可用，则使用WebGL方式并选择球面全景模型来绘制全景图像;以及
[0028]如果确定所述用户设备中当前WebGL不可用，则使用Div+html5方式并选择六面体全景模型来绘制全景图像。
[0029]优选地，所述服务器配置为，如果确定所述用户设备是移动设备且当前WebGL可用，则选择第一图像处理模式；
[0030]如果确定所述用户设备是移动设备且当前WebGL不可用，则选择第二图像处理模式；
[0031 ]如果确定所述用户设备是PC端且当前WebGL可用，则选择第三图像处理模式；以及
[0032]如果确定所述用户设备是PC端且当前WebGL不可用，则选择第四图像处理模式。
[0033]根据本发明的另一方面，还提供了一种自适应图像呈现系统，包括:
[0034]图像采集部件，用于从多个视角采集目标对象的多视角图像；
[0035]数据处理部件，用于接收由图像采集部件采集的多视角图像，将所述多视角图像合成为全景图像；
[0036]模式切换部件，与所述数据处理部件相连；
[0037]前端呈现部件，用于向模式切换部件发送图像呈现请求，从数据处理部件接收相对应的图像并呈现接收到的图像；
[0038]其中，模式切换部件接收来自前端呈现部件的图像呈现请求，根据所述图像呈现请求确定所述前端呈现部件的信息，根据确定的所述前端呈现部件的信息来选择要使用的图像处理模式；
[0039]其中，所述数据处理部件使用所述模式切换部件选择的图像处理模式对要呈现的图像进行处理得到与前端呈现部件相对应的图像，并将所述相对应的图像发送到前端呈现部件。
[0040]优选地，所述图像采集部件包括多个照相机。
[0041 ]优选地，所述图像采集部件包括六个照相机。
[0042]优选地，所述图像处理部件和模式切换部件是分离的或集成的，并实现为现场可编辑逻辑器件或数字信号处理器件。
[0043]根据本发明实施例，能够针对用户设备的类型，在使用用户设备呈现例如全景图像时，实现图像的按需加载，从而节省流量并减少成本。此外，能够根据用户设备的类型，制定不同的图像瓦片切分策略，可以改善用户体验。
【附图说明】
[0044]通过参考附图更加清楚地理解本发明实施例的特征和优点，附图是示意性的而不应理解为对本发明进行任何限制，在附图中:
[0045]图1示出了根据本发明实施例的图像呈现系统的方框图；
[0046]图2示出了根据本发明实施例的图像呈现方法的流程图；
[0047]图3示出了根据本发明实施例的图像呈现方法中选择图像处理模式的详细流程图；
[0048]图4示出了根据本发明实施例的图像呈现系统中确定用户设备的类型的示例；
[0049]图5示出了根据本发明实施例的图像呈现系统中选择全景图像绘制引擎以及模型的示例；
[0050]图6示出了根据本发明实施例的图像呈现系统中选择全景图像的切片方式的示例；
[0051 ]图7示出了根据本发明另一实施例的全景图像呈现系统的方框图；以及
[0052]图8示出了根据本发明另一实施例的全景图像呈现系统中图像采集部件的示意方框图。
【具体实施方式】
[0053]为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0054]全景也称为全景摄影或虚拟实景，是基于静态图像的虚拟现实技术。通过将相机环360°拍摄的一组照片拼接成一个全景图像，并使用专用的全景绘制引擎在互联网上显示，能够让用户能够通过PC或移动终端的屏幕来控制环视的方向，从而可左可右、可近可远地观看物体或场景。
[0055]图1示出了根据本发明实施例的自适应图像呈现系统的方框图。如图1所示，根据本发明实施例的图像呈现系统1000可以包括:用户设备1010和服务器1020。本领域技术人员可以理解，尽管图1中将用户设备1010与服务器1020直接相连，这二者之间当然可以包括其他组件。此外，用户设备1010与服务器1020可以通过任意有线或无线的方式相连。
[0056]根据本发明实施例的图像呈现系统，用户设备1010配置为向服务器发送图像呈现请求;服务器1020，配置为接收来自用户设备的图像呈现请求，根据所述图像呈现请求确定所述用户设备的信息，根据确定的所述用户设备的信息来选择要使用的图像处理模式，以及使用选择的图像处理模型对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。
[0057]图2示出了根据本发明实施例的图像呈现方法的流程图。如图2所示，在步骤S10，接收来自用户设备的图像呈现请求。
[0058]在步骤S20，根据所述图像呈现请求确定所述用户设备的信息。
[0059]在步骤S30，根据确定的所述用户设备的信息来选择要使用的图像处理模式。
[0060]然后，在步骤S40，使用选择的所述图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。
[0061]图3示出了根据本发明实施例的图像呈现方法中图像处理模式选择的详细流程图。图4、图5和图6分别示出了根据本发明实施例的图像呈现系统中确定用户设备的类型、选择全景图像绘制引擎和模型以及选择全景图像的切片方式的示例。
[0062]接下来将参考图3-图6来详细描述根据本发明实施例的图像处理模式的选择。
[0063]首先，在步骤305，确定用户设备是否是移动设备。在Web开发中，UserAgent可用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。此外，例如，如图4所示，还可以通过User Agent判断来用户设备是PC端设备还是移动设备，从而利用这些信息来改善程序的兼容性。具体地，例如通过在JavaScript语言中植入以下代码，就可以获得用户设备的信息，从而分析出用户设备是安卓设备还是1s设备或者wp设备，除此以外，可以归类为属于PC端设备。
[0064]ua = navigator.userAgent,
[0065]android=ua.match(/(Android)[\sV]+([\d\.]+)/)，
[0066]1s = ua.match(/(iPad|iPhone|iPod)\s+0S\s([\d_\.] + )/)，
[0067]wp=ua.match(/(ffindows\s+Phone)\s([\d\.]+)/)，
[0068]isffebkit = /ffebKit V [\d.]+/1.test(ua)，
[0069]isSafari = 1s?(navigator.standalone?isffebkit:(/Safari/1.test(ua)&&!/Cr1S/1.test(ua)&&!/MQQBrowser/1.test(ua))):false.
[0070]当确定用户设备是移动设备时，执行步骤307，否则执行步骤309。在步骤307，确定用户设备当前是否支持WebGL。如果确定用户设备当前支持WebGL，则执行步骤310，选择第一图像处理模式，如果确定用户设备当前不支持WebGL，则执行步骤312，选择第二图像处理模式。当前浏览器类型众多，不同浏览器对WebGL的支持情况也不一样，并且，在浏览器支持WebGL的情况下，也存在着该功能是处于关闭还是开启的问题。当通过浏览器去浏览全景时，需要根据用户使用的浏览器是否支持WebGL以及WebGL功能处于关闭还是开启状态，以决定全景绘制引擎是使用Div+Html5方式还是WebGL方式，是选用球面模型还是六面体模型。通过检测浏览器对WebGL的支持情况，确保引擎自主切换，正常运行。如图5所示，根据本发明实施例，第一图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为第一分辨率的多个图像瓦片，第二图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为第一分辨率的多个图像瓦片。
[0071]当在步骤305确定用户设备不是移动设备时，S卩，例如用户设备是PC端，则执行步骤309。在步骤309，确定用户设备当前是否支持WebGL。如果确定用户设备当前支持WebGL，则执行步骤314，选择第三图像处理模式，如果确定用户设备当前不支持WebGL，则执行步骤316，选择第四图像处理模式。根据本发明实施例，第三图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片，以及第四图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片。
[0072]可以根据所述用户设备的显示屏幕的尺寸和分辨率来确定第一分辨率和第一分辨率。由于全景图像比较大，可以根据用户的可见区域进行按需加载，这就要求将全景图切分成多个图像瓦片。通常，由于移动设备的显示屏幕比PC端的显示屏幕更小，针对PC端可以将图像瓦片切分成更大分辨率的图像，而移动端则切分成更小的瓦片。在图6所示的示例中，针对移动设备，将全景图像切分为分辨率为256*256的多个图像瓦片，针对PC端，将全景图像切分为分辨率为512*512的多个图像瓦片。本领域技术人员可以理解，本发明实施例并不局限于上述分辨率，而是可以使用其他任何分辨率。
[0073]根据本发明的另一方面，还提供了一种自适应图像呈现系统。图7示出了根据本发明实施例的自适应图像呈现系统的方框图，如图7所示，自适应图像呈现系统可以包括:
[0074]图像采集部件，用于从多个视角采集目标对象的多视角图像；
[0075]数据处理部件，用于接收由图像采集部件采集的多视角图像，将所述多视角图像合成为全景图像；
[0076]模式切换部件，与所述数据处理部件相连；
[0077]前端呈现部件，用于向模式切换部件发送图像呈现请求，从数据处理部件接收相对应的图像并呈现接收到的图像；
[0078]其中，模式切换部件接收来自前端呈现部件的图像呈现请求，根据所述图像呈现请求确定所述前端呈现部件的信息，根据确定的所述前端呈现部件的信息来选择要使用的图像处理模式；
[0079]其中，所述数据处理部件使用所述模式切换部件选择的图像处理模式对要呈现的图像进行处理得到与前端呈现部件相对应的图像，并将所述相对应的图像发送到前端呈现部件。
[0080]如图8所示，图像采集部件可以包括多个照相机。优选地，所述图像采集部件包括六个照相机，以便360度采集目标对象的多视角图像。
[0081]优选地，所述图像处理部件和模式切换部件是分离的或集成的，并实现为现场可编辑门器件或数字信号处理器件。
[0082]根据本发明实施例，当在用户设备端浏览全景图像时，根据浏览器是否支持WebGL以及WebGL处于开启还是关闭状态，自动选择全景模型采用球面模型还是六面体模型，图像绘制方法是使用WebGL方式还是Div+html5的方式。同时，根据设备是移动端设备还是PC端设备，决定将全景图像切分成更大还是更小分辨率的瓦片。由此，能够针对用户设备的类型，实现按需加载，从而节省流量并减少成本。此外，能够根据用户设备的类型，制定不同的图像瓦片切分策略，可以改善用户体验。
[0083]在以上实施例中，本领域技术人员应该理解，控制设备中的第一控制器以及智能设备中的第二控制器可以按照各种方式实现。通过使用方框图、流程图和/或示例，已经阐述了设备和/或工艺的众多实施例。在这种方框图、流程图和/或示例包含一个或多个功能和/或操作的情况下，本领域技术人员应理解，这种方框图、流程图或示例中的每一功能和/或操作可以通过各种硬件、软件、固件或实质上它们的任意组合来单独和/或共同实现。在一个实施例中，本公开所述主题的若干部分可以通过专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)、或其他集成格式来实现。然而，本领域技术人员应认识至IJ，这里所公开的实施例的一些方面在整体上或部分地可以等同地实现在集成电路中，实现为在一台或多台计算机上运行的一个或多个计算机程序(例如，实现为在一台或多台计算机系统上运行的一个或多个程序)，实现为在一个或多个处理器上运行的一个或多个程序(例如，实现为在一个或多个微处理器上运行的一个或多个程序)，实现为固件，或者实质上实现为上述方式的任意组合，并且本领域技术人员根据本公开，将具备设计电路和/或写入软件和/或固件代码的能力。此外，本领域技术人员将认识到，本公开所述主题的机制能够作为多种形式的程序产品进行分发，并且无论实际用来执行分发的信号承载介质的具体类型如何，本公开所述主题的示例性实施例均适用。信号承载介质的示例包括但不限于:可记录型介质，如软盘、硬盘驱动器、紧致盘(CD)、数字通用盘(DVD)、数字磁带、计算机存储器等；以及传输型介质，如数字和/或模拟通信介质(例如，光纤光缆、波导、有线通信链路、无线通信链路等)。
[0084]以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
【主权项】
1.一种自适应图像呈现方法，包括: 接收来自用户设备的图像呈现请求； 根据所述图像呈现请求确定所述用户设备的信息； 根据确定的所述用户设备的信息来选择要使用的图像处理模式； 使用选择的图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备以便进行呈现。2.根据权利要求1所述的方法，其中，所述要呈现的图像是全景图像。3.根据权利要求1或2所述的方法，其中，所述用户设备的信息包括以下中的至少一个:用户设备的类型和用户设备使用的浏览器的类型。4.根据权利要求3所述的方法，其中，根据确定的所述用户设备的信息来选择要使用的图像处理模式包括: 如果确定所述用户设备是移动设备且当前WebGL可用，则选择第一图像处理模式； 如果确定所述用户设备是移动设备且当前WebGL不可用，则选择第二图像处理模式； 如果确定所述用户设备是PC端且当前WebGL可用，则选择第三图像处理模式；以及 如果确定所述用户设备是PC端且当前WebGL不可用，则选择第四图像处理模式。5.根据权利要求4所述的方法，其中， 所述第一图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片； 所述第二图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片； 所述第三图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片；以及 所述第四图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片； 其中，所述第二分辨率大于所述第一分辨率。6.根据权利要求5所述的方法，其中，根据所述用户设备的显示屏幕的尺寸和分辨率来确定所述第一分辨率和所述第一分辨率。7.—种自适应图像呈现系统，包括: 用户设备，配置为向服务器发送图像呈现请求，接收来自服务器的图像并呈现所述接收到的图像； 服务器，配置为接收来自用户设备的图像呈现请求，根据所述图像呈现请求确定所述用户设备的信息，根据确定的所述用户设备的信息来选择要使用的图像处理模式，以及使用选择的所述图像处理模式对要呈现的图像进行处理，并将处理后的图像发送到所述用户设备。8.根据权利要求7所述的系统，其中，所述要呈现的图像是全景图像，以及所述用户设备的信息包括以下中的至少一个:用户设备的类型和用户设备使用的浏览器的类型。9.根据权利要求8所述的方法，其中，所述服务器配置为: 如果确定所述用户设备是移动设备且当前WebGL可用，则选择第一图像处理模式； 如果确定所述用户设备是移动设备且当前WebGL不可用，则选择第二图像处理模式； 如果确定所述用户设备是PC端且当前WebGL可用，则选择第三图像处理模式；以及 如果确定所述用户设备是PC端且当前WebGL不可用，则选择第四图像处理模式。10.根据权利要求9所述的系统，其中，所述第一图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片； 所述第二图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第一分辨率的多个图像瓦片； 所述第三图像处理模式包括使用WebGL方式并选择球面全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片；以及 所述第四图像处理模式包括使用Div+html 5方式并选择六面体全景模型来绘制全景图像，以及将绘制的全景图像切分为所述第二分辨率的多个图像瓦片； 其中，所述第二分辨率大于所述第一分辨率。
【文档编号】G06F17/30GK105930535SQ201610447746
【公开日】2016年9月7日
【申请日】2016年6月20日
【发明人】蒋矅寰
【申请人】微景天下（北京）科技有限公司