CN102546921B - Web全景图浏览的实现方法、系统和移动终端 - Google Patents

Abstract

本发明公开一种Web全景图浏览的实现方法、系统和移动终端，涉及虚拟现实实现领域。该方法包括：获取全景图像；响应于浏览指令，根据景图像确定浏览图像；将浏览图像交替写入与视图窗口对应的双显示缓冲区；在视图窗口中交替显示双显示缓冲区中的浏览图像。将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，可以流畅显示全景图，提高了用户体验。

Description

Web全景图浏览的实现方法、系统和移动终端

技术领域

本发明涉及虚拟现实技术领域，尤其涉及一种Web全景图浏览的实现方法、系统和移动终端。

背景技术

随着智能手机性能的逐渐提高以及智能手机操作系统的不断完善，越来越多的用户习惯于通过手机上网浏览网页，而目前手机网页仍主要采用图文信息的呈现方式，用户体验较差，需要一种全新的展现形式来吸引用户。

全景图技术是虚拟现实中一项重要的技术，能极大地改善用户体验。目前在互联网上已经使用，适用于旅游、地产等各种有展示需求的行业。和其它需要大量的三维场景建模及仿真技术投入的虚拟现实技术手段相比，全景图技术采用拼接的现实全景图像较容易地帮助人们实现对身临其境的虚拟漫游及交互的渴望。对于很多现实环境的三维虚拟展示，诸如：旅游景点虚拟导览、城市环境三维全景虚拟、房产全景虚拟等等，都有非常实际的应用价值。

目前已有的全景图浏览，要么使用flash技术，但flash文件占用资源过大，手机支持性不强；要么使用插件的方式，但前提是必须在自己的终端上安装一定的插件。

发明内容

本发明要解决的一个技术问题是提供一种Web全景图浏览的实现方法、系统和移动终端，能够更流畅地实现全景图浏览。

本发明提供一种Web全景图浏览的实现方法，包括：

获取全景图像；

响应于浏览指令，根据全景图像确定浏览图像;

将浏览图像交替写入与视图窗口对应的双显示缓冲区；所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示；

在视图窗口中交替显示双显示缓冲区中的浏览图像；

基于CSS和JavaScript的脚本实现Web全景图浏览;

其中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示;

根据图片位移的水平方向，设定了两种移动模式：MOVE_ASC模式，视图不动而图片左移，视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，视图看到的是相对从右到左平移的效果;相对于Image1而言，Image2的位置在其左侧或右侧，视全景图浏览的模式而定，有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧；

（1）浏览初始化

设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式或MOVE_DESC模式，设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数；

（2）水平方向位移

1）平移步长step的确定

若moveMode采用的是MOVE_ASC模式，则step=-imageStep；

若moveMode采用的是MOVE_DESC模式，则step=imageStep；

2）对Image1图片进行处理

每平移一次，图片的水平位置可表示为：

x=Image1.left+step

若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值；但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理：

a）若moveMode采用的是MOVE_ASC模式

当图片Image1左侧移出视图区域左边界时，进行如下处理：

localRelation=IMG_LAST;

当图片的右侧移进视图区域时，进行如下处理：

x=x+2×Image1.width

localRelation=IMG_FIRST;

b）img_move采用的是MOVE_DESC模式

当图片Image1右侧移出视图区域右边界时，进行如下处理：

localRelation=IMG_LAST;

当图片Image1的左侧进入视图区域时，进行如下处理：

x=x-2×Image1.width

localRelation=IMG_FIRST;

最后将x的值直接赋予Image1.left；

3）对Image2图片进行处理

Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值；对left值大小的控制分以下两种情况处理：

a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：

Image2.left=Image1.left+Image1.width

b）其他情况，则：

Image2.left=Image1.left-Image1.width

通过对图片Image1和Image2的有效控制，实现同一张全景图左右360度浏览的效果；左移与右移的互换通过moveMode与localRelation的同时切换即可实现。

根据本发明方法的一个实施例，获取全景图像包括：从服务器端获取全景图像。

根据本发明方法的一个实施例，还包括：服务器端通过图像预处理、特征向量提取、特征匹配、图像拼接、图像融合生成全景图像。

根据本发明方法的一个实施例，浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示。

根据本发明方法的一个实施例，全景图像是经过柱面投影变换获得的柱面投影图像。

本发明还提供一种移动终端，包括与视图窗口对应的双显示缓冲区，以及：

全景图像获取模块，用于获取全景图像；

