CN102289486A - 一种基于浏览器的图片显示方法和系统 - Google Patents

Abstract

本发明提供一种基于浏览器的图片显示方法和系统，方法包括：从浏览器窗口中选择需要进行立体显示的网页图片；获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息；将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。本发明实现了在不改动浏览器内核的前提下，让浏览器支持对网页图片的立体显示。

Description

一种基于浏览器的图片显示方法和系统

技术领域

本发明涉及互联网内容的立体显示领域，特别涉及一种基于浏览器的图片显示方法和系统。

背景技术

人类是通过右眼和左眼所看到的物体的细微差异来感知物体的深度，从而识别出立体图像的，这种差异被称为视差。立体显示技术就是通过人为的手段来制造人的左右眼的视差，给左、右眼分别送去有视差的两幅图像，使大脑在获取了左右眼看到的不同图像之后，产生观察真实三维物体的感觉。立体显示装置一般有两种类型：狭缝光栅式立体显示装置和微透镜阵列立体显示装置。其中微透镜阵列立体显示装置包括显示面板和安装在显示面板前方的微透镜阵列，从而将来自于显示面板的3D图像分成右眼和左眼图像。

现有技术还记载了在立体显示的基础上，实现2D-3D切换的技术方案。例如，在中国发明专利申请CN101126840A中公开了一种2D-3D可切换立体显示装置，包括显示面板和透镜组件；所述透镜组件，包括两个组合透镜和一个半波板，每个组合透镜由一个单折射透镜和一个可加电形成电场的双折射透镜构成，不加电时，自然光从一个组合透镜射入，产生无折射的寻常光和折射的非寻常光，然后通过半波板旋转90度后射入另外一个组合透镜，该另外一个组合透镜将旋转后产生的寻常光无折射透射，非寻常光折射；加电时，自然光无折射的从一个组合透镜透射，穿过半波板后从另外一个组合透镜无折射的透射出去。还可以采用薄膜晶体管电路对部分区域进行独立的控制。利用该发明的上述方案，可以在不牺牲亮度的情况下对全屏或部分区域进行2D和3D的切换显示。

另外，随着互联网技术日益成熟，个人网络相册、网络图片库等方式逐渐成为主要的照片载体，且用户比重渐呈超越传统相片的趋势。同时，随着立体技术的发展，立体相机逐渐普及，以及它带给观者更接近真实的视觉感受，网络立体显示时代一定会成为未来的新趋势。

网络图片立体显示的问题在于，浏览器多种多样，但其图片的处理部分是独立的，是和操作系统无关的。而立体显示技术不仅和操作系统相关，而且和硬件相关，相应的程序接口是系统级函数。那么，在不改动浏览器内核的前提下，如何让浏览器支持对网页图片的立体显示，就成为亟待解决的技术问题。

发明内容

本发明的目的是提供一种基于浏览器的图片显示方法和系统，在不改动浏览器内核的前提下，让浏览器支持对网页图片的立体显示。

为实现上述目的，本发明提供技术方案如下：

一种基于浏览器的图片显示方法，包括：

从浏览器窗口中选择需要进行立体显示的网页图片；

获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息；

将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

上述的图片显示方法，还包括：

获取用户对所述网页图片和所述浏览器窗口的操作行为；

根据所述操作行为对所述第一显示区域信息和所述第二显示区域信息进行更新。

上述的图片显示方法，还包括：

当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

上述的图片显示方法，还包括：

获取与立体显示相关的状态信息；

当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

上述的图片显示方法，其中，所述状态信息包括：柱状透镜状态、脸部跟踪状态、浏览器状态和/或立体显示状态。

一种基于浏览器的图片显示系统，包括：

页面端模块，用于从浏览器窗口中选择需要进行立体显示的网页图片，并获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

浏览器桥控件，用于根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息，并将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

上述的图片显示系统，其中：

所述浏览器桥控件还用于，获取用户对所述网页图片和所述浏览器窗口的操作行为，并根据所述操作行为对所述第二显示区域信息进行更新；

所述页面端模块还用于，根据所述操作行为对所述第一显示区域信息进行更新。

