全景图像展示方法、装置、电子设备和计算机存储介质

技术领域

本发明涉及计算机技术领域，具体涉及一种全景图像展示方法、装置、电子设备和计算机存储介质。

背景技术

全景图通过广角的表现手段以及绘画、相片、视频、三维模型等形式，尽可能多表现出周围的环境。360全景，即通过对专业相机捕捉整个场景的图像信息或者使用建模软件渲染过后的图片，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照片或者计算机建模图片变为360度全观，用于虚拟现实浏览，把二维的平面图模拟成真实的三维空间，呈现给观赏者。

然而，由于现有的全景图或全景视频只能使用特定设备观看，如果没有相应设备，就无法使用。

发明内容

有鉴于此，本发明实施例旨在供一种全景图像展示方法、装置、电子设备和计算机存储介质，以实现全景图像的跨平台展示。

第一方面，本发明实施例旨在提供一种全景图像展示方法，所述方法包括：

获取初始图像；

对所述初始图像进行解析，确定对应的目标编码；

根据所述目标编码绘制全景图像，以对所述初始图像进行全景展示。

进一步地，所述对所述初始图像进行解析，确定所述初始图像对应的目标编码包括：

对所述初始图像进行解析，确定所述初始图像对应的二进制流；

基于预设的编码规则对所述二进制流进行特征编码，确定所述初始图像对应的目标编码。

进一步地，所述根据所述目标编码绘制全景图像包括：

基于预设的解码规则对所述目标编码进行解码，生成所述目标编码对应的中间图像；

根据所述中间图像绘制全景图像。

进一步地，所述根据所述中间图像绘制全景图像包括：

构建球体背景；

将所述中间图像贴图到所述球体背景上进行渲染，生成第一图像；

根据所述第一图像绘制所述全景图像。

进一步地，所述根据所述第一图像绘制所述全景图像包括：

构建立方体背景；

将所述第一图像在所述球体背景上的像素点映射到立方体上，生成第二图像；

基于层叠样式表对所述第二图像进行转化，生成所述全景图像。

进一步地，所述目标编码基于Base64编码规则生成。

第二方面，本发明实施例旨在提供一种全景图像展示装置，所述装置包括：

获取模块，用于获取初始图像；

解析模块，用于对所述初始图像进行解析，确定对应的目标编码；

展示模块，用于根据所述目标编码绘制全景图像，以对所述初始图像进行全景展示。

第三方面，本发明实施例旨在提供一种计算机程序产品，所述计算机程序产品包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现如上任一项所述的方法。

第四方面，本发明实施例旨在提供一种电子设备，包括存储器和处理器，所述存储器用于存储一条或多条计算机程序指令，其中，所述一条或多条计算机程序指令被所述处理器执行以实现如上任一项所述的方法。

第五方面，本发明实施例旨在提供一种计算机存储介质，所述计算机存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的方法步骤。

本发明实施例的技术方案通过获取初始图像，对所述初始图像进行解析，确定对应的目标编码，以及根据所述目标编码绘制全景图像，以对所述初始图像进行全景展示。由此，本实施例中能够在保留图像内容的同时，使得初始图像内容的展示不再局限于初始图像对应的展示平台，进而实现初始图像的跨平台展示。

附图说明

通过以下参照附图对本发明实施例的描述，本发明的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1是本发明实施例的全景图像展示方法的流程图；

图2是本发明实施例的目标编码生成方法的流程图；

图3是本发明实施例的根据目标编码绘制全景图像的流程图；

图4是本发明实施例的根据中间图像绘制全景图像的流程图；

图5是本发明实施例的根据第一图像绘制全景图像的流程图；

图6是本发明实施例的全景展示方法的整体流程图；

图7是本发明实施例的全景展示装置的示意图；

图8是本发明实施例的全景展示装置的另一个示意图；

图9是本发明实施例的电子设备的示意图。

具体实施方式

以下基于实施例对本发明进行描述，但是本发明并不仅仅限于这些实施例。在下文对本发明的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本发明。为了避免混淆本发明的实质，公知的方法、过程、流程、元件和电路并没有详细叙述。

此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。