浏览图像确定模块，用于响应于浏览指令，根据全景图像确定浏览图像，将浏览图像交替写入双显示缓冲区；

图像显示模块，用于在视图窗口中交替显示双显示缓冲区中的浏览图像；所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示；

控制模块，用于解析CSS和JavaScript的脚本获得操作指令，将操作指令发送给全景图像获取模块、浏览图像确定模块和图像显示模块;

其中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示;

根据图片位移的水平方向，设定了两种移动模式：MOVE_ASC模式，视图不动而图片左移，视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，视图看到的是相对从右到左平移的效果;相对于Image1而言，Image2的位置在其左侧或右侧，视全景图浏览的模式而定，有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧；

（1）浏览初始化

设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式或MOVE_DESC模式，设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数；

（2）水平方向位移

1）平移步长step的确定

若moveMode采用的是MOVE_ASC模式，则step=-imageStep；

若moveMode采用的是MOVE_DESC模式，则step=imageStep；

2）对Image1图片进行处理

每平移一次，图片的水平位置可表示为：

x=Image1.left+step

若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值；但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理：

a）若moveMode采用的是MOVE_ASC模式

当图片Image1左侧移出视图区域左边界时，进行如下处理：

localRelation=IMG_LAST;

当图片的右侧移进视图区域时，进行如下处理：

x=x+2×Image1.width

localRelation=IMG_FIRST;

b）img_move采用的是MOVE_DESC模式

当图片Image1右侧移出视图区域右边界时，进行如下处理：

localRelation=IMG_LAST;

当图片Image1的左侧进入视图区域时，进行如下处理：

x=x-2×Image1.width

localRelation=IMG_FIRST;

最后将x的值直接赋予Image1.left；

3）对Image2图片进行处理

Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值；对left值大小的控制分以下两种情况处理：

a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：

Image2.left=Image1.left+Image1.width

b）其他情况，则：

Image2.left=Image1.left-Image1.width

通过对图片Image1和Image2的有效控制，实现同一张全景图左右360度浏览的效果；左移与右移的互换通过moveMode与localRelation的同时切换即可实现。

根据本发明的移动终端的一个实施例，浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示。

本发明还提供一种Web全景图浏览的实现系统，包括服务器以及上述移动终端；服务器用于生成全景图像，移动终端从服务器获取全景图像。

本发明提供的Web全景图浏览的实现方法、系统和移动终端，将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，能够更流畅地显示全景图，提高了用户体验。

附图说明

图1示出本发明的手机Web全景图浏览的实现方法的一个实施例的流程图；

图2示出本发明的服务器端生成全景图的一个实施例的流程图；

图3示出根据图片生成全景图的例子；

图4示出根据全景图生成柱面投影图的例子；

图5示出全景图与视图窗口的位置关系示意图；

图6示出本发明的Web全景图浏览的实现系统的一个实施例的结构图；

图7出本发明的移动终端的一个实施例的结构图。

具体实施方式

下面参照附图对本发明进行更全面的描述，其中说明本发明的示例性实施例。在附图中，相同的标号表示相同或者相似的组件或者元素。

根据本发明的部分实施例，采用了图像处理、CSS和JavaScript技术，实现了手机Web全景图的生成与浏览效果，并通过手机按键操作实现了人机交互性。

图1示出本发明的手机Web全景图浏览的实现方法的一个实施例的流程图。

如图1所示，在步骤102，获取全景图像。例如在服务器端根据图片生成全景图像，终端从服务器端获得全景图像。

在步骤104，响应于浏览指令，根据全景图像确定浏览图像。用户输入浏览指令，终端根据用户的浏览指令，根据全景图像确定浏览图像。例如，根据用户的左移、右移、上移、下移、缩放等指令，确定当前的浏览图像。

在步骤106，将浏览图像交替写入与视图窗口对应的双显示缓冲区。在终端的内存中设置两个与视图窗口对应的显示缓冲区，将确定的浏览图像交替写入双显示缓冲区。

在步骤108，在视图窗口中交替显示双显示缓冲区中的浏览图像。例如，当前时刻显示第一显示缓冲区的图像，则下一时刻显示第二显示缓冲区的图像，再下一时刻显示第一显示缓冲区的图像，依次类推。

在上述实施例中，将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，可以流畅显示全景图，提高了用户体验。