上述的图片显示系统，其中：

所述浏览器桥控件还用于，当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

上述的图片显示系统，其中：

所述浏览器桥控件还用于，获取与立体显示相关的状态信息，当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

上述的图片显示系统，其中，所述状态信息包括：柱状透镜状态、脸部跟踪状态、浏览器状态和/或立体显示状态。

与现有技术相比，本发明的有益效果是：

本发明通过从浏览器中获取网页图片的显示区域信息，并将该显示区域信息转换为相对于显示屏幕的显示区域信息后发送给立体显示硬件，由立体显示硬件完成对所述网页图片的立体显示，从而实现了在不改动浏览器内核的前提下，让浏览器支持对网页图片的立体显示，大大增强了用户体验。

附图说明

图1为本发明实施例的基于浏览器的图片显示方法流程图；

图2为本发明实施例的基于浏览器的图片显示系统结构图；

图3为本发明实施例的基于浏览器的图片显示系统的各模块协作示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图及具体实施例对本发明进行详细描述。

参照图1，本发明实施例的基于浏览器的图片显示方法，包括如下步骤：

步骤101：从浏览器窗口中选择需要进行立体显示的网页图片；

用户通过浏览器打开一个网页后，网页的页面中呈现各种图片，包括装饰图、广告、主题内容图等。有些网页图片不适合立体显示，例如区域面积过小、立体效果不明显、立体区域移出浏览器客户区域等网页图片。可以通过对网页图片进行自动检测，来获取图片坐标、尺寸和其面积大小，并根据这些信息来剔除掉不适合进行立体显示的图片。

也可以根据用户的选择来确定需要进行立体显示的图片。例如，获取用户的鼠标事件，选择鼠标停留的图片或者鼠标单击的图片作为需要进行立体显示的图片。

当然，在不考虑显示效果的前提下，还可以选择对浏览器窗口中的所有网页图片进行立体显示。

步骤102：获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

选择出需要进行立体显示的网页图片后，便可获取其相对于所述浏览器窗口的第一显示区域信息，即该网页图片在浏览器窗口中的位置，包括其在浏览器窗口中的坐标、尺寸等信息，这里的坐标是相对于浏览器窗口而言。

步骤103：根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息；

首先获取浏览器窗口在显示屏幕中的位置，然后，根据浏览器窗口在显示屏幕中的位置，将网页图片相对于浏览器窗口的坐标转换为相对于显示屏幕的坐标，根据网页图片相对于显示屏幕的坐标以及网页图片的尺寸，便可得到网页图片在显示屏幕中的位置，即为所述第二显示区域。

步骤104：将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

现有技术已经实现了在显示屏幕的任何区域进行立体显示的技术，且还能够对立体显示的区域进行调整。因此，通过将所述第二显示区域信息发送给立体显示芯片，便可以由所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

本发明实施例的上述方法通过从浏览器中获取网页图片的显示区域信息，并将该显示区域信息转换为相对于显示屏幕的显示区域信息后发送给立体显示硬件，由立体显示硬件完成对所述网页图片的立体显示，从而实现了在不改动浏览器内核的前提下，让浏览器支持对网页图片的立体显示，大大增强了用户体验。

用户在浏览网页的过程中，还经常对网页图片或浏览器窗口进行一些操作，这些操作会造成网页图片大小以及其在显示屏幕中的位置发生变化，需要根据这些变化对显示屏幕的立体显示区域进行更新。因此，本发明实施例的基于浏览器的图片显示方法还可包括：

获取用户对所述网页图片和所述浏览器窗口的操作行为；

根据所述操作行为对所述第一显示区域信息和所述第二显示区域信息进行更新。

其中，用户对网页图片的操作行为包括：对网页图片进行放大、对网页图片进行缩小、拖曳网页图片等。当这些操作行为发生时，可以重新获取该网页图片在浏览器窗口中的位置，包括其在浏览器窗口中的坐标、尺寸等信息，得到更新后的第一显示区域信息，然后，根据更新后的第一显示区域信息对所述第二显示区域信息进行更新，并将更新后的第二显示区域信息发送到立体显示芯片，从而使得显示屏幕的立体显示区域也得到了更新。