除非上下文明确要求，否则在说明书的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是说，是“包括但不限于”的含义。

在本发明的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。

现有的全景图像展示多局限于特定的设备或播放平台，使用局限性大。有鉴于此，本发明实施例旨在提供一种全景图像展示方法，以实现全景图像的跨平台展示。

图1是本发明实施例的全景图像展示方法的流程图。如图1所示，本实施例的全景图像展示方法包括以下步骤。

在步骤S100，获取初始图像。

本实施例中，初始图像可以是图像采集装置采集的全景图片，也可以是对全景视频进行处理后得到的某个视频帧对应的全景图片，全景视频可以是全景VR视频、直播全景视频或其它类型的全景视频等。

在步骤S200，对初始图像进行解析，确定对应的目标编码。

本实施例中，目标编码的形式与全景展示平台对应的数据编码方式有关，以满足初始图像的跨平台全景展示需求。可选地，本实施例中的目标编码为Base64编码，目标编码基于Base64编码规则生成。其中，Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，是一种将二进制数据转化为字符，并基于64个可打印字符来表示二进制数据的方法，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。

可选地，本实施例中通过JavaScript对初始图像进行解析，并确定初始图像对应的目标编码。其中，JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。相比于其他形式的编程语言，JavaScript是一种基于对象的脚本语言，不仅可以创建对象，也能使用现有的对象，并在程序的运行过程中逐行进行解释。同时具有设计简单紧凑、动态性强和跨平台使用等特性。具体地，JavaScript语言中采用弱类型的变量类型，对使用的数据类型未做出严格的要求。同时，JavaScript采用事件驱动，不需要经过Web服务器就可以对用户的输入做出响应。例如，在访问一个网页时，用户可以基于JavaScript只需通过在网页中进行鼠标点击、上下移或窗口移动等操作即可直接对这些事件给出相应的响应。并且，JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意支持JavaScript脚本语言的机器上使用。由此，本实施例中通过JavaScript对初始图像进行解析，确定初始图像对应的目标编码，以使得基于目标编码实现全景图像的跨平台展示。

可选地，如图2所示，本实施例中基于以下步骤对初始图像进行解析，并确定初始图像对应的目标编码。

在步骤S210，对初始图像进行解析，确定初始图像对应的二进制流。

由于图像通常以二进制文件进行保存，本实施例中在获取初始图像后，会对初始图像进行解析，确定初始图像对应的二进制流。

在步骤S220，基于预设的编码规则对二进制流进行特征编码，确定初始图像对应的目标编码。

本实施例中，目标编码形式为Base64，由此，基于Base64编码对应的编码规则对二进制流进行特征编码，并确定初始图像对应的目标编码。可选地，本实施例中可以采用Base64编码工具对初始图像对应的二进制流数据进行编码，并生成对应的目标编码，也即生成初始对象对应的目标编码。

在步骤S300，根据目标编码绘制全景图像，以对初始图像进行全景展示。

本实施例中，在对初始图像进行解析，得到初始图像对应的目标编码后，会基于目标编码绘制全景图像，以对初始图像对应的图像内容进行全景展示。由于目标编码保留了初始图像对应的特征数据，用户可以根据全景图像的实际展示需求根据目标编码绘制能够适用于不同终端额全景图像，进而实现初始图像对应的全景图像的跨平台展示。

图3是本发明实施例的根据目标编码绘制全景图像的流程图。如图3所示，本实施例中通过以下步骤绘制全景图像。

在步骤S310，基于预设的解码规则对目标编码进行解码，生成目标编码对应的中间图像。

本实施例中，解码是编码过程的逆过程，基于与编码相对应的解码规则，以及解码过程的逆过程对目标编码进行解码，生成目标编码对应的中间图像。可选地，本实施例中可以基于Java Base64解码程序对目标编码进行解码，并生成目标编码对应的中间图像。

在步骤S320，根据中间图像绘制全景图像。

本实施例中，中间图像形式与标准全景图像一致，标准全景图像实质上是等距圆柱投影，通过将立体的球体上的各个点投影到圆柱体的侧面上，并投影之后将得到的图像平铺展开得到的长宽比为2:1的长方形图像作为标准全景图像。同时，本实施例中在根据中间图像绘制全景图像，进而对图像进行全景展示时，实际对应的是等距圆柱投影投影的逆过程，也即将中间图像还原成立体显示效果。