根据本发明的一个实施例，在终端基于CSS和JavaScript的脚本实现Web全景图浏览，通过CSS（Cascading Style Sheets，层叠样式表）和JavaScript的脚本实现上述浏览步骤。现有技术中终端播放全景图，要么使用flash技术，但flash文件占用资源过大，手机支持性不强；要么使用插件的方式，但前提是必须在自己的终端上安装一定的插件。基于CSS和JavaScript的脚本实现Web全景图浏览，通用性强，不需要用户下载任何插件，占用资源小，对手机的支持性强。

图2示出本发明的服务器端生成全景图的一个实施例的流程图。

如图2所示，步骤202，图像预处理。例如，使用图像预处理改善图像的视觉效果，通过图像平滑处理技术去除图像的噪声。

步骤204，特征向量提取。例如，使用SIFT算法提取特征向量。

SIFT算法是一种基于特征的配准方法。SIFT特征匹配算法是David G.Lowe总结了以往的基于不变量技术的特征检测方法的基础上，于2004年提出的一种基于尺度空间的、对图像缩放、旋转甚至仿射变换保持不变性的特征匹配算法。该算法匹配能力较强，能提取稳定的特征，可以处理两幅图像之间发生平移、旋转、仿射变换、视觉变换、光照变换情况下的匹配问题，甚至在某种程度上对任意角度拍摄的图像也具备较为稳定的特征匹配能力，从而可以实现差异较大的两幅图像之间的特征匹配。

步骤206，特征匹配。例如，使用KD树与BBF算法进行特征匹配。

针对图像中提取的SIFT特征点，文使用k-d tree树构建算法构建一棵k-d树，再使用BBF算法在k-d树上寻找最近距离点KNN(K-nearest neighbor)。k-d树是二叉检索树的扩展，k表示空间的维数。k-d树的每一层将空间分成两个，树的顶层结点按一维进行划分，下一层结点按另一维进行划分，以此类推，各个维循环往复。划分要使得在每个结点，大约一半存储在子树中的点落入一侧，而另一半落入另一侧。当一个结点中的点数少于给定的最大点数时，划分结束。BBF(Best BinFirst)算法用于在KD-tree上找最近距离匹配点对。它借助优先队列，从根节点开始，在KD-tree寻找路径，错过的点先塞到优先队列里，先向前扫描至叶子节点；然后再从队列里取出目前关键值最小的，重复上述过程，一个直扫到叶子节点；直到队列为空，或者已经重复了200遍时停止。

步骤208，图像拼接。例如，使用DLT方法、RANSAC算法、LM非线性优化算法得到匹配特征之间的变换参数以实现图像拼接。

在成功提取图像之间匹配的SIFT特征点之后，利用DLT（DirectLinear Transformation）方法找到这些特征点对之间的变换参数，并使用RANSAC算法对特征点提纯，找到最适合的特征点对（称其为内点），并估计出变换参数矩阵。之后在基于内点的基础上，进一步利用LM非线性优化算法优化匹配特征点之间的变换参数，使之可以有效利用于图像的拼接。

DLT（直接线性变换）方法，Abdal-Aziz和Karara提出了直接线性变换像机定标的方法，他们从摄影测量学的角度深入的研究了像机图像和环境物体之间的关系，建立了像机成像几何的线性模型，这种线性模型参数的估计完全可以由线性方程的求解来实现。直接线性变换是将像点和物点的成像几何关系在齐次坐标下写成透视投影矩阵的形式。RANSAC算法为一种全自动稳健的图像拼接融合算法。给定N个数据点组成的数据集合P，其中大多数是由一个参数未知的特定模型产生的，该模型的参数至少需要n个数据点求出（N>n）。算法的目的就是求出这个模型的参数。将下述过程运行k次：Step1，从P中随机选取含有n个数据点的子集S1；Step2，由所选取的n个数据点计算出一个模型H1；Step3，对数据集合中其余的N-n个数据点，计算出它们与模型H1之间的距离，记录在H1的某个误差允许范围内的P中数据点的个数c。

Levenberg-Marquardt非线性优化算法是求解非线性最小化问题的标准方法。该算法是在逆Hessian矩阵方法的极限和最速下降法之间做平滑调和，即后一方法在远离最小值时应用，当接近最小值时则逐渐切换到前一方法。从算法本质来看，它们都无法克服对初始值选取敏感以及不能保证收敛到全局最优解等缺陷。但通常如果初始值误差在一定范围内，利用该求精算法，可以使匹配点的误差控制在0.1个像素之内。

步骤210，图像融合。例如，使用图像融合方法消除图像之间的拼接痕迹。

图3示出根据图片生成全景图的例子。图3上方示出连续的3张图片经过图像处理生成图3下方所示的全景图。