用户对浏览器窗口的操作行为包括：对网页进行刷新、滚动网页、关闭网页、拖拽网页、对网页进行放大或缩小等。这些操作行为可能导致：

网页图片在浏览器窗口中的位置发生变化，例如，滚动网页；

网页图片的尺寸以及其在浏览器窗口中的位置发生变化，例如，对网页进行放大或缩小；

浏览器窗口在显示屏幕中的位置发生变化，例如，拖拽网页；

浏览器窗口的尺寸以及其在显示屏幕中的位置发生变化，例如，对网页进行放大或缩小。

上述情形发生时，需要对第一显示区域信息和/或第二显示区域信息进行更新，并将更新后的第二显示区域信息发送到立体显示芯片，从而使得显示屏幕的立体显示区域也得到了更新。

例如，滚动网页时，需要更新所述第一显示区域信息，然后，根据更新后的第一显示区域信息对所述第二显示区域信息进行更新。

又例如，拖拽网页时，第一显示区域信息未发生变化，直接更新所述第二显示区域信息。

其他各种更新情况，这里不再一一列举。

另外，用户的上述操作行为引起的图片大小以及位置的变化，还可能导致该网页图片不再适合于立体显示，因此，本发明实施例的基于浏览器的图片显示方法还可包括：

当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

例如，上述操作行为导致网页图片的区域面积过小、立体效果不明显或者立体区域移出浏览器客户区域时，通过立体显示芯片关闭当前立体显示效果，并切换成二维普通显示效果。

优选地，本发明实施例的基于浏览器的图片显示方法还可包括：

获取与立体显示相关的状态信息；

当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

其中，所述状态信息包括：

柱状透镜状态：打开还是关闭；

脸部跟踪状态：跟上还是没跟上；

立体显示状态：打开还是关闭；

浏览器状态：浏览器窗口是否为当前激活窗口、浏览器窗口标签页是否被激活、浏览器中的图片区域是否被遮挡。

具体地，当以下状态出现时，通过立体显示芯片关闭当前立体显示效果，并切换成二维普通显示效果：柱状透镜被关闭，脸部没有跟踪上，立体显示被关闭，浏览器窗口不是当前激活窗口，浏览器中的图片区域被遮挡，浏览器窗口标签页未被激活。

与上述基于浏览器的图片显示方法相对应，本发明实施例还提供一种基于浏览器的图片显示系统，参照图2，该图片显示系统包括：

页面端模块10，用于从浏览器窗口中选择需要进行立体显示的网页图片，并获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

浏览器桥控件20，用于根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息，并将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

用户在浏览网页的过程中，还经常对网页图片或浏览器窗口进行一些操作，这些操作会造成网页图片大小以及其在显示屏幕中的位置发生变化，需要根据这些变化对显示屏幕的立体显示区域进行更新。

因此，所述浏览器桥控件20还可用于，获取用户对所述网页图片和所述浏览器窗口的操作行为，并根据所述操作行为对所述第二显示区域信息进行更新；

所述页面端模块10还可用于，根据所述操作行为对所述第一显示区域信息进行更新。

另外，用户的上述操作行为引起的图片大小以及位置的变化，还可能导致该网页图片不再适合于立体显示，因此，所述浏览器桥控件20还可用于，当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

优选地，所述浏览器桥控件20还可用于，获取与立体显示相关的状态信息，当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

其中，所述状态信息包括：柱状透镜状态、脸部跟踪状态、浏览器状态和/或立体显示状态。

上述的两个模块都工作在浏览器中，浏览器桥控件20是页面端模块10和系统间通信的桥梁，以浏览器插件或组件方式嵌入浏览器中，使得浏览器可以和系统级的程序接口通信，这两个模块配合立体显示的硬件接口，在不改动浏览器内核的前提下，能够完成对网页图片的立体显示。

以下给出上述两个模块的具体实现。

页面端模块10，以脚本形式写在页面中，由浏览器装载并执行。