图4是本发明实施例的根据中间图像绘制全景图像的流程图。如图4所示，本实施例中通过以下步骤实现根据中间图像绘制全景图像。

在步骤S321，构建球体背景。

本实施例中，由于全景图像的绘制和展示过程相当于等距圆柱投影的逆过程，在绘制全景图像时，需要先构建一个球体背景，并基于球体背景绘制中间图像对应的全景图像。

可选地，本实施例中可以采用webgl来构建球体背景。其中，webgl(Web GraphicsLibrary)是一种3D绘图协议，作为绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，为HTML5 Canvas提供硬件3D加速渲染，使得Web开发人员能够借助系统显卡来在浏览器里更流畅地展示3D场景和模型，以及创建复杂的导航和数据视觉化。同时，webgl技术标准过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；通过统一的、标准的、跨平台的OpenGL接口，利用底层的图形硬件加速功能实现图形渲染，免去了开发网页专用渲染插件的步骤，能够被用于创建具有复杂3D结构的网站页面，以能够用于设计3D网页游戏等。由此，本实施例中通过上述方法构建球体背景，进而绘制中间图像对应的全景图像，为全景图像的跨平台展示提供方便，且有利于提高全景图像跨平台展示的效率。

进一步地，虽然现有的大多数浏览器能够实现对webgl的支持，但直接使用webgl相关接口进行开发，需要学习复杂的着色器语言，运行很多3D运算，开发周期长。由此，为提高根据中间图像生成第一图像的效率，本实施例中也可以选择通过API功能更加轻便的3D库，如Three.js来编程，并在球体背景模型上来贴图，以实现根据中间图像生成第一图像。其中，Three.js通过对webgl进行封装，将复杂的接口简单化，使得webgl的使用更加方便。同时，Three.js基于面向对象思维，将数据结构对象化，易用性强，适用范围广，更加方便开发。由此，本实施例中可以基于上述方法生成第一图像，提高第一图像的生成效率，进而提高全景图像的跨平台展示效率。

在步骤S322，将中间图像贴图到球体背景上进行渲染，生成第一图像。

本实施例中，在确定目标编码对应的中间图像后，将中间图像作为材质贴图到球体背景上进行渲染，生成第一图像。

进一步地，本实施例中通过Three.js生成第一图像的具体程序代码可以参考如下：

在步骤S323，根据第一图像绘制全景图像。

可选地，本实施例中通过上述方法能够快速生成中间图像对应的第一图像，进而有利于提高根据第一图像绘制全景图像的效率。但同时由于webgl本身特点，使得第一图像的兼容性仍有待完善。由此，为了提高绘制的全景图像的兼容性，本实施例中会通过ccs 3D转换来绘制第一图像对应的全景图像，以进一步提高最终的全景图像展示效果。

进一步地，如图5所示，本实施例中通过以下步骤绘制全景图像。

在步骤S323-1，构建立方体背景。

本实施例中，由于第一图像是贴图到球体背景上生成的图像，而ccs不能对球体背景进行操作，本实施例在根据第一图像绘制全景图像时，会先在已有的球体背景外围构建一个立方体背景，将第一图像转化为3D场景下的图像，进而提高绘制的全景图像的兼容性，满足不同平台的全景展示需求。

在步骤S323-2，将第一图像在球体背景上的像素点映射到立方体上，生成第二图像。

本实施例中，根据全景图的原理，会将视角放在球体中心，通过从球体中心观看球面上真实场景在球面上的映像而产生一种空间中全方位的视觉体验。由此，本实施例中在构建立方体场景后，会将第一图像在球体背景上的像素点映射到立方体上，生成第二图像。

可选地，本实施例中引入坐标，根据同一像素点在球体背景与立方体背景中坐标的对应关系，将第一图像在球体背景上的各像素点分别映射到立方体上，生成第二图像。在此过程中，首先需要建立一个球坐标系，确定球体背景上各像素点的球体坐标，并根据球体坐标系与立方体背景对应直角坐标系的坐标转换关系，确定各像素点在立方体背景下的直角坐标，进而根据各像素点的直角坐标和像素特征生成第二图像。