根据本发明的一个实施例，针对生成的平面全景图，还可以采用柱面投影变换公式实现了该全景图的柱面投影，获得全景图的柱面投影图像。这样，除了直接浏览平面全景图外，用户还可以选择柱面变形的视觉效果。图4示出根据全景图生成柱面投影图的例子。如图4所示，第1行为投影前的全景图，第2行为柱面投影后的效果。

下面通过一个具体的例子说明全景图手机浏览的实现。

图5示出全景图与视图窗口的位置关系示意图。外面大的框表示全景图，具有相应的宽度width、高度height和左上顶点（left，top）。其中波纹框表示视图窗口，具有宽度View_width和高度View_height。在下面的描述中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像。如图5所示，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示。为了实现全景图360度的顺畅浏览，使用了两个显示缓冲区中的图片（分别记作Image1和Image2）交替显示。

根据图片位移的水平方向，设定了两种移动模式moveMode：MOVE_ASC模式，视图不动而图片左移，于是视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，于是视图看到的是相对从右到左平移的效果。相对于Image1而言，Image2的位置可以是在其左侧或右侧，视全景图浏览的模式而定，具体而言有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧。

（1）浏览初始化

设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式、IMG_LAST，同时设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数。

（2）水平方向位移

1）平移步长step的确定

若moveMode采用的是MOVE_ASC模式，则step=-imageStep；

若moveMode采用的是MOVE_DESC模式，则step=imageStep；

2）对Image1图片进行处理

每平移一次，图片的水平位置可表示为：

x=Image1.left+step

若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值。但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理。

a）若moveMode采用的是MOVE_ASC模式

当图片Image1左侧移出视图区域左边界时，进行如下处理：

localRelation=IMG_LAST;

当图片的右侧移进视图区域时，进行如下处理：

x=x+2×Image1.width

localRelation=IMG_FIRST;

b）img_move采用的是MOVE_DESC模式

当图片Image1右侧移出视图区域右边界时，进行如下处理：

localRelation=IMG_LAST;

当图片Image1的左侧进入视图区域时，进行如下处理：

x=x-2×Image1.width

localRelation=IMG_FIRST;

最后将x的值直接赋予Image1.left。

3）对Image2图片进行处理

Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值。对left值大小的控制分以下两种情况处理。

a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：

Image2.left=Image1.left+Image1.width

b）其他情况，则：

Image2.left=Image1.left-Image1.width

通过对图片Image1和Image2的有效控制，可以实现同一张全景图左右360度浏览的完美效果。左移与右移的互换也只需要通过moveMode与localRelation的同时切换即可实现。

（3）竖直方向位移

因为Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，所以只需对其中一张图片进行处理即可得到平移后的位置。

上移的浏览效果通过将图片进行下移得以实现，即触发一次上移事件，

y=Image1.top+imageStep

下移图片可能会出现出界问题，故加入一个约束条件以确保图片下移不出界，即：若y大于零，则直接将y的值设为零，最后将y值赋予Image1.top和Image2.top。

同理，下移的浏览效果等价于将图片进行上移，即触发一次下移事件，

y=Image1.top-imageStep

下移图片可能会出现出界问题，故加入一个约束条件以确保图片下移不出界，即：若y小于(View_height-Image1.height)，则直接将y值设为(View_height-Image1.height)，最后将y值赋予Image1.top和Image2.top。

（4）全景图缩放

为了使缩放后视图的中心不变，我们选取以视图中心为基准点进行缩放，设缩放的比例为：

m=1.3^d

则缩放后的图片大小、位置为：

$\begin{array}{c}\mathrm{width}=\mathrm{width}\×m\\ \mathrm{height}=\mathrm{height}\×m\\ \mathrm{left}=\frac{1}{2}\mathrm{View}\_\mathrm{width}-(\frac{1}{2}\mathrm{View}\_\mathrm{width}-\mathrm{left})\×m\\ \mathrm{top}=\frac{1}{2}\mathrm{View}\_\mathrm{height}-(\frac{1}{2}\mathrm{View}\_\mathrm{height}-\mathrm{top})\×m\end{array}$

通过对d的控制即可实现全景图的缩放功能。

另外，为了避免全景图缩放太大或太小的不具有实际意义的情况，可通过设置d的值在一个闭区间内，当然也可以通过设置图片大小来进行边界约束。

（5）全景图的全屏

只需更改View_width、View_height，使之大小等同于屏幕的大小即可。

图6示出本发明的Web全景图浏览的实现系统的一个实施例的结构图。如图6所示，该系统包括移动终端61和服务器62。服务器62生成全景图像，移动终端61从服务器62获取该全景图像。其中，移动终端61包括与视图窗口对应的双显示缓冲区，还包括全景图像获取模块611、浏览图像确定模块612和图像显示模块613。全景图像获取模块611获取全景图像；浏览图像确定模块612响应于浏览指令，根据全景图像确定浏览图像，将浏览图像交替写入双显示缓冲区；图像显示模块613在视图窗口中交替显示双显示缓冲区中的浏览图像。

图7出本发明的移动终端的一个实施例的结构图。如图7所示，该移动终端71除了包括全景图像获取模块611、浏览图像确定模块612和图像显示模块613，还包括控制模块714。全景图像获取模块611、浏览图像确定模块612和图像显示模块613可以参见图6中对应模块的描述，为简洁起见在此不再详细描述。控制模块714解析CSS和JavaScript的脚本获得操作指令，将操作指令发送给全景图像获取模块611、浏览图像确定模块612和图像显示模块613。

上述实施例中，浏览指令例如包括水平移动、垂直移动、全景图缩放、或全屏显示。

本业务基于智能手机，为用户提供在手机上浏览Web全景图的功能，使用户可以随时随地通过手机观看三维拟真场景，身临其境般地感受旅游景点、房地产、酒店公寓、公共设施等行业的全景展示，给用户心理上带来冲击和震撼的感觉。本业务能够为用户带来崭新的视觉效果和全新的业务体验，带来可观的经济效益。

对于图6－7实施例中各个模块的具体实现，可以参见上文中图1－5实施例的描述，为简洁起见，在此没有详细描述。

在上面的几个实施例中，各个模块用框图示出以说明它们的功能。这些功能块可以用硬件、软件、固件、中间件、微代码、硬件描述语音或者它们的任意组合来实现。举例来说，一个或者两个功能块都可以利用运行在微处理器、数字信号处理器（DSP）或任何其他适当平台上的代码实现。代码可以表示过程、功能、子程序、程序、例行程序、子例行程序、模块或者指令、数据结构或程序语句的任意组合。代码可以位于计算机可读介质中。计算机可读介质可以包括一个或者多个存储设备，例如，包括RAM存储器、闪存存储器、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、移动硬盘、CD-ROM或本领域公知的其他任何形式的存储介质。计算机可读介质还可以包括编码数据信号的载波。

可选地，或者除此之外，一个或者两个功能模块都可以利用专用集成电路（ASIC）、控制器、微控制器、状态机、现场可编程门阵列（FPGA）或者其他可编程逻辑器件、离散门或者晶体管逻辑、离散硬件部件、或者它们的任意组合实现。

本领域技术人员将意识到硬件、固件和软件配置在这些情况下的可替换性，以及如何最好地实现每个特定应用地所述功能。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。

Claims (6)

1.一种Web全景图浏览的实现方法，其特征在于，包括：

获取全景图像；

响应于浏览指令，根据所述全景图像确定浏览图像，所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示;

将所述浏览图像交替写入与视图窗口对应的双显示缓冲区；

在所述视图窗口中交替显示所述双显示缓冲区中的浏览图像;

基于CSS和JavaScript的脚本实现Web全景图浏览；

其中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示;

根据图片位移的水平方向，设定了两种移动模式：MOVE_ASC模式，视图不动而图片左移，视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，视图看到的是相对从右到左平移的效果;相对于Image1而言，Image2的位置在其左侧或右侧，视全景图浏览的模式而定，有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧；

（1）浏览初始化

设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式或MOVE_DESC模式，设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数；

（2）水平方向位移

1）平移步长step的确定

若moveMode采用的是MOVE_ASC模式，则step=-imageStep；

若moveMode采用的是MOVE_DESC模式，则step=imageStep；

2）对Image1图片进行处理

每平移一次，图片的水平位置可表示为：

x=Image1.left+step

若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值；但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理：

a）若moveMode采用的是MOVE_ASC模式

当图片Image1左侧移出视图区域左边界时，进行如下处理：

localRelation=IMG_LAST;

当图片的右侧移进视图区域时，进行如下处理：

x=x+2×Image1.width

localRelation=IMG_FIRST;

b）img_move采用的是MOVE_DESC模式

当图片Image1右侧移出视图区域右边界时，进行如下处理：

localRelation=IMG_LAST;

当图片Image1的左侧进入视图区域时，进行如下处理：