页面端模块10用来管理当前网页中一个或者更多的网页图片。由于网页的页面里包含装饰图、广告、主题内容图等各种图片信息，所以可能会有多个网页图片被检测到。页面端模块10需要整理并实时维护这些网页图片的坐标、尺寸和其面积大小，并标出当前被使用的网页图片，筛选出不适合呈现立体效果的网页图片，例如区域面积过小、立体效果不明显、立体区域移出浏览器客户区域等网页图片。

页面端模块10还负责捕捉和管理用户在浏览页面时的动作，比如检测浏览器、检测版本兼容性、参数完整性、网页刷新、滚动、关闭、拖拽或者改变网页大小等事件。一旦有动作使网页图片的区域发生了移动或者改变大小等变化，就记录下来。页面端模块10根据记录的信息选择出待显立体效果的网页图片，把它在浏览器窗口中的坐标、尺寸等信息做为相对坐标(相对于浏览器)传给浏览器桥控件20。

页面端模块10还能够检测当前系统是否支持立体显示，不支持则进行普通的二维显示。

页面端模块10还可以和网页图片交互，并包装部分操作图片的函数，供其他脚本使用，具体包括：

操作图片的行为，例如隐藏、显示、放大、缩小等；

操作并控制图片的加载行为；

选择出待显立体效果的图片；

将待显立体区域参数传送给浏览器桥控件20。

页面端模块10还可以和浏览器桥控件20交互，得到或控制立体显示的各种状态，具体包括：

得到当前柱状棱镜状态，打开还是关闭；

得到当前脸部跟踪状态，跟上还是没跟上；

得到或设定立体显示参数，左右/右左/上下/下上模式；

显示屏幕上特定区域的立体效果；

关闭屏幕上特定区域的立体效果；

页面装载并初始化立体显示函数；

页面关闭并卸载浏立体显示函数。

浏览器桥控件20，由浏览器加载并运行，是沟通页面端模块10和硬件的桥梁。不仅可以监控浏览器，获得网页中图片的立体参数，而且可以开启或者关闭脸部跟踪设备，取得脸部跟踪状态，或将屏幕上的指定区域立体显示。

其中，监控浏览器部分由以下函数组成：

监控浏览器，截获其移动/改变尺寸/最小化等事件，将从页面端模块10传送来的相对坐标(相对浏览器)，转换成绝对坐标(相对显示屏幕)；

监控浏览器的激活状态，非激活状态时，须及时关闭立体效果；

监控浏览器标签页的激活状态，非激活状态时，须及时关闭立体效果。

取状态及脸部跟踪部分由以下函数组成：

取得脸部跟踪状态；

取得当前立体显示状态；

取当前柱状透镜状态。

图3为本发明实施例的基于浏览器的图片显示系统的各模块协作示意图。参照图3，主要涉及以下流程：

-用户打开网页，如果没有检测到立体显示的硬件，按照传统的二维方式显示网页图片，否则，加载桥控件模块，此时跟踪脸部的硬件被初始化，人脸跟踪部分开始启动。

-页面端模块指定某一网页图片开始进行立体显示，则将其尺寸及坐标，转换成相对坐标(相对浏览器)并记录下来，做为待显立体区域，发送给浏览器桥控件。

-浏览器桥控件得到待显立体区域尺寸，将其转换成绝对坐标(相对显示屏幕)。同时，还要监控浏览器在系统中的状态，监控脸部跟踪的状态，监控当前立体显示的状态，监控当前柱状透镜状态，以决定是否合适显示立体效果。

-此时，页面端模块要随时查看由浏览器桥控件提供的状态信息，一旦发现不能继续显示立体效果，则立即将图片立体效果调成二维效果。

-一般情况下，浏览器桥控件总是会将待显立体区域的绝对坐标传送给立体显示硬件接口，硬件开始处理，然后，用户可看到该区域内的立体效果。

-当以下状态出现时，浏览器桥控件不会将待显立体区域的坐标传送给立体显示硬件接口：发现脸部没有跟踪上，或者显示立体状态被关闭，或者柱状透镜被关闭，或者发现浏览器窗口不是当前激活窗口，或者浏览器中的图片区域被遮挡，或者当前浏览器窗口标签页未被激活。