本实施例中，球体坐标描述的变量包括半径r和竖直方向上的夹角θ，水平方向上的夹角φ，假设球体背景中r为1，θ取值为0-π，φ取值为-π/4-7π/4。基于此，可以确定球面上各点在直角坐标系中的坐标分别为x＝sinθcosφ，y＝sinθsinφ，z＝cosθ。基于此，对于各像素点从球体背景到立方体背景上的投影，在确定角度θ和φ相同时，延长球体半径r，直至与立方体的面相交，假设此时的长度为R，则球体背景上的点(sinθcosφ，sinθsinφ，cosθ)对应的立方体上的点是(Rsinθcosφ，Rsinθsinφ，Rcosθ)。假设需要确定x＝1这个平面上的点，则1＝Rsinθcosφ，此时可以确定R＝1/(sinθcosφ)，x平面上的映射的点坐标为(1，tanφ，cotθ/cosφ)。同时，基于上述方法可以确定立方体背景中其它平面上的投影，进而生成第二图像。

进一步地，由于本实施例中对于图像的处理以像素为单位进行，在生成立方体背景对应的第二图像时，可以遍历球面图上的每个像素点并将各像素点投影到立方体面上来实现，也可以遍历立方体背景中各面上的点，求取各点映射到球体背景上的点，并获取球面上最接近位置的像素作为对应立方体背景中面上的点。具体地，由于采用遍历球面图上的每个像素点并将各像素点投影到立方体面上的方式，经投射后在立方体面上可能存在像素重复设置或个别位置像素缺失的现象。因此，本实施例选用后者方法来生成第二图像，也即，通过遍历立方体背景上各面上的每个点，求取各点映射到球面上的位置，并获取球体背景上最接近的位置的像素作为对应立体背景面上点的像素，进而通过各个面上对应的全部像素点组合形成第二图像。

在步骤S323-3，基于层叠样式表对第二图像进行转化，生成全景图像。

本实施例中，在生成第二图像后，会基于层叠样式表对第二图像进行转化，生成用于展示的全景图像。其中，层叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。通过使用CSS，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

可选地，本实施例中的全景展示方法对应的程序可以通过Electron实现，并使得基于初始图像绘制的全景图像能够适配多个类型的终端，通过在终端上展示绘制后的全景图像，实现全景图像的跨平台展示。其中，Electron是一个使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Node.js和chromium软件平台，被Atom编辑器和许多其他应用程序使用。Electron能够兼容Mac、Windows和Linux，并构建出三个平台的应用程序。

进一步地，本实施例中绘制的全景图像可以通过mxreality.js进行播放展示。mxreality.js包括播放库源码，能够同时支持hls(基于http的自适应码率流媒体传输协议)、flv(Flash Video)、webrtc(实时通信协议)直播协议以及全景图H5协议，是一款能够支持普通视频、全景VR视频、直播普通视频、直播全景视频以及culbemap(立方体贴图)视频和图片的播放器。由此，本实施例中可以在绘制全景图像后，通过上述播放器对绘制的全景图像进行播放展示，在实现全景图像跨平台展示的同时，提升用户的观看体验。

本实施例的技术方案通过获取初始图像，对所述初始图像进行解析，确定对应的目标编码，以及根据所述目标编码绘制全景图像，以对所述初始图像进行全景展示。由此，本实施例中通过解析得到初始图像对应的目标编码，能够在保留图像内容的同时，基于目标编码绘制全景图像进行全景展示，使得初始图像内容能够基于不同的平台终端进行展示，实现全景图像的跨平台展示，而不再局限于初始图像对应的展示平台，提高全景图像的适用范围。

图6是本发明实施例的全景展示方法的整体流程图。如图6所示，本实施例中通过以下步骤实现全景图像的跨平台展示。

在步骤S410，获取初始图像。

在步骤S420，对初始图像进行解析，确定初始图像对应的二进制流。

在步骤S430，基于预设的编码规则对二进制流进行特征编码，确定初始图像对应的目标编码。