x=x-2×Image1.width

localRelation=IMG_FIRST;

最后将x的值直接赋予Image1.left；

3）对Image2图片进行处理

Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值；对left值大小的控制分以下两种情况处理：

a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：

Image2.left=Image1.left+Image1.width

b）其他情况，则：

Image2.left=Image1.left-Image1.width

通过对图片Image1和Image2的有效控制，实现同一张全景图左右360度浏览的效果；左移与右移的互换通过moveMode与localRelation的同时切换即可实现。

2.根据权利要求1所述的实现方法，其特征在于，所述获取全景图像包括：

从服务器端获取所述全景图像。

3.根据权利要求2所述的实现方法，其特征在于，还包括：

所述服务器端通过图像预处理、特征向量提取、特征匹配、图像拼接、图像融合生成所述全景图像。

4.根据权利要求1所述的实现方法，其特征在于，所述全景图像是经过柱面投影变换获得的柱面投影图像。

5.一种移动终端，其特征在于，包括与视图窗口对应的双显示缓冲区，还包括：

全景图像获取模块，用于获取全景图像；

浏览图像确定模块，用于响应于浏览指令，根据所述全景图像确定浏览图像，将所述浏览图像交替写入所述双显示缓冲区；所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示；

图像显示模块，用于在所述视图窗口中交替显示所述双显示缓冲区中的浏览图像；

控制模块，用于解析CSS和JavaScript的脚本获得操作指令，将所述操作指令发送给所述全景图像获取模块、浏览图像确定模块和图像显示模块;

其中，分别用Image1和Image2表示与视图窗口对应的两个显示缓冲区的图像，全景图片的大小、位置用（left，top，width，height）来表示，视图窗口的大小、位置用（0，0，View_width，View_height）来表示;

根据图片位移的水平方向，设定了两种移动模式：MOVE_ASC模式，视图不动而图片左移，视图看到的是相对从左到右平移的效果；MOVE_DESC模式，视图不动而图片右移，视图看到的是相对从右到左平移的效果;相对于Image1而言，Image2的位置在其左侧或右侧，视全景图浏览的模式而定，有两种类型的位置关系localRelation，记为：IMG_FIRST，表示Image2在Image1的左侧；IMG_LAST，表示Image2在Image1的右侧；

（1）浏览初始化

设定移动模式moveMode、Image2的位置关系localRelation分别为MOVE_ASC模式或MOVE_DESC模式，设置移动时水平、竖直方向移动的步长imgeStep均为某一个常数；

（2）水平方向位移

1）平移步长step的确定

若moveMode采用的是MOVE_ASC模式，则step=-imageStep；

若moveMode采用的是MOVE_DESC模式，则step=imageStep；

2）对Image1图片进行处理

每平移一次，图片的水平位置可表示为：

x=Image1.left+step

若不考虑图片平移出界的情况，x的值即是平移后的Image1.left值；但考虑到图片平移出界的问题，x的值不能直接赋予Image1.left，需按以下几种情况进行处理：

a）若moveMode采用的是MOVE_ASC模式

当图片Image1左侧移出视图区域左边界时，进行如下处理：

localRelation=IMG_LAST;

当图片的右侧移进视图区域时，进行如下处理：

x=x+2×Image1.width

localRelation=IMG_FIRST;

b）img_move采用的是MOVE_DESC模式

当图片Image1右侧移出视图区域右边界时，进行如下处理：

localRelation=IMG_LAST;

当图片Image1的左侧进入视图区域时，进行如下处理：

x=x-2×Image1.width

localRelation=IMG_FIRST;

最后将x的值直接赋予Image1.left；

3）对Image2图片进行处理

Image2图片与Image1图片保持图片大小（width，height）一致，top值也一致，唯一不同的就是left值；对left值大小的控制分以下两种情况处理：

a）moveMode采用的是MOVE_ASC模式且localRelation=IMG_LAST，或者moveMode采用的是MOVE_DESC模式且localRelation=IMG_FIRST，则：

Image2.left=Image1.left+Image1.width

b）其他情况，则：

Image2.left=Image1.left-Image1.width

通过对图片Image1和Image2的有效控制，实现同一张全景图左右360度浏览的效果；左移与右移的互换通过moveMode与localRelation的同时切换即可实现。

6.一种Web全景图浏览的实现系统，其特征在于，包括服务器以及如权利要求5所述的移动终端；

所述服务器用于生成所述全景图像，所述移动终端从所述服务器获取所述全景图像。

Images