-当浏览器发生大小，移动等变化时，页面端模块会立即重新计算图片区域尺寸，并继续以上流程，以保证页面的实时变化被及时反映。

-当用户关闭浏览器时，浏览器桥控件被卸载，脸部跟踪部分关闭。

本发明实施例的基于浏览器的图片显示方法及系统可以应用在3d博客，3d相册，3d旅游网站，3D GPS等。

应用于3d博客以及3d相册时，该基于浏览器的图片显示方法和系统可以将博客或相册中的相片进行立体显示，使得相片的展示方式更加丰富，并更具美感。

应用于3d旅游网站时，该基于浏览器的图片显示方法和系统可以将景点的图片进行立体显示，使得观看者能更加充分的感受到景点的真实感。

应用于3D GPS时，该基于浏览器的图片显示方法和系统可以将路况立体显示出来，特别是遇到多层立交桥或者复杂路况、地形的时候，能够让使用者很直观的了解正确的路线。

另外，本发明实施例的基于浏览器的图片显示方法及系统还可以对普通的2D图片进行3D展示，只是展示效果略逊于3D图片。为了使2D图片具有更好的立体展示效果，本发明实施例还可以利用公知技术先将2D图片转换为3D图片，然后再按照本发明实施例的上述方法进行立体显示。具体地，可以在系统中设置一个转换模块，通过所述转换模块来将2D图片转换为3D图片。

本领域普通技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，包括如上述方法实施例的步骤，所述的存储介质，如：磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。在本发明各方法实施例中，所述各步骤的序号并不能用于限定各步骤的先后顺序，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，对各步骤的先后变化也在本发明的保护范围之内。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种基于浏览器的图片显示方法，其特征在于，包括：

从浏览器窗口中选择需要进行立体显示的网页图片；

获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息；

将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

2.如权利要求1所述的图片显示方法，其特征在于，还包括：

获取用户对所述网页图片和所述浏览器窗口的操作行为；

根据所述操作行为对所述第一显示区域信息和所述第二显示区域信息进行更新。

3.如权利要求2所述的图片显示方法，其特征在于，还包括：

当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

4.如权利要求1所述的图片显示方法，其特征在于，还包括：

获取与立体显示相关的状态信息；

当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

5.如权利要求4所述的图片显示方法，其特征在于，所述状态信息包括：

柱状透镜状态、脸部跟踪状态、浏览器状态和/或立体显示状态。

6.一种基于浏览器的图片显示系统，其特征在于，包括：

页面端模块，用于从浏览器窗口中选择需要进行立体显示的网页图片，并获取所述网页图片相对于所述浏览器窗口的第一显示区域信息；

浏览器桥控件，用于根据所述第一显示区域信息获取所述网页图片相对于显示屏幕的第二显示区域信息，并将携带所述第二显示区域信息的立体显示指令发送至立体显示芯片，以使所述立体显示芯片控制所述显示屏幕在所述第二显示区域对所述网页图片进行立体显示。

7.如权利要求6所述的图片显示系统，其特征在于：

所述浏览器桥控件还用于，获取用户对所述网页图片和所述浏览器窗口的操作行为，并根据所述操作行为对所述第二显示区域信息进行更新；

所述页面端模块还用于，根据所述操作行为对所述第一显示区域信息进行更新。

8.如权利要求7所述的图片显示系统，其特征在于：

所述浏览器桥控件还用于，当所述操作行为导致所述网页图片不适合立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

9.如权利要求6所述的图片显示系统，其特征在于：

所述浏览器桥控件还用于，获取与立体显示相关的状态信息，当根据所述状态信息确定不支持对所述网页图片进行立体显示时，发送二维显示指令到所述立体显示芯片，以使所述立体显示芯片控制所述显示屏幕对所述网页图片进行二维显示。

10.如权利要求9所述的图片显示系统，其特征在于，所述状态信息包括：

柱状透镜状态、脸部跟踪状态、浏览器状态和/或立体显示状态。

Images