在步骤S440，基于预设的解码规则对目标编码进行解码，生成目标编码对应的中间图像。

在步骤S450，构建球体背景。

在步骤S460，将中间图像贴图到球体背景上进行渲染，生成第一图像。

在步骤S470，构建立方体背景。

在步骤S480，将第一图像在球体背景上的像素点映射到立方体上，生成第二图像。

在步骤S490，基于层叠样式表对第二图像进行转化，生成全景图像。

需要说明的是，本实施例的全景图像展示方法中的各步骤对应方法的实现在前述内容中已经做了详细介绍，此处不再赘述。

本发明实施例的技术方案在获取初始图像后，通过解析初始图像的二进制流，将二进制流转化为可以被直接使用和展示的目标编码，再通过对目标编码进行处理，重新绘制全景图像，使得绘制后的全景图像能够适用于不同的终端平台，实现全景图像的跨平台展示。

图7是本发明实施例的全景展示装置的示意图。如图7所示，本实施例的全景展示装置包括获取模块1、解析模块2和展示模块3。其中，获取模块1用于获取初始图像。解析模块2用于对初始图像进行解析，确定对应的目标编码。展示模块3用于根据目标编码绘制全景图像，以对初始图像进行全景展示。

可选地，如图8所示，本实施例中的解析模块2包括第一解析单元21和第二解析单元22。其中，第一解析单元21用于对初始图像进行解析，确定初始图像对应的二进制流。第二解析单元22用于基于预设的编码规则对二进制流进行特征编码，确定初始图像对应的目标编码。

可选地，如图8所示，本实施例中的展示模块3包括第一生成单元31、第二生成单元32和第三生成单元33。其中，第一生成单元31用于基于预设的解码规则对目标编码进行解码，生成目标编码对应的中间图像。第二生成单元32用于根据中间图像绘制全景图像，具体地，第二生成单元32用于构建球体背景，将中间图像贴图到球体背景上进行渲染，生成第一图像。第三生成单元33用于根据第一图像绘制全景图像。具体地，第三生成单元33用于构建立方体背景，将第一图像在球体背景上的像素点映射到立方体上，生成第二图像，并基于层叠样式表对第二图像进行转化，生成全景图像。

本实施例的技术方案通过获取模块获取初始图像，通过解析模块对所述初始图像进行解析，确定对应的目标编码，以及通过展示模块根据所述目标编码绘制全景图像，以对所述初始图像进行全景展示。由此，本实施例中能够在保留图像内容的同时，使得初始图像内容的展示不再局限于初始图像对应的展示平台，进而实现初始图像的跨平台展示。

图9是本发明实施例的电子设备的示意图。如图9所示，图9所示的电子设备为通用地址查询装置，其包括通用的计算机硬件结构，其至少包括处理器91和存储器92。处理器91和存储器92通过总线93连接。存储器92适于存储处理器91可执行的指令或程序。处理器91可以是独立的微处理器，也可以是一个或者多个微处理器集合。由此，处理器91通过执行存储器92所存储的指令，从而执行如上所述的本发明实施例的方法流程实现对于数据的处理和对于其它装置的控制。总线93将上述多个组件连接在一起，同时将上述组件连接到显示控制器94和显示装置以及输入/输出(I/O)装置95。输入/输出(I/O)装置95可以是鼠标、键盘、调制解调器、网络接口、触控输入装置、体感输入装置、打印机以及本领域公知的其他装置。典型地，输入/输出装置95通过输入/输出(I/O)控制器96与系统相连。

本领域的技术人员应明白，本申请的实施例可提供为方法、装置(设备)或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可读存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品。

本申请是参照根据本申请实施例的方法、装置(设备)和计算机程序产品的流程图来描述的。应理解可由计算机程序指令实现流程图中的每一流程。

这些计算机程序指令可以存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现流程图一个流程或多个流程中指定的功能。

也可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程中指定的功能的装置。

本发明的另一实施例涉及一种非易失性存储介质，用于存储计算机可读程序，所述计算机可读程序用于供计算机执行上述部分或全部的方法实施例。

即，本领域技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指定相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的优选实施例，并不用于限制本发明，对于本领域技术人员而言，本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。