发明内容
本发明提供一种全景图像处理方法及处理系统,以增强全景图片在展示中与用户的交互性。
为了解决上述问题,本发明公开了一种全景图像处理方法,包括:
调用flash播放器展现全景图像;所述flash播放器设置一个JavaScript调用函数,所述JavaScript调用函数为获取坐标函数;所述全景图像由多个元素构成;
在信息添加模式下,接收某个元素的描述,调用获取坐标函数得到该元素的坐标,并将该元素的坐标和该元素的描述作为元素信息保存至元素数据库;在该元素的坐标处添加坐标热点,并将所述坐标热点链接至所述元素数据库;
在信息浏览模式下,显示各元素的坐标热点,接收用户对某个元素的坐标热点的选定,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,并在当前flash播放器中展现所述元素信息;
在交易模式下,显示各元素的坐标热点,接收用户对某个元素的坐标热点的点击并调用交易模板,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息并显示在所述交易模板中;接收用户对交易模板中购买信息的设置后,依据所述交易模板生成订单。
可选地,所述在交易模式下还包括:
接收用户对某个元素的点击并调用交易模板;
接收用户对交易模板中元素信息和交易信息的设置,并依据所述交易模板生成订单。
可选地,还包括:
按照预设比例将所述全景图像切分为多个切片图层,各切片图层包含相同个数的元素。
可选地,所述调用flash播放器展现全景图像之后,还包括:
接收用户虚拟位置指令,并根据所述用户虚拟位置指令加载对应的切片图层,所述用户虚拟位置指令越大,加载的切片图层越大。
可选地,所述调用获取坐标函数得到该元素的坐标,包括:
在当前flash播放器中选定参照点;
调用获取坐标函数根据该元素与所述参照点之间的角度计算该元素的坐标。
可选地,所述在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,包括:
调用元素数据库,查找该元素的坐标热点对应的元素的坐标;
在所述元素数据库中查找与所述元素的坐标对应的元素的描述。
可选地,所述某个元素的描述包括:
该元素的元素名称、元素价格、元素备注和元素图片。
可选地,所述元素图片通过以下步骤获得:
调用获取坐标函数得到该元素的坐标;
调用定位坐标函数在所述全景图像中锁定该元素并截图,截图结果作为元素图片,所述定位坐标函数为设置在flash播放器的一个JavaScript调用函数。
本发明还提供了一种全景图像处理系统,包括:
图像展示模块,用于调用flash播放器展现全景图像;所述flash播放器设置两个JavaScript调用函数,一个是获取坐标函数,一个是定位坐标函数;所述全景图像由多个元素构成;
信息添加模块,用于接收某个元素的描述,调用获取坐标函数得到该元素的坐标,并将该元素的坐标和该元素的说明作为元素信息保存至元素数据库;在该元素的坐标处添加坐标热点,并将所述坐标热点链接至所述元素数据库,所述坐标热点与元素的坐标一一对应;
信息浏览模块,用于显示各元素的坐标热点,接收用户对某个元素的坐标热点的选定,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,并在当前flash播放器中展现所述元素信息;
交易模块,用于显示各元素的坐标热点,接收用户对某个元素的坐标热点的点击并调用交易模板,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息并显示在所述交易模板中;接收用户对交易模板中交易信息的设置后,依据所述交易模板生成订单。
可选地,还包括:
切分模块,用于按照预设比例将所述全景图像切分为多个切片图层,各切片图层包含相同个数的元素。
与现有技术相比,本发明包括以下优点:
本发明通过设置内部函数可以由用户A通过前端对全景图像中的元素添加描述,使得用户B在浏览的时候准确快捷地了解该元素的信息,达到了较好的浏览效果。而且,本实施例中通过在全景图像中添加元素的坐标热点,并将坐标热点链接到保存有元素信息的元素数据库中,可以极好地实现用户和全景图像中某个元素的交互,大大增加了全景图像展示与用户的交互性。
例如,当本发明应用到电子商务场景中时,在交易模式下,通过对全景图像进行处理,买家可以通过点击全景图像中的坐标热点,直接到达该坐标热点指向的元素数据库获得元素信息,从而快速完成交易,本发明不仅实现了全景购物,而且使得商铺、商品等相关空间的展示不再有时间、地点的限制,可以实现24小时不间断的在线展示。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本发明作进一步详细的说明。
参照图1,示出了本发明一种全景图像处理方法的流程图,本实施例具体可以包括以下步骤:
步骤100,调用flash播放器展现全景图像;所述flash播放器设置一个JavaScript调用函数,所述JavaScript调用函数为获取坐标函数;所述全景图像由多个元素构成;
需要说明的是,本实施例中flash播放器具体可以通过设置一个JavaScript脚本及调用内部的坐标函数,来获取所述全景图像中的坐标并对坐标数据进行处理和传递。本实施例中调用内部的坐标函数具体可以有两个,一个为获取坐标函数,另一个为定位坐标函数。
本实施例所说的全景图像可以利用单反相机、高清数码相机或街景车拍摄实景照片,经过特殊的图像拼合处理技术,合成360度巨幅全景图像,呈现出的真实的场景。当前也可以采用其他方式获得全景图像,本实施例对此不作限制。
全景图像包含大量的元素,本实施例中元素不限定为具体的图像内容,元素可以是风景、植物,也可以是具体的商品,例如,全景图像为一家实体店铺的全景图,则此时的全景图像中的元素可以是店铺里具体的商品。
本实施例中flash播放器可以通过相应的编解码算法,实现对全景图像的展现,并通过内部JavaScript脚本中相应的获取坐标函数来获取元素坐标;获取坐标函数主要通过计算当前元素与参照点之间的角度得到当前元素的坐标。获取坐标函数也可以采用其他方法获取元素坐标,本实施例对此不作限制。
步骤102,在信息添加模式下,接收某个元素的描述,调用获取坐标函数得到该元素的坐标,并将该元素的坐标和该元素的描述作为元素信息保存至元素数据库;在该元素的坐标处添加坐标热点,并将所述坐标热点链接至所述元素数据库;
在信息添加模式下,用户可以在flash播放器所展现的全景图像上添加信息,例如对全景图像中某个元素的描述,这里的描述具体可以包括:该元素的元素名称、元素价格、元素备注和元素图片。例如,元素名称为吧台凳,元素价格为30元/条,元素备注为现货供应,元素图像为一张吧台凳的图片。
需要说明的是,对元素进行描述可以通过选定全景图像中的该元素来进行,此时调用获取坐标函数得到该元素的坐标,所述调用获取坐标函数得到该元素的坐标具体可以包括:在当前flash播放器中选定参照点;调用获取坐标函数根据该元素与所述参照点之间的角度计算该元素的坐标。元素的坐标可以为正,也可以为负,具体地,坐标可以以全景图的一个中心点作为参考点0,如果选择的元素在参考点的右边,就计算离中心点的位置算出一个负值,如果选择的元素在参考点的左边,就算出一个正值。例如上述元素吧台凳的坐标通过获取坐标函数得到该元素的坐标为(-15.56,-22.85,pa0),其中-15.56与-22.85是该元素与参照点之间空间位置的相对值,坐标值为负值表明该元素在参照点的右边;pa0是一个场景图ID,单场景默认为pa0,多场景的话可以根据场景加上相应的编号,可以为paN。
上述某个元素的描述中的元素图片可以通过以下步骤获得:
调用获取坐标函数得到该元素的坐标;
调用定位坐标函数在所述全景图像中锁定该元素并截图,截图结果作为元素图片,所述定位坐标函数为设置在flash播放器的一个JavaScript调用函数。
买家或者卖家如果想看所购买的商品,也可以通过调用定位坐标函数得到该商品的图片。
需要进一步说明的是,上述通过获取坐标函数得到元素的元素,可以表示元素的位置,在全景图像为实体店铺的图像,元素为商品的时候,有以下两个作用:
第一,沟通作用,元素的坐标表示商品的位置,在交易模式下会显示元素的坐标,卖家可以将该坐标复制下来发送给卖家,卖家通过该坐标可以查到所要购买的是什么商品可以避免买家和卖家沟通的时候说不清楚。上述吧台凳的例子中,如果全景图中出现多个不同样式的吧台凳,名称都为吧台凳,买家可以将所要购买的吧台凳的坐标发送给卖家,使得沟通准确快捷;
第二,保障作用,上述元素的坐标作为商品的位置被保存在订单中,卖卖双方可以通过该坐标查询并调用定位坐标函数(定位坐标函数为设置在flash播放器的一个JavaScript调用函数)从全景图像中定位到该商品在全景图像中的准确位置,避免购物过程中发生纠纷。
本实施例中在该元素的坐标处添加坐标热点,并将所述坐标热点链接至所述元素数据库之后,点击元素的坐标热点就可以直接到达该坐标热点指向的元素数据库,并可以直接读取元素数据库中所保存的元素位置和元素描述(即元素信息)了。
在本发明的一种优选实施例中,可以调用信息添加模板完成信息添加,具体如下:
接收用户对某个元素的点击,调用信息添加模板,调用获取坐标函数得到该元素的坐标,将所述该元素的坐标作为元素位置保存至信息添加模板中,接收用户对该元素的描述信息(元素名称、元素价格、元素备注和元素图片)并将所述描述信息作为元素信息添加至信息添加模板中。
步骤104,在信息浏览模式下,显示各元素的坐标热点,接收用户对某个元素的坐标热点的选定,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,并在当前flash播放器中展现所述元素信息;
在信息浏览模式下,全景图像中的元素如果被添加过坐标热点,就会在该元素上显示坐标热点,用户将鼠标放在坐标热点上(不需点击),就可以完成对该元素的坐标热点的选定,此时会依据该元素的坐标热点链接到的元素数据库中查找该元素的元素信息,并在该元素的旁边显示所查找到的元素信息。上述在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,具体可以包括以下子步骤:
子步骤1,调用元素数据库,查找该元素的坐标热点对应的元素的坐标;
步骤102中描述了坐标热点是在该元素的坐标处添加的,因此坐标热点与元素的坐标是一一对应的,可以从坐标热点所链接的元素数据库中查找到该元素的坐标。
子步骤2,在所述元素数据库中查找与所述元素的坐标对应的元素的描述。
子步骤1查找到元素的坐标之后,可以进一步的在元素数据库中查找与该元素的坐标对应的元素的描述,因为步骤102中将元素的坐标和该元素的描述作为元素信息保存至元素数据库,元素的描述与元素的坐标也是一一对应的,可以通过元素的坐标查找到对应该元素的描述。
步骤106,在交易模式下,显示各元素的坐标热点,接收用户对某个元素的坐标热点的点击并调用交易模板,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息并显示在所述交易模板中;接收用户对交易模板中购买信息的设置后,依据所述交易模板生成订单。
在交易模式下,全景图像中的元素如果被添加过坐标热点,同样会在该元素上显示坐标热点,用户将鼠标点击坐标热点,自动调用交易模板,交易模板中会显示从该元素的坐标热点链接的元素数据库中查找到的元素信息,用户只需要填写购买信息,例如购买数量,交易模板会根据购买数量和元素信息中的元素价格自动计算出总价并显示在交易模板中,然后生成订单。
需要说明的是,上述步骤102、步骤104和步骤106仅为了区分三种不同模式(信息添加模式、信息浏览模式和交易模式)下的不同步骤,相互之间并没有先后顺序。
全景图像中包含大量的元素,在实际应用中也不会对所有的元素都添加坐标热点,会对重要的,可以表征商品的一部分元素添加坐标热点,因此会存在全景图像中某些元素并没有添加坐标热点,此时元素上不显示坐标热点,但是用户仍然可以点击此元素,只不过点击元素没有相应的元素信息显示出来,针对这种情况,本发明提出了一种优选实施例,在交易模式下还包括:
接收用户对某个元素的点击并调用交易模板;
接收用户对交易模板中元素信息和交易信息的设置,并依据所述交易模板生成订单。
需要说明的是,交易模式下,接收买家对某个元素的点击仍然可以调用交易模板,不过此时交易模板中并没有元素信息,需要买家与卖家进行沟通,卖家设置元素信息,或者买家根据沟通结果设置元素信息,本实施例对此不作限制。然后买家设置交易信息,如交易数目,最后根据设置完成的交易模板生成订单。
全景图像通常为巨幅图像,如果全部加载不仅速度慢,而且会占用较大的系统资源,为了解决这一问题,本发明提供了全景图像处理方法的一种优选实施例,还包括:
按照预设比例将所述全景图像切分为多个切片图层,各切片图层包含相同个数的元素。
例如,一副1024*1024的全景图像,可以切分为原来的一半(为512*512)的切片图层、原来的四分之一(为256*256)的切片图层等,这样可以根据不同的需要加载不同的切片图层。这些切分得到的切片图层与原来的全景图像相比,只是图片大小和清晰度发生了改变,所包含的元素并没有改变,与原全景图像是一致的。
本优选实施例中,在上述步骤100调用flash播放器展现全景图像之后,还包括:
接收用户虚拟位置指令,并根据所述用户虚拟位置指令加载对应的切片图层,所述用户虚拟位置指令越大,加载的切片图层越大。
需要说明的是,用户虚拟位置指令可以是放大、缩小、前进、后退等,所述用户虚拟位置指令越大,加载的切片图层越大,例如用户虚拟指令为放大,则调用更大、清晰度更高的切片图层;如果用户虚拟指令为缩小,则只需调用更小的,清晰度低的切片图层。这样根据所述用户虚拟位置指令加载对应的切片图层,可以节省系统资源,提高加载速度。
本实施例可以对全景图像中的元素添加描述,使得用户在浏览的时候准确快捷地了解该元素的信息,达到了较好的浏览效果。而且,本实施例中通过在全景图像中添加元素的坐标热点,并将坐标热点链接到保存有元素信息的元素数据库中,在交易模式下,通过对全景图像进行处理,买家可以通过点击全景图像中的坐标热点,直接到达该坐标热点指向的元素数据库获得元素信息,从而快速完成交易,本发明不仅实现了全景购物,而且使得商铺、商品等相关空间的展示不再有时间、地点的限制,可以实现24小时不间断的在线展示。
本发明上述实施例可以应用于电子商务中,具体的全景购实施例如下:首先,在商铺首页进行商铺的3D全景展示,如图2所示,买家或卖家可以缩放
和左右拖动
全景图像实现360度浏览商铺全景,来挑选商品。
买家如果想了解具体的商品信息对应浏览模式,可以点击购物车按钮进入浏览模式,此时全景图像中会显示坐标热点如图3所示;买家将鼠标移至坐标热点上选定坐标热点(无需点击),即可显示该坐标热点对应的商品信息(即元素信息),如图4所示;
买家如果开始购买商品,也可以点击购物车按钮进入交易模式,此时全景图像中依然会显示坐标热点
如图3所示,买家点击坐标热点,会调用交易模板,如图5所示交易模板中显示坐标热点所连接的元素数据库中保存的元素信息,例如商品位置(元素坐标)、名称(元素名称)和备注(元素备注)等信息,用户只需填写购买的数量,交易模板会自动生成总额,用户单击加入购物车按钮,会依据交易模板自动生成订单,从而完成下单。界面上会显示“成功添加到购物车”,如图6所示,买家可以点击“去购物车结算”完成付款,也可以点击“继续购物”继续购买商品。上述交易模式下,用户“点击图片就能采购”,方便快捷。
卖家如果需要对某件商品添加描述,可以通过点击“!”图标进入信息添加模式,如图7所示;接收用户对某个元素的点击,调用信息添加模板,如图8所示,卖家可以设置商品的名称、价格、备注等信息。
买家和卖家都可以依据元素坐标对商品进行定位,如图9所示,在定位商品输入框中填入元素坐标,点击确定,就可以在定位商品输入框上面的全景图像中定位到该元素坐标对应的商品。
买家还可以直接通过搜索引擎,输入“商铺名称”、“商铺号”就能找到商家,如图10所示。将鼠标放置在全景动态图片上,图片会随着买家采购体验习惯进行全景漫游,根据店铺商品的规划渲染出效果图。
上述全景购的推出,买家鼠标点到哪儿逛到哪儿,商家信息、商品详情在360度的创新体验中皆能轻松把握。全景购提供地图定位、多种分类及快速检索方式,让买家看得轻松,买得方便。而且全景购使得供应和采购变得更加方便和快捷,买家点击鼠标就像来到现场一样,为商铺的宣传节省了大量成本,提高了买家的采购效率。买家利用网络,远程虚拟浏览商铺,再也不用忙碌地穿梭于各个市场,就能看到采购所需商品商铺的真实场景,更方便客户确认和挑选商品,做更精准有效的采购流程,进而提高效率,用户体验更胜一筹。
基于上述实施例对全景图像处理方法的描述,本发明还提供了一种全景图像处理系统,如图11所示,具体可以包括:图像展示模块10、信息添加模块12、信息浏览模块14和交易模块16,其中,
图像展示模块10,用于调用flash播放器展现全景图像;所述flash播放器设置两个JavaScript调用函数,一个是获取坐标函数,一个是定位坐标函数;所述全景图像由多个元素构成;
信息添加模块12,用于接收某个元素的描述,调用获取坐标函数得到该元素的坐标,并将该元素的坐标和该元素的说明作为元素信息保存至元素数据库;在该元素的坐标处添加坐标热点,并将所述坐标热点链接至所述元素数据库,所述坐标热点与元素的坐标一一对应;
上述某个元素的描述包括:
该元素的元素名称、元素价格、元素备注和元素图片。
在本发明的一种优选实施例中,所述全景图像处理系统还包括:元素图片获取模块,用于获取元素图片,具体可以通过以下方式实现:
调用获取坐标函数得到该元素的坐标;
调用定位坐标函数在所述全景图像中锁定该元素并截图,截图结果作为元素图片,所述定位坐标函数为设置在flash播放器的一个JavaScript调用函数。
上述信息添加模块12调用获取坐标函数得到该元素的坐标,可以通过以下方式实现:
在当前flash播放器中选定参照点;
调用获取坐标函数根据该元素与所述参照点之间的角度计算该元素的坐标。
信息浏览模块14,用于显示各元素的坐标热点,接收用户对某个元素的坐标热点的选定,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,并在当前flash播放器中展现所述元素信息;
上述信息浏览模块14在该元素的坐标热点链接的元素数据库中查找该元素的元素信息,可以通过以下方式实现:
调用元素数据库,查找该元素的坐标热点对应的元素的坐标;
在所述元素数据库中查找与所述元素的坐标对应的元素的描述。
交易模块16,用于显示各元素的坐标热点,接收用户对某个元素的坐标热点的点击并调用交易模板,在该元素的坐标热点链接的元素数据库中查找该元素的元素信息并显示在所述交易模板中;接收用户对交易模板中交易信息的设置后,依据所述交易模板生成订单。
在本发明的一种优选实施例中,所述交易模块16还用于:
接收用户对某个元素的点击并调用交易模板;
接收用户对交易模板中元素信息和交易信息的设置,并依据所述交易模板生成订单。
在本发明的一种优选实施例中,全景图像处理系统还包括:
切分模块,用于按照预设比例将所述全景图像切分为多个切片图层,各切片图层包含相同个数的元素。
在本发明的一种优选实施例中,所述全景图像处理系统还包括:
加载模块,用于接收用户虚拟位置指令,并根据所述用户虚拟位置指令加载对应的切片图层,所述用户虚拟位置指令越大,加载的切片图层越大。
对于系统实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见图1方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。
以上对本发明所提供的一种全景图像处理方法及处理系统,进行了详细介绍,本文中应用了具体个例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。