技术领域technical field
本发明属于互联网技术领域，具体地说，涉及一种网页中图片的全屏浏览方法及其装置。The invention belongs to the technical field of the Internet, and in particular relates to a full-screen browsing method and device for pictures in a web page.
背景技术Background technique
浏览器是最经常使用到的客户端程序，借助浏览器可以显示从网页服务器或者文件系统获取的超文本标记语言（Hypertext Markup Language，以下简称：HTML）文件内容，并便于用户与获取的HTML文件进行交互。其中，从网页服务器获取HTML文件的浏览器即网页浏览器，个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Apple的Safari，Opera、Google Chrome、GreenBrowser浏览器、360安全浏览器、搜狗高速浏览器、天天浏览器、腾讯TT、傲游浏览器、百度浏览器、腾讯QQ浏览器等。The browser is the most frequently used client program. With the help of the browser, the content of the Hypertext Markup Language (Hypertext Markup Language, hereinafter referred to as: HTML) file obtained from the web server or the file system can be displayed, and it is convenient for the user to interact with the obtained HTML file. to interact. Among them, the browser that obtains the HTML file from the web server is the web browser. The common web browsers on personal computers include Microsoft’s Internet Explorer, Mozilla’s Firefox, Apple’s Safari, Opera, Google Chrome, GreenBrowser browser, 360 Safe Browsing browser, Sogou high-speed browser, Tiantian browser, Tencent TT, Maxthon browser, Baidu browser, Tencent QQ browser, etc.
网页浏览器的工作原理可概括为：通过HTTP协议与网页服务器交互并获取HTML文件并以网页的形式呈现给用户，这些网页文件格式通常为HTML，并由多用途网际网路邮件延伸标准（Multipurpose Internet MailExtensions，MIME）在HTTP协议中指明，并通过统一资源定位符（Uniform/Universal Resource Locator，以下简称URL）进行指定。许多浏览器还支持其他的URL类型及其相应的协议，如FTP、Gopher、HTTPS（HTTP协议的加密版本）。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等网页元素。目前，大部分的浏览器本身还支持除HTML之外的广泛的格式，例如JPEG、PNG、GIF等图片格式，并且能够扩展支持众多的插件（plug-ins），网页中每个文档都是分别从网页服务器获取。The working principle of the web browser can be summarized as follows: it interacts with the web server through the HTTP protocol and obtains HTML files and presents them to users in the form of web pages. Internet MailExtensions, MIME) is specified in the HTTP protocol, and is specified through a uniform resource locator (Uniform/Universal Resource Locator, hereinafter referred to as URL). Many browsers also support other URL types and their corresponding protocols, such as FTP, Gopher, HTTPS (an encrypted version of the HTTP protocol). The HTTP content type and URL protocol specifications allow web page designers to embed web page elements such as images, animations, videos, sounds, and streaming media in web pages. At present, most browsers also support a wide range of formats other than HTML, such as JPEG, PNG, GIF and other image formats, and can expand and support numerous plug-ins (plug-ins). Obtained from a web server.
以在网页中显示图片为例，网页中都会设置针对该图片的图片工具条，通过操作该工具条，实现图片的全屏显示、图片的切换、图片的缩放等。Taking displaying a picture in a web page as an example, a picture tool bar for the picture will be set in the web page, and full-screen display of the picture, switching of pictures, zooming of the picture, etc. can be realized by operating the tool bar.
现有的图片工具条的加载是在当前网页页面进程中完成，使用当前网页中的java script脚本生成DIV层的弹窗，在弹窗中加载有工具条，以呈现工具条，例如，如图1所示，是在网页中针对某一图片（图中黑色矩形为图片位置）的工具条，图中的双箭头标记为实现图片全屏显示的工具条，当鼠标悬停在图片上时，图片进行全屏显示。The loading of the existing picture tool bar is completed in the current web page process, using the javascript script in the current web page to generate a pop-up window of the DIV layer, and a tool bar is loaded in the pop-up window to present the tool bar, for example, as shown in the figure As shown in 1, it is the tool bar for a certain picture in the web page (the black rectangle in the figure is the position of the picture). Go full screen.
上述方案中是使用JS脚本实现的，对于弹窗的内容完全是有网页提供商根据自己的需要进行设计的。而且由于是JS脚本的实现，其展现的效果限制于网页设计人员，其中会经常出现由于JS脚本设计的程序问题而导致浏览器崩溃的问题，然而由于又无法在浏览器侧解决技术问题，导致浏览器侧的故障问题。The above solution is implemented using JS scripts, and the content of the pop-up window is completely designed by the web page provider according to its own needs. And because it is the realization of the JS script, the effect of its display is limited to the webpage designers, and the problem that the browser crashes due to the program problem of the JS script design often occurs, but because the technical problem cannot be solved at the browser side, it causes A glitch issue on the browser side.
所以，目前迫切需要本领域解决的一个技术问题就是：提供一种基于浏览器侧的网页图片元素处理方案，用来解决在浏览器中执行图片全屏浏览时造成的浏览器故障问题。Therefore, a technical problem that urgently needs to be solved in this field is to provide a browser-based webpage image element processing solution to solve the problem of browser failure caused by full-screen image browsing in the browser.
发明内容Contents of the invention
鉴于上述问题，提出了本发明以便提供一种网页中图片的全屏浏览方法及其装置，用来解决在浏览器子进程中执行图片全屏浏览时造成的浏览器故障问题。In view of the above problems, the present invention is proposed to provide a method and device for full-screen browsing of pictures in webpages, which are used to solve the problem of browser failure caused by full-screen browsing of pictures in a browser sub-process.
根据本发明的一个方面，提供了一种网页中图片的全屏浏览方法，该方法包括：According to one aspect of the present invention, a method for full-screen browsing of pictures in a webpage is provided, the method comprising:
在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息；Open the current web page label in the web page sub-process, and obtain the position information and image information of the image element in the web page;
在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送；An input selection event to the current picture element is detected in the current webpage sub-process, and the position information and picture information of the current picture element are sent to the browser main process;
依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记；According to the current location information of the picture element, the browser main process creates and displays the picture full-screen display tool mark at the designated location;
接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。Receiving the user's trigger of the full-screen display tool mark of the picture, creating a full-screen display window in the main process, and loading the picture information of the current picture element in the full-screen display window.
优选的，在根据本发明的所述的方法中，所述在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息包括：Preferably, in the method according to the present invention, said opening the current webpage label in the webpage sub-process, and obtaining the position information and picture information of the picture elements in the webpage include:
当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及The currently described webpage subprocess traverses the position information and picture information of the picture elements in the webpage; and
将所述图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。Save the position information and picture information of the picture element into the cache of the current webpage sub-process.
优选的，在根据本发明的所述的方法中，在所述全屏显示窗口中加载所述当前图片的图片信息包括：Preferably, in the method according to the present invention, loading the picture information of the current picture in the full-screen display window includes:
从当前所述网页子进程的缓存中获取并加载当前所述图片元素的图片信息至所述全屏显示窗口。Acquiring and loading the picture information of the current picture element from the cache of the current web page sub-process to the full-screen display window.
优选的，在根据本发明的所述的方法中，所述在网页子进程中打开当前网页标签还包括：Preferably, in the method according to the present invention, the opening of the current webpage label in the webpage subprocess also includes:
当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及The currently described webpage subprocess traverses the position information and picture information of the picture elements in the webpage; and
按照遍历的先后顺序，将当前所述图片元素及其相邻图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。According to the order of traversal, the position information and picture information of the current picture element and its adjacent picture elements are saved in the cache of the current webpage sub-process.
优选的，在根据本发明的所述的方法中，所述相邻图片元素为当前网页标签相关联的网页中的图片元素。Preferably, in the method according to the present invention, the adjacent picture elements are picture elements in the webpage associated with the current webpage tag.
优选的，在根据本发明的所述的方法中，在所述全屏显示窗口中加载所述当前图片的图片信息包括：Preferably, in the method according to the present invention, loading the picture information of the current picture in the full-screen display window includes:
从当前所述网页子进程的缓存中获取并加载所述当前图片的图片信息至所述全屏显示窗口；以及acquiring and loading the picture information of the current picture from the cache of the current webpage sub-process to the full-screen display window; and
从当前所述网页子进程的缓存中获取并加载与当前所述图片元素相邻的其他图片元素的图片信息，在所述全屏显示窗口中预显与当前所述图片元素相邻的其他图片元素的图片信息。Obtain and load image information of other image elements adjacent to the current image element from the cache of the current web page sub-process, and pre-display other image elements adjacent to the current image element in the full-screen display window image information.
优选的，在根据本发明的所述的方法中，所述图片元素的输入选择事件包括如下任一种事件：鼠标悬浮事件、鼠标移入事件、鼠标移动事件、触摸按下事件、触摸移动事件、触摸长按事件、触摸滑动事件、键盘选定。Preferably, in the method according to the present invention, the input selection event of the picture element includes any of the following events: mouse hover event, mouse move event, mouse move event, touch press event, touch move event, Touch long press event, touch slide event, keyboard selected.
优选的，在根据本发明的所述的方法中，在主进程中创建全屏显示窗口包括：Preferably, in the method according to the present invention, creating a full-screen display window in the main process includes:
依据当前所述图片元素的位置信息和图片信息在主进程中创建全屏显示窗口；Create a full-screen display window in the main process according to the position information and picture information of the currently described picture element;
加载一背景图于所述全屏显示窗口中。Load a background image in the full-screen display window.
优选的，在根据本发明的所述的方法还包括：Preferably, the method according to the present invention also includes:
当在当前所述网页子进程中监测到对所述图片元素的取消选择事件时，当前所述网页子进程通知所述浏览器主进程隐藏所述图片全屏显示工具标记。When a deselection event for the picture element is detected in the current webpage sub-process, the current webpage sub-process notifies the browser main process to hide the picture full-screen display tool mark.
优选的，在根据本发明的所述的方法中，所述图片元素的取消选择事件包括如下任一种事件：Preferably, in the method according to the present invention, the deselection event of the picture element includes any of the following events:
鼠标移出事件、触摸弹起事件、键盘取消。Mouse out event, touch up event, keyboard cancel.
优选的，在根据本发明的所述的方法中，所述指定位置为所述图片元素区域内任一位置；或者为所述图片元素边缘处一位置。Preferably, in the method according to the present invention, the designated position is any position within the area of the picture element; or a position at the edge of the picture element.
优选的，在根据本发明的所述的方法中，当启动浏览器时生成所述浏览器主进程，所述浏览器主进程对应一个或多个网页子进程，所述浏览器主进程的图片全屏显示工具标记在所述一个或多个网页子进程之间交互使用。Preferably, in the method according to the present invention, when the browser is started, the main process of the browser is generated, the main process of the browser corresponds to one or more sub-processes of webpages, and the picture of the main process of the browser The full screen tool markup is used interactively between the one or more web page subprocesses.
优选的，在根据本发明的所述的方法还包括：Preferably, the method according to the present invention also includes:
在全屏显示状态下还显示所述图片元素的图片信息的原始尺寸，并加载针对所述图片元素的图片信息的图片工具。In the full-screen display state, the original size of the picture information of the picture element is also displayed, and a picture tool for the picture information of the picture element is loaded.
优选的，在根据本发明的所述的方法中，所述图片元素的图片信息包括：所述图片元素的属性信息和图片数据。Preferably, in the method according to the present invention, the picture information of the picture element includes: attribute information and picture data of the picture element.
优选的，在根据本发明的所述的方法中，所述图片元素的位置信息包括：所述图片元素在所述网页子进程的页面可见区域中的左上角位置坐标和所述图片元素的宽和高；以及Preferably, in the method according to the present invention, the position information of the picture element includes: the position coordinates of the upper left corner of the picture element in the page visible area of the sub-process of the web page and the width of the picture element and high; and
所述图片元素的属性信息包括：图片大小、图片在本地缓存的地址、图片在云端的保存地址和/或所述图片元素的URL。The attribute information of the picture element includes: the size of the picture, the address of the local cache of the picture, the storage address of the picture in the cloud and/or the URL of the picture element.
根据本发明的另一个方面，提供了一种网页中图片的全屏浏览装置，该装置包括：According to another aspect of the present invention, a full-screen browsing device for pictures in a webpage is provided, the device comprising:
生成与获取模块，用于在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息；The generation and acquisition module is used to open the current webpage label in the webpage sub-process, and obtain the position information and picture information of the picture element in the webpage;
监测与发送模块，用于在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送；The monitoring and sending module is used to monitor the input selection event of the current picture element in the current webpage sub-process, and send the position information and picture information of the current picture element to the browser main process;
创建与显示模块，用于依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记；The creating and displaying module is used to create and display the image full-screen display tool mark at the specified position according to the current location information of the image element;
创建与加载模块，用于接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。The creation and loading module is used to receive the user's trigger on the full-screen display tool mark of the picture, create a full-screen display window in the main process, and load the current picture information of the picture element in the full-screen display window.
优选的，在所述装置中，生成与获取模块包括：Preferably, in the device, the generation and acquisition module includes:
遍历子模块，用于当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及The traversal submodule is used for the current webpage subprocess to traverse the position information and picture information of the picture elements in the webpage; and
缓存子模块，用于将所述图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。The caching sub-module is configured to save the position information and picture information of the picture element into the cache of the current web page sub-process.
优选的，在所述装置中，创建与加载模块还配置成：Preferably, in the device, the creation and loading module is also configured to:
从当前所述网页子进程的缓存中获取并加载当前所述图片元素的图片信息至所述全屏显示窗口。Acquiring and loading the picture information of the current picture element from the cache of the current web page sub-process to the full-screen display window.
优选的，在所述装置中，生成与获取模块包括：Preferably, in the device, the generation and acquisition module includes:
遍历子模块，用于当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及The traversal submodule is used for the current webpage subprocess to traverse the position information and picture information of the picture elements in the webpage; and
缓存子模块，用于按照遍历的先后顺序，将当前所述图片元素及其相邻图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。The caching sub-module is configured to save the position information and picture information of the current picture element and its adjacent picture elements in the cache of the current web page sub-process according to the order of traversal.
优选的，在所述装置中，创建与加载模块还被配置成：Preferably, in the device, the creation and loading module is also configured to:
从当前所述网页子进程的缓存中获取并加载所述当前图片的图片信息至所述全屏显示窗口；以及acquiring and loading the picture information of the current picture from the cache of the current webpage sub-process to the full-screen display window; and
从当前所述网页子进程的缓存中获取并加载与当前所述图片元素相邻的其他图片元素的图片信息，在所述全屏显示窗口中预显与当前所述图片元素相邻的其他图片元素的图片信息。Obtain and load image information of other image elements adjacent to the current image element from the cache of the current web page sub-process, and pre-display other image elements adjacent to the current image element in the full-screen display window image information.
优选的，在所述装置中，创建与加载模块还被配置成：Preferably, in the device, the creation and loading module is also configured to:
依据当前所述图片元素的位置信息和图片信息在主进程中创建全屏显示窗口；Create a full-screen display window in the main process according to the position information and picture information of the currently described picture element;
加载一背景图于所述全屏显示窗口中。Load a background image in the full-screen display window.
优选的，在所述装置中，监测与发送模块与创建与显示模块还被配置成：Preferably, in the device, the monitoring and sending module and the creating and displaying module are further configured to:
当在当前所述网页子进程中监测到对所述图片元素的取消选择事件时，当前所述网页子进程通知所述浏览器主进程隐藏所述图片全屏显示工具标记。When a deselection event for the picture element is detected in the current webpage sub-process, the current webpage sub-process notifies the browser main process to hide the picture full-screen display tool mark.
优选的，在所述装置中，生成与获取模块还被配置成：Preferably, in the device, the generation and acquisition module is further configured to:
当启动浏览器时生成所述浏览器主进程，所述浏览器主进程对应一个或多个网页子进程，所述浏览器主进程的图片全屏显示工具标记在所述一个或多个网页子进程之间交互使用。Generate described browser main process when starting browser, described browser main process corresponds to one or more webpage subprocesses, and the picture full-screen display tool mark of described browser main process is in described one or more webpage subprocesses used interactively.
优选的，在所述装置中，创建与显示模块还被配置成：Preferably, in the device, the creation and display module is further configured to:
在全屏显示状态下还显示所述图片元素的图片信息的原始尺寸，并加载针对所述图片元素的图片信息的图片工具。In the full-screen display state, the original size of the picture information of the picture element is also displayed, and a picture tool for the picture information of the picture element is loaded.
与现有的方案相比，本发明所获得的技术效果：提出了一种网页中图片的全屏浏览的方案，在浏览器主进程中建立对一个或多个网页标签中的图片元素全屏浏览的机制，提高了在浏览器侧进行图片元素全屏浏览的效率，避免了对网页子进程图片全屏工具条的操作给浏览器带来的故障问题；并且一个浏览器主进程可以对应一个或多个网页子进程，浏览器主进程创建的图片全屏显示工具标记可以在多个网页子进程之间交互使用，减少了网页子进程的负担，同时提高了图片全屏显示工具标记的使用效率。Compared with the existing scheme, the technical effect obtained by the present invention: a scheme for full-screen browsing of pictures in a webpage is proposed, and a full-screen browsing scheme for picture elements in one or more webpage tags is established in the main process of the browser. The mechanism improves the efficiency of full-screen browsing of picture elements on the browser side, and avoids the failure problem caused by the operation of the full-screen tool bar of the picture in the sub-process of the web page; and a browser main process can correspond to one or more web pages Sub-process, the image full-screen display tool mark created by the main browser process can be used interactively among multiple web page sub-processes, reducing the burden of the web page sub-process, and at the same time improving the efficiency of using the image full-screen display tool mark.
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。The above description is only an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention, it can be implemented according to the contents of the description, and in order to make the above and other purposes, features and advantages of the present invention more obvious and understandable , the specific embodiments of the present invention are enumerated below.
附图说明Description of drawings
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiment. The drawings are only for the purpose of illustrating a preferred embodiment and are not to be considered as limiting the invention. Also throughout the drawings, the same reference numerals are used to designate the same components. In the attached picture:
图1示意性示出现有技术的图片的全屏浏览的示意图；FIG. 1 schematically shows a schematic diagram of full-screen browsing of pictures in the prior art;
图2示意性示出了根据本发明一个实施例的网页中图片的全屏浏览方法的流程图；FIG. 2 schematically shows a flowchart of a method for full-screen browsing of pictures in a webpage according to an embodiment of the present invention;
图3示意性示出了根据本发明一个实施例的网页中图片的全屏浏览方法的详细流程图；FIG. 3 schematically shows a detailed flowchart of a method for full-screen browsing of pictures in a webpage according to an embodiment of the present invention;
图4示意性示出了根据本发明一个实施例的网页中图片的全屏浏览的装置的模块图；FIG. 4 schematically shows a block diagram of a device for full-screen browsing of pictures in a web page according to an embodiment of the present invention;
图5示意性示出了根据本发明一个实施例的图片的全屏浏览方法的方法从系统架构的角度的流程图；FIG. 5 schematically shows a flow chart of a method for full-screen browsing of pictures according to an embodiment of the present invention from the perspective of system architecture;
图6示意性示出了根据本发明一个实施例的隐藏图片全屏显示工具标记窗口的详细流程示意图;Fig. 6 schematically shows a detailed flowchart of hiding a picture and displaying a tool mark window in full screen according to an embodiment of the present invention;
图7示意性示出了上述实施例根据本发明的一实施例中创建并显示图片全屏显示工具标记的方法针对的一网页示意图；Fig. 7 schematically shows a schematic diagram of a webpage targeted by the above-mentioned embodiment according to the method for creating and displaying a picture full-screen display tool mark in an embodiment of the present invention;
图8示意性示出了根据本发明一个实施例的创建图片全屏显示工具标记窗口的详细流程示意图。FIG. 8 schematically shows a detailed flow diagram of creating a picture full-screen display tool mark window according to an embodiment of the present invention.
具体实施方式detailed description
下面结合附图和具体的实施方式对本发明作进一步的描述。The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments.
本发明的主要思想在于，在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息；在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送；依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记；接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。The main idea of the present invention is to open the current web page label in the web page sub-process, and obtain the position information and picture information of the picture element in the web page; the input selection event to the current picture element is detected in the current web page sub-process , sending the position information and picture information of the current picture element to the browser main process; according to the current position information of the picture element, the browser main process creates and displays the picture full-screen display tool mark at the specified position; receives When the user triggers the full-screen display tool mark of the picture, a full-screen display window is created in the main process, and the picture information of the current picture element is loaded in the full-screen display window.
为使本发明的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本发明作进一步地详细说明。In order to make the purpose, technical solution and advantages of the present invention clearer, the present invention will be further described in detail below in conjunction with the accompanying drawings and specific embodiments.
根据本发明的实施例，提供了一种网页中图片的全屏浏览方法。According to an embodiment of the present invention, a full-screen browsing method for pictures in a webpage is provided.
图2示意性示出了根据本发明一个实施例的网页中图片的全屏浏览方法的流程图，该方法可以包括以下步骤。Fig. 2 schematically shows a flowchart of a method for full-screen browsing of pictures in a webpage according to an embodiment of the present invention, and the method may include the following steps.
在步骤S201处，在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息。At step S201, the current webpage label is opened in the webpage sub-process, and the position information and picture information of the picture elements in the webpage are acquired.
在本发明实施例中，当浏览器启动时，浏览器主进程自动启动，并在网页子进程中打开网页标签，特别的，一个浏览器主进程可以对应一个或者多个网页子进程。In the embodiment of the present invention, when the browser is started, the browser main process starts automatically, and opens the web page label in the web page sub-process. In particular, one browser main process may correspond to one or more web page sub-processes.
当网页标签被打开时，当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息，并且将所述图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。When the webpage label is opened, the current webpage sub-process traverses the position information and picture information of the picture element in the webpage, and saves the position information and picture information of the picture element into the cache of the current webpage sub-process.
或者，当网页标签被打开时，当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息，并且按照遍历的先后顺序，将当前所述图片元素及其相邻图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。Or, when the webpage label is opened, the current webpage subprocess traverses the position information and picture information of the picture elements in the webpage, and according to the order of traversal, the position information of the current picture element and its adjacent picture elements and image information are saved to the cache of the current webpage sub-process.
需要说明的是，所述相邻图片元素不仅可以是当前网页标签中的图片元素，也可以是与当前网页标签相关联的网页中的图片元素。It should be noted that the adjacent image elements may not only be image elements in the current web page tag, but also image elements in web pages associated with the current web page tag.
在步骤S202处，在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送。At step S202, when an input selection event for the current picture element is detected in the current webpage sub-process, the position information and picture information of the current picture element are sent to the browser main process.
需要说明的是，在将所述图片元素的位置信息向浏览器主进程发送的同时，也将所述图片元素的图片信息向浏览器主进程发送，所述浏览器主进程接收网页子进程发送的位置信息和图片信息。所述图片元素的图片信息可以包括：所述图片元素的属性信息和图片数据。It should be noted that while sending the position information of the picture element to the browser main process, the picture information of the picture element is also sent to the browser main process, and the browser main process receives the information sent by the webpage sub-process. The location information and picture information of . The picture information of the picture element may include: attribute information and picture data of the picture element.
在步骤S203处，依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记。At step S203, according to the current position information of the picture element, the browser main process creates and displays the picture full-screen display tool mark at the specified position.
依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建一图片全屏显示工具标记，其中的指定位置是依据所述图片元素的位置信息而定的，其可以是在图片元素的周边，也可以是在图片元素显示范围之中，也可以是浏览器中的网页标签显示区域中的任一有用户设置的窗口区域中，例如网页标签显示区域窗口的一个分拆子窗口。所述图片全屏显示工具标记可以是一个图标，其提示用户进行点击后既可以进行该图片的全屏显示，在上述浏览器主进程在指定位置处加载该图标。通过所述浏览器主进程所创建的显示图片全屏显示工具标记进行所述图片元素的图片信息的全屏显示。According to the current position information of the picture element, the browser main process creates a picture full-screen display tool mark at a specified position, wherein the specified position is determined according to the position information of the picture element, which can be in the picture The periphery of the element can also be within the display range of the image element, or any window area with user settings in the web page label display area in the browser, such as a split sub-window of the web page label display area window . The picture full-screen display tool mark can be an icon, which prompts the user to click to display the picture in full screen, and the main process of the browser loads the icon at a designated position. Full-screen display of the picture information of the picture element is performed through the display picture full-screen display tool mark created by the browser main process.
在步骤S204处，接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。At step S204, receiving the user's trigger to display the tool mark in full screen of the picture, creating a full screen display window in the main process, and loading the picture information of the current picture element in the full screen display window.
需要说明的是，当加载图片信息时，可以从当前所述网页子进程的缓存中获取并加载当前所述图片元素的图片信息至所述全屏显示窗口。It should be noted that when loading picture information, the picture information of the current picture element may be acquired from the cache of the current webpage sub-process and loaded to the full-screen display window.
或者，从当前所述网页子进程的缓存中获取并加载与当前所述图片元素相邻的其他图片元素的图片信息，在所述全屏显示窗口中预显与当前所述图片元素相邻的其他图片元素的图片信息。例如：当前网页是第一张显示图片的网页，其第二页中的图片也是可以在全屏实现当前网页时，在缓存中获取第二页中的图片信息，并预显在全屏窗口中的，尤其对于当前网页图片是一个系列时，通过这种技术处理，会在对当前页面中的图片进行全屏显示时或者在子进程通知主进程时就开始进行其它图片的下载，该要下载的图片是在主进程收到来自子进程的通知时，就由子进程中网页中的JS代码获取的上/下一张图片的图片信息，一起通知到主进程的，在主进程需要进一步的后续图片时，也会向网页子进程中获取进一步的图片信息或者主进程主动向该图片的URL获取网页中的下一张图片，在主进程的进行后一或者前一图片的下载，在用户点击前一或者后一图片时在主进程中进行下载图片在该全屏显示窗口中的显示。Or, acquire and load the picture information of other picture elements adjacent to the current picture element from the cache of the current webpage sub-process, and pre-display other pictures adjacent to the current picture element in the full-screen display window. The image information of the image element. For example: the current webpage is the first webpage displaying pictures, and the pictures on the second page can also be obtained from the cache when the current webpage is implemented in full screen, and pre-displayed in the full-screen window. Especially when the current web page picture is a series, through this technical processing, when the picture in the current page is displayed in full screen or when the child process notifies the main process, the download of other pictures will start. The pictures to be downloaded are When the main process receives the notification from the sub-process, the picture information of the previous/next picture obtained by the JS code in the webpage in the sub-process is notified to the main process together. When the main process needs further follow-up pictures, It will also obtain further picture information from the web page sub-process or the main process will actively obtain the next picture in the web page from the URL of the picture, and download the next or previous picture in the main process, and click on the previous or previous picture when the user clicks The display of the downloaded picture in the full-screen display window is carried out in the main process during the latter picture.
图3示意性示出了根据本发明一个实施例的网页中图片的全屏浏览方法的详细流程图，具体可以包括以下步骤。Fig. 3 schematically shows a detailed flowchart of a method for full-screen browsing of pictures in a webpage according to an embodiment of the present invention, which may specifically include the following steps.
在步骤S301处，启动浏览器，生成浏览器主进程。At step S301, the browser is started to generate a browser main process.
在步骤S302处，在网页子进程中打开网页标签。At step S302, open the web page label in the web page sub-process.
当网页标签被加载时，网页子进程执行遍历网页中的图片元素的JS脚本，并通过浏览器辅助对象技术（BHO技术）实现步骤S303。When the web page tag is loaded, the web page subprocess executes the JS script traversing the image elements in the web page, and implements step S303 through browser helper object technology (BHO technology).
在步骤S303处，网页子进程获取网页中图片元素的位置信息和图片信息。At step S303, the webpage sub-process obtains the position information and picture information of the picture elements in the webpage.
当网页标签加载时被嵌入一段JS代码，目的是遍历网页中的图片元素的位置信息和图片信息，并且将上述图片元素的位置信息和图片信息上传到网页子进程的缓存中。When the web page tag is loaded, a piece of JS code is embedded, the purpose is to traverse the position information and picture information of the picture elements in the web page, and upload the position information and picture information of the above picture elements to the cache of the sub-process of the web page.
其中，所述图片元素的位置信息可以包括但不限于：所述图片元素在所述网页子进程的页面可见区域中的左上角位置坐标和所述图片元素的宽和高等等。Wherein, the position information of the picture element may include but not limited to: the position coordinates of the upper left corner of the picture element in the page visible area of the sub-process of the webpage, the width and height of the picture element, and the like.
其中，所述图片元素的图片信息可以包括但不限于：所述图片元素的属性信息和图片数据等等。所述图片元素的属性信息可以包括但不限于：图片大小、图片在本地缓存的地址、图片在云端的保存地址和/或所述图片元素的URL等等。Wherein, the picture information of the picture element may include but not limited to: attribute information and picture data of the picture element, and so on. The attribute information of the picture element may include but not limited to: size of the picture, address of the local cache of the picture, storage address of the picture in the cloud, and/or URL of the picture element, and the like.
在步骤S304处，网页子进程缓存存储所述图片元素的位置信息和图片信息。At step S304, the web page sub-process caches and stores the position information and picture information of the picture element.
在步骤S305处，在当前网页子进程中监测对所述图片元素的输入选择事件。At step S305, an input selection event on the picture element is monitored in the current web page sub-process.
本发明中有输入选择事件的网页元素是图片元素，对图片元素进行监测，监测的同时执行步骤S306，对监测结果做出判断。In the present invention, the webpage element with input selection event is a picture element, and the picture element is monitored, and step S306 is executed while monitoring, and a judgment is made on the monitoring result.
在步骤S306处，判断是否有输入选择事件。At step S306, it is determined whether there is an input selection event.
当确定有输入选择事件时，执行步骤S307，否则返回去执行步骤S305。When it is determined that there is an input selection event, execute step S307, otherwise return to execute step S305.
所述输入选择事件包括但不限于：鼠标悬浮事件、鼠标移入事件、鼠标移动事件、触摸按下事件、触摸移动事件、触摸长按事件、触摸滑动事件、键盘选定。The input selection events include, but are not limited to: mouse hovering events, mouse moving events, mouse moving events, touch pressing events, touch moving events, touch long pressing events, touch sliding events, and keyboard selection.
在步骤S307处，将所述图片元素的位置信息和图片信息向浏览器主进程发送。At step S307, the position information and picture information of the picture element are sent to the browser main process.
在步骤S308处，依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记。At step S308, according to the current position information of the picture element, the browser main process creates and displays the picture full-screen display tool mark at the specified position.
需要说明的是，所述指定位置可以为所述图片元素区域内任一位置；或者，也可以为所述图片元素边缘处一位置。It should be noted that the specified position may be any position within the area of the picture element; or, it may also be a position at an edge of the picture element.
需要说明的是，该图片全屏显示工具标记由浏览器主进程生成，可以在不同网页子进程之间复用，在不同的网页子进程中，图片全屏显示工具标记的位置可以根据图片元素的位置信息来确定。It should be noted that the image full-screen display tool tag is generated by the browser main process and can be reused between different web page sub-processes. In different web page sub-processes, the position of the image full-screen display tool tag can be determined according to the position of the image element information to determine.
在步骤S309处，判断是否有取消选择事件。At step S309, it is determined whether there is a deselection event.
当判断有取消选择事件时，该方法继续进行到步骤S312，否则该方法继续进行到步骤S310。When it is judged that there is a deselection event, the method proceeds to step S312, otherwise the method proceeds to step S310.
所述取消选择事件包括但不限于：鼠标移出事件、触摸弹起事件、键盘取消。The deselection event includes but not limited to: mouse out event, touch up event, keyboard cancel.
在步骤S310处，判断是否执行图片元素的全屏显示。也即是说，判断浏览器用户是否需要执行图片元素的全屏显示。At step S310, it is determined whether to perform full-screen display of the picture element. That is to say, determine whether the browser user needs to perform full-screen display of the image element.
如果判断浏览器用户要执行图片元素的全屏显示，则本方法继续到步骤S311，否则继续到步骤S309。If it is judged that the browser user wants to perform full-screen display of the picture element, then the method proceeds to step S311, otherwise, proceeds to step S309.
在步骤S311处，接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。At step S311, receiving a trigger from the user to display the tool mark in full screen of the picture, creating a full screen display window in the main process, and loading the picture information of the current picture element in the full screen display window.
所述图片全屏显示工具标记可以根据需求进行设计，例如：将浏览器主进程中生成的图片全屏显示工具标记中加载网站的链接，又如，图片全屏显示工具标记设计为一个可以加载某图片网站的按钮，通过点击该按钮将网页子进程获取的图片元素的属性信息和图片信息向图片网站提交。The picture full-screen display tool mark can be designed according to requirements, for example: a link to load a website in the picture full-screen display tool mark generated in the main process of the browser, and for another example, the picture full-screen display tool mark is designed as a website that can load a certain picture Click the button to submit the attribute information and picture information of the picture element obtained by the subprocess of the web page to the picture website.
需要说明的是，在主进程中创建全屏显示窗口时，可以依据当前所述图片元素的位置信息和图片信息在主进程中创建全屏显示窗口，并加载一背景图于所述全屏显示窗口中。It should be noted that when creating a full-screen display window in the main process, a full-screen display window can be created in the main process according to the position information of the current picture element and picture information, and a background image can be loaded into the full-screen display window.
需要说明的是，在全屏显示状态下除了显示所述图片元素的图片信息的原始尺寸，并加载针对所述图片元素的图片信息的图片工具，比如针对图片元素的前一张后一张的浏览或者是放大、缩小或者转发分享、收集保存等。It should be noted that in the full-screen display state, in addition to displaying the original size of the picture information of the picture element, a picture tool for the picture information of the picture element is loaded, such as browsing the previous picture and the next picture of the picture element Or zoom in, zoom out, forward and share, collect and save, etc.
在步骤S312处，所述当前网页子进程通知所述浏览器主进程隐藏所述图片全屏显示工具标记。At step S312, the current webpage sub-process notifies the browser main process to hide the image full-screen display tool mark.
当发生取消选择事件时，浏览器主进程隐藏所述图片全屏显示工具标记，并且保留已经接收的所述图片元素的位置信息和图片信息。When a deselection event occurs, the browser main process hides the image full-screen display tool mark, and retains the received position information and image information of the image element.
然后，该方法继续到步骤S313，在步骤S313处，判断是否再次识别有输入选择事件。Then, the method continues to step S313, at step S313, it is determined whether an input selection event is recognized again.
当所述图片全屏显示工具标记窗口处于隐藏状态时，要对所述网页子进程中的图片元素进行判断，是否再次识别有输入选择事件，判断为是，则本方法继续到步骤S315，否则本方法继续到步骤S314。When the picture full-screen display tool mark window is in the hidden state, it is necessary to judge the picture element in the subprocess of the webpage, whether to identify an input selection event again, if it is judged to be yes, then the method continues to step S315, otherwise the present method The method continues to step S314.
在步骤S314处，所述浏览器主进程隐藏所述图片元素的图片全屏显示工具标记。At step S314, the browser main process hides the image full-screen display tool mark of the image element.
若所述网页子进程中的图片元素未发生输入选择事件，浏览器主进程继续隐藏所述图片全屏显示工具标记，同时本发明继续到步骤S313。If no input selection event occurs in the picture element in the webpage sub-process, the browser main process continues to hide the full-screen display tool mark of the picture, and the present invention continues to step S313 at the same time.
在步骤S315处，所述当前网页子进程通知浏览器主进程创建所述图片元素的所述图片全屏显示工具标记。At step S315, the current webpage sub-process notifies the browser main process to create the image full-screen display tool mark of the image element.
本发明还提供了一种网页中图片的全屏浏览装置，参照图4，示意性示出了根据本发明一个实施例的网页中图片的全屏浏览的装置的模块图。The present invention also provides a device for full-screen browsing of pictures in webpages. Referring to FIG. 4 , it schematically shows a block diagram of a device for full-screen browsing of pictures in webpages according to an embodiment of the present invention.
根据本发明的装置，可以包括生成与获取模块401、监测与发送模块402、创建与显示模块403、创建与加载模块404。The device according to the present invention may include a generation and acquisition module 401 , a monitoring and sending module 402 , a creation and display module 403 , and a creation and loading module 404 .
生成与获取模块401，用于在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息。The generation and acquisition module 401 is used to open the current webpage label in the webpage sub-process, and acquire the position information and picture information of the picture elements in the webpage.
当浏览器被启动时，生成与获取模块401自动启动一个浏览器主进程，并在网页子进程中打开网页标签，一个浏览器主进程对应一个或多个网页子进程。When the browser is started, the generation and acquisition module 401 automatically starts a browser main process, and opens a web page label in the web page sub-process, and a browser main process corresponds to one or more web page sub-processes.
同时，生成与获取模块401还包括遍历子模块411和缓存子模块421。当网页标签被打开时，遍历子模块411遍历网页中图片元素的位置信息和属性信息，并将所述图片元素的位置信息和属性信息发送给缓存子模块421进行保存。Meanwhile, the generation and acquisition module 401 also includes a traversal submodule 411 and a cache submodule 421 . When the web page tab is opened, the traversal sub-module 411 traverses the position information and attribute information of the image elements in the web page, and sends the position information and attribute information of the image elements to the cache sub-module 421 for storage.
监测与发送模块402，用于在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送。The monitoring and sending module 402 is configured to detect an input selection event on the current picture element in the current webpage sub-process, and send the position information and picture information of the current picture element to the browser main process.
监测与发送模块402可以监测当前网页子进程中的图片元素的输入选择事件和取消选择事件，当监测到图片元素的输入选择事件时，将所述图片元素的位置信息向创建与显示模块403发送；当监测到图片元素的输入选择事件后，又监测到取消选择事件，监测与发送模块402通知创建与显示模块403隐藏所述图片元素的图片全屏显示工具标记，保留所述图片元素的位置信息，当再次监测到该图片元素有输入选择事件时，通知创建与显示模块403显示处于隐藏状态的图片全屏显示工具标记。The monitoring and sending module 402 can monitor the input selection event and deselection event of the picture element in the current webpage sub-process, and when the input selection event of the picture element is detected, send the position information of the picture element to the creation and display module 403 After the input selection event of the picture element is detected, the deselection event is detected again, and the monitoring and sending module 402 notifies the creation and display module 403 to hide the picture full-screen display tool mark of the picture element, and retain the position information of the picture element , when detecting that the picture element has an input selection event again, the notification creating and displaying module 403 displays the full-screen display tool mark of the picture in the hidden state.
需要说明的是，监测与发送模块402在向浏览器主进程发送图片元素的位置信息的同时也向浏览器主进程发送所述图片元素图片信息。It should be noted that, when the monitoring and sending module 402 sends the position information of the picture element to the main browser process, it also sends the picture information of the picture element to the main browser process.
创建与显示模块403，用于依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记。The creating and displaying module 403 is configured to create and display a full-screen image display tool mark in the browser main process at a specified location according to the current location information of the image element.
由于一个浏览器主进程只创建一个图片全屏显示工具标记，所以实现了图片全屏显示工具标记在各个网页子进程中的复用。Since a browser main process only creates one image full-screen display tool tag, multiplexing of the image full-screen display tool tag in each webpage sub-process is realized.
由于本实施例基本相应于前述图2所示的方法实施例和图3所示的方法实施例，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。Since this embodiment basically corresponds to the aforementioned method embodiment shown in FIG. 2 and the method embodiment shown in FIG. 3 , for details that are not described in this embodiment, please refer to the relevant descriptions in the foregoing embodiments, here I won't go into details.
如图5所示，示意性示出了根据本发明一个实施例的图片的全屏浏览方法的方法从系统架构的角度的流程图，本实施中，从系统架构的角度，对加在图片全屏显示工具标记的方法进行说明。具体地，该方法可以包括以下步骤。As shown in FIG. 5 , it schematically shows a flow chart of a method for full-screen browsing of pictures according to an embodiment of the present invention from the perspective of system architecture. In this implementation, from the perspective of system architecture, full-screen display of pictures added The method of tool marking is explained. Specifically, the method may include the following steps.
在步骤S501处，在当前网页子进程中打开网页标签，并获取网页中图片元素的位置信息；At step S501, open the webpage label in the current webpage sub-process, and obtain the position information of the image element in the webpage;
在步骤S502处，在当前所述网页子进程中监测到对所述图片元素的输入选择事件时，依据所述图片元素的位置信息获得所述图片元素的显示区域信息；At step S502, when an input selection event for the picture element is detected in the current webpage sub-process, the display area information of the picture element is obtained according to the position information of the picture element;
在步骤S503处，获取当前光标的位置信息并与所述图片元素的显示区域信息比较，判断当前光标的位置是否在所述图片元素的显示区域中，将判断结果和所述图片元素的位置信息通知到所述浏览器的主进程；At step S503, obtain the position information of the current cursor and compare it with the display area information of the picture element, judge whether the position of the current cursor is in the display area of the picture element, and combine the judgment result with the position information of the picture element notify the browser's main process;
在步骤S504处，浏览器主进程依据所述判断结果和所述图片元素的位置信息，在指定位置处创建或显示或隐藏图片全屏显示工具标记。At step S504, the browser main process creates or displays or hides a picture full-screen display tool mark at a specified position according to the judgment result and the position information of the picture element.
上述步骤S501-S504中，记载的针对当前网页子进程中的网页中的图片元素，生成图片全屏显示工具标记窗口，与上述图1所述的内容类似，在此不再赘述。In the above steps S501-S504, it is recorded that for the picture elements in the webpage in the current webpage sub-process, a picture full-screen display tool markup window is generated, which is similar to the content described in FIG. 1 above, and will not be repeated here.
在步骤S505处，在另一网页子进程中打开另一网页标签，获取该网页中图片元素的位置信息；At step S505, another web page label is opened in another web page sub-process to obtain the position information of the picture element in the web page;
类似地，由于一个浏览器主进程可以对应多个网页子进程，因此，在浏览器主进程启动后，并根据当前网页子进程已经生成过图片全屏显示工具标记后，可以在网页主进程对应的打开另外一网页子进程。Similarly, since one browser main process can correspond to multiple web page sub-processes, after the browser main process starts, and after the image full-screen display tool mark has been generated according to the current web page sub-process, it can be displayed in the web page corresponding to the main process. Open another web page subprocess.
在步骤S506处，在另一网页子进程中监测到对其对应网页中图片元素的输入选择事件时，依据该图片元素的位置信息获得所述图片元素的显示区域信息；At step S506, when an input selection event of a picture element in its corresponding web page is detected in another webpage sub-process, the display area information of the picture element is obtained according to the position information of the picture element;
上述步骤S505-S506的详细过程可参见实施例一中针对当前网页子进程的处理过程，在此不再赘述。For the detailed process of the above steps S505-S506, please refer to the processing process for the current web page sub-process in Embodiment 1, which will not be repeated here.
在步骤S507处，获取当前光标的位置信息并与另一网页子进程中监测到对其对应网页中图片元素的显示区域信息比较，判断当前光标的位置是否在该图片元素的显示区域中，将判断结果和该图片元素的位置信息通知到所述浏览器的主进程；At step S507, obtain the position information of the current cursor and compare it with the display area information of the image element in the corresponding web page monitored in another web page sub-process, determine whether the current cursor position is in the display area of the image element, and The judgment result and the location information of the image element are notified to the main process of the browser;
在步骤S508处，浏览器主进程将所述图片元素的位置信息发送到步骤S504中已创建的图片全屏显示工具标记窗口，并依据所述判断结果在指定位置处显示或隐藏图片全屏显示工具标记。At step S508, the browser main process sends the position information of the picture element to the picture full-screen display tool mark window created in step S504, and displays or hides the picture full-screen display tool mark at a specified position according to the judgment result .
图5所示的实施例，也可以适用于基于同一浏览器主进程打开多个网页子进程的情况，在此不再赘述。The embodiment shown in FIG. 5 can also be applied to the situation where multiple webpage sub-processes are opened based on the same browser main process, so details will not be described here.
如图6所示，示意性示出了根据本发明一个实施例的隐藏图片全屏显示工具标记窗口的详细流程示意图。其可以具体包括：As shown in FIG. 6 , it schematically shows a detailed flowchart of hiding a picture and displaying a tool mark window in full screen according to an embodiment of the present invention. It can specifically include:
在步骤S601处，获取并将当前的屏幕坐标转换到浏览器的页面可见区域中；At step S601, obtain and convert the current screen coordinates into the page visible area of the browser;
在步骤S602处，依据浏览器的页面可见区域的当前的屏幕坐标以及所述图片元素的位置信息获得所述图片元素的显示区域信息；At step S602, the display area information of the picture element is obtained according to the current screen coordinates of the page visible area of the browser and the position information of the picture element;
需要说明的是，所述图片元素的显示区域信息是指当前网页中的client区域。It should be noted that the display area information of the picture element refers to the client area in the current web page.
在步骤S603处，获取当前光标的位置信息并将当前光标在屏幕上位置信息转换为在浏览器的页面可见区域中的位置信息；At step S603, the position information of the current cursor is obtained and the position information of the current cursor on the screen is converted into the position information in the page visible area of the browser;
在步骤S604处，依据当前光标在浏览器的页面可见区域的位置信息与所述图片元素的位置信息进行比对，以判断当前光标的位置是否在所述图片元素的显示区域中；At step S604, compare the position information of the current cursor in the page visible area of the browser with the position information of the picture element to determine whether the current cursor position is in the display area of the picture element;
如果光标的位置在所述图片元素的显示区域，则执行步骤S605，否则执行步骤S606。If the position of the cursor is in the display area of the picture element, execute step S605, otherwise execute step S606.
在步骤S605处，浏览器主进程依据所述图片元素的位置信息，在指定位置处创建并显示图片全屏显示工具标记。At step S605, the browser main process creates and displays a picture full-screen display tool mark at a specified position according to the position information of the picture element.
在步骤S606处，判断是否有取消选择事件；At step S606, determine whether there is a deselection event;
需要说明的是，所述图片元素的取消选择事件包括但不局限于鼠标移出事件、触摸弹起事件、键盘取消等等。It should be noted that, the deselection event of the picture element includes but not limited to mouse out event, touch up event, keyboard cancel and so on.
如果有取消选择事件，则执行步骤S607；否则，继续执行步骤S605。If there is a deselection event, execute step S607; otherwise, continue to execute step S605.
在步骤S607处，浏览器主进程在制定位置处创建并隐藏图片全屏显示工具标记。At step S607, the main process of the browser creates and hides the image full-screen display tool mark at the specified position.
如图7所示，示意性示出了上述实施例根据本发明的一实施例中创建并显示图片全屏显示工具标记的方法的一网页示意图，其中网页中的一图片元素1位于网页中的可显示区域client区域2，同时位于屏幕3上，光标4如图所示的位置，图片元素1上创建有显示图片全屏显示工具标记5。在该实施例中，图片全屏显示工具标记5为浏览器主进程根据图片元素1的位置而在其右边框的上方位置生成的一个独立窗口，其中的标记会在被用户的点击触发后启动对于图片元素1的全屏显示。对于图片全屏显示工具标记5其还是可以被显示在图片元素的边框处的其它位置的，或者图片元素1的显示区域内部，例如上边框的右边处，或者下边框的右边，等等。对于图片全屏显示工具标记5还是可以被设置在浏览器屏幕3的其它的特定位置处的，这个可以是浏览器中预定好的位置设置来生成该图片全屏显示工具标记5。在图片全屏显示工具标记5处于图片元素1的显示区域中生成时或者在图片元素1中浮有网页块级元素时，例如浮有DIV层等时，光标4在从图片元素1移出到图片全屏显示工具标记5的窗口中或者所述网页块级元素上时，其可以产生图片元素1的鼠标移出事件（即图片元素1的取消选择事件），但是这时还是需要显示图片全屏显示工具标记5，方便用户进行点选以进行图片的全屏显示。为此，本发明实施例中进一步地，如图8所示，示意性示出了根据本发明一个实施例的创建图片全屏显示工具标记窗口的详细流程示意图。其可以具体包括如下步骤:As shown in FIG. 7 , it schematically shows a schematic diagram of a webpage of the above-mentioned embodiment according to the method for creating and displaying a picture full-screen display tool mark in an embodiment of the present invention, wherein a picture element 1 in the webpage is located in a visible part of the webpage. The display area client area 2 is located on the screen 3 at the same time, the cursor 4 is at the position shown in the figure, and the display image full-screen display tool mark 5 is created on the image element 1 . In this embodiment, the picture full-screen display tool mark 5 is an independent window generated by the main process of the browser at the position above the right border of the picture element 1 according to the position of the picture element 1, and the mark therein will be triggered after being clicked by the user Full screen display of image element 1. For the full-screen display of the picture, the tool mark 5 can still be displayed in other positions at the border of the picture element, or inside the display area of the picture element 1, such as the right side of the upper border, or the right side of the lower border, and so on. The full-screen display tool mark 5 for the picture can still be set at other specific positions on the browser screen 3, which can be a predetermined position setting in the browser to generate the full-screen display tool mark 5 for the picture. When the image full-screen display tool mark 5 is generated in the display area of image element 1 or when there is a webpage block-level element floating in image element 1, such as a floating DIV layer, etc., the cursor 4 moves out of image element 1 to the image full screen When the tool mark 5 is displayed in the window or on the block-level element of the web page, it can generate the mouse out event of the picture element 1 (that is, the deselection event of the picture element 1), but at this time, the picture still needs to be displayed in full screen to display the tool mark 5 , which is convenient for the user to click to display the picture in full screen. For this reason, further in the embodiment of the present invention, as shown in FIG. 8 , it schematically shows a detailed flowchart of creating a picture full-screen display tool mark window according to an embodiment of the present invention. It can specifically include the following steps:
在步骤S701处，获取并将当前的屏幕坐标转换到浏览器的页面可见区域中；At step S701, obtain and convert the current screen coordinates into the page visible area of the browser;
在步骤S702处，依据浏览器的页面可见区域的当前的屏幕坐标以及所述图片元素的位置信息获得所述图片元素的显示区域信息；At step S702, the display area information of the picture element is obtained according to the current screen coordinates of the page visible area of the browser and the position information of the picture element;
需要说明的是，所述图片元素的显示区域信息是指当前网页中的client区域。It should be noted that the display area information of the picture element refers to the client area in the current web page.
在步骤S703处，获取当前光标的位置信息并将当前光标在屏幕上位置信息转换为在浏览器的页面可见区域中的位置信息；At step S703, the position information of the current cursor is obtained and the position information of the current cursor on the screen is converted into the position information in the page visible area of the browser;
在步骤S704处，依据当前光标在浏览器的页面可见区域的位置信息与所述图片元素的位置信息进行比对，以判断当前光标的位置是否在所述图片元素的显示区域中；At step S704, compare the position information of the current cursor in the page visible area of the browser with the position information of the picture element to determine whether the current cursor position is in the display area of the picture element;
如果光标的位置在所述图片元素的显示区域，则执行步骤S705，否则执行步骤S703。If the position of the cursor is in the display area of the picture element, execute step S705, otherwise execute step S703.
在步骤S705处，浏览器主进程依据所述图片元素的位置信息，在指定位置处创建并显示图片全屏显示工具标记。At step S705, the browser main process creates and displays a picture full-screen display tool mark at a specified position according to the position information of the picture element.
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other device. Various generic systems can also be used with the teachings based on this. The structure required to construct such a system is apparent from the above description. Furthermore, the present invention is not specific to any particular programming language. It should be understood that various programming languages can be used to implement the contents of the present invention described herein, and the above description of specific languages is for disclosing the best mode of the present invention.
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure the understanding of this description.
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, in order to streamline this disclosure and to facilitate an understanding of one or more of the various inventive aspects, various features of the invention are sometimes grouped together in a single embodiment, figure, or its description. This method of disclosure, however, is not to be interpreted as reflecting an intention that the claimed invention requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the Detailed Description are hereby expressly incorporated into this Detailed Description, with each claim standing on its own as a separate embodiment of this invention.
本领域那些技术人员可以理解，可以对实施例中的装置中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个装置中。可以把实施例中的模块组合成一个模块，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者装置的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。Those skilled in the art can understand that the modules in the device in the embodiment can be adaptively changed and arranged in one or more devices different from the embodiment. The modules in the embodiments can be combined into one module, and furthermore can be divided into a plurality of sub-modules or sub-units or sub-assemblies. All features disclosed in this specification (including accompanying claims, abstract and drawings), as well as any method or method so disclosed, may be used in any combination, except that at least some of such features and/or processes or units are mutually exclusive. All processes or units of the device are combined. Each feature disclosed in this specification (including accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。Furthermore, those skilled in the art will understand that although some embodiments described herein include some features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the invention. and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的浏览器加载图片全屏显示工具标记的装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。The various component embodiments of the present invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all of the components in the device for displaying tool marks in full screen when a browser loads a picture according to an embodiment of the present invention Or full functionality. The present invention can also be implemented as an apparatus or an apparatus program (for example, a computer program and a computer program product) for performing a part or all of the methods described herein. Such a program for realizing the present invention may be stored on a computer-readable medium, or may be in the form of one or more signals. Such a signal may be downloaded from an Internet site, or provided on a carrier signal, or provided in any other form.
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means can be embodied by one and the same item of hardware. The use of the words first, second, and third, etc. does not indicate any order. These words can be interpreted as names.
本文公开了A1、一种网页中图片的全屏浏览方法，包括：在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息；在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送；依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记；接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。A2、根据A1所述的方法，其特征在于，所述在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息包括：当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及将所述图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。A3、根据A2所述的方法，其特征在于，在所述全屏显示窗口中加载所述当前图片的图片信息包括：从当前所述网页子进程的缓存中获取并加载当前所述图片元素的图片信息至所述全屏显示窗口。A4、根据A1所述的方法，其特征在于，所述在网页子进程中打开当前网页标签还包括：当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及按照遍历的先后顺序，将当前所述图片元素及其相邻图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。A5、根据A4所述的方法，其特征在于，所述相邻图片元素为当前网页标签相关联的网页中的图片元素。A6、根据A4或A5所述的方法，其特征在于，在所述全屏显示窗口中加载所述当前图片的图片信息包括：从当前所述网页子进程的缓存中获取并加载所述当前图片的图片信息至所述全屏显示窗口；以及从当前所述网页子进程的缓存中获取并加载与当前所述图片元素相邻的其他图片元素的图片信息，在所述全屏显示窗口中预显与当前所述图片元素相邻的其他图片元素的图片信息。A7、根据A1所述的方法，其特征在于：所述图片元素的输入选择事件包括如下任一种事件：鼠标悬浮事件、鼠标移入事件、鼠标移动事件、触摸按下事件、触摸移动事件、触摸长按事件、触摸滑动事件、键盘选定。A8、根据A1所述的方法，其特征在于，在主进程中创建全屏显示窗口包括：依据当前所述图片元素的位置信息和图片信息在主进程中创建全屏显示窗口；加载一背景图于所述全屏显示窗口中。A9、根据A1-A8任一项所述的方法，其特征在于，还包括：当在当前所述网页子进程中监测到对所述图片元素的取消选择事件时，当前所述网页子进程通知所述浏览器主进程隐藏所述图片全屏显示工具标记。A10、根据A9所述的方法，其特征在于，所述图片元素的取消选择事件包括如下任一种事件：鼠标移出事件、触摸弹起事件、键盘取消。A11、根据A1-A8任一项所述的方法，其特征在于：所述指定位置为所述图片元素区域内任一位置；或者为所述图片元素边缘处一位置。A12、根据A1-A8任一项所述的方法，其特征在于：当启动浏览器时生成所述浏览器主进程，所述浏览器主进程对应一个或多个网页子进程，所述浏览器主进程的图片全屏显示工具标记在所述一个或多个网页子进程之间交互使用。A13、根据A1-A8任一项所述的方法，其特征在于，还包括：在全屏显示状态下还显示所述图片元素的图片信息的原始尺寸，并加载针对所述图片元素的图片信息的图片工具。A14、根据A1-A8任一项所述的方法，其特征在于：所述图片元素的图片信息包括：所述图片元素的属性信息和图片数据。A15、根据A14所述的方法，其特征在于：所述图片元素的位置信息包括：所述图片元素在所述网页子进程的页面可见区域中的左上角位置坐标和所述图片元素的宽和高；以及所述图片元素的属性信息包括：图片大小、图片在本地缓存的地址、图片在云端的保存地址和/或所述图片元素的URL。This paper discloses A1, a method for full-screen browsing of pictures in a webpage, including: opening the current webpage label in the subprocess of the webpage, and obtaining the position information and picture information of the picture elements in the webpage; For the input selection event of the current picture element, the position information and picture information of the current picture element are sent to the browser main process; according to the current position information of the picture element, the browser main process is at the designated position Creating and displaying a full-screen image display tool mark; receiving a trigger from the user on the full-screen display tool mark of the image, creating a full-screen display window in the main process, and loading the image information of the current image element in the full-screen display window. A2, according to the method described in A1, it is characterized in that, described opening current webpage label in the webpage sub-process, and obtaining the position information and the picture information of the picture element in the webpage comprises: currently described webpage sub-process traverses the pictures in the webpage position information and picture information of the element; and saving the position information and picture information of the picture element into the cache of the current webpage sub-process. A3. The method according to A2, wherein loading the picture information of the current picture in the full-screen display window comprises: acquiring and loading the picture of the current picture element from the cache of the current webpage sub-process Information to the full screen display window. A4, according to the method described in A1, it is characterized in that, the described opening current webpage label in the webpage sub-process also includes: the current webpage sub-process traverses the position information and the picture information of the picture elements in the webpage; and according to the traversed In sequence, the position information and picture information of the current picture element and its adjacent picture elements are saved in the cache of the current webpage sub-process. A5. The method according to A4, wherein the adjacent picture element is a picture element in a web page associated with the current web page tag. A6. The method according to A4 or A5, wherein loading the picture information of the current picture in the full-screen display window comprises: acquiring and loading the picture information of the current picture from the cache of the current webpage sub-process Image information to the full-screen display window; and obtain and load the image information of other image elements adjacent to the current image element from the cache of the current webpage sub-process, and pre-display in the full-screen display window the same as the current image information The picture information of other picture elements adjacent to the picture element. A7. The method according to A1, characterized in that: the input selection event of the picture element includes any of the following events: mouse hover event, mouse move event, mouse move event, touch press event, touch move event, touch Long press event, touch slide event, keyboard selection. A8, according to the method described in A1, it is characterized in that creating a full-screen display window in the main process includes: creating a full-screen display window in the main process according to the position information and picture information of the currently described picture element; loading a background image on the in the full-screen display window described above. A9. The method according to any one of A1-A8, further comprising: when the deselection event of the picture element is detected in the current webpage subprocess, the current webpage subprocess notifies The browser main process hides the image full-screen display tool mark. A10. The method according to A9, wherein the deselection event of the picture element includes any of the following events: a mouse out event, a touch popup event, and a keyboard cancel. A11. The method according to any one of A1-A8, characterized in that: the specified position is any position within the area of the picture element; or a position at the edge of the picture element. A12, according to the method described in any one of A1-A8, it is characterized in that: when starting browser, generate described browser main process, described browser main process corresponds to one or more webpage sub-processes, described browser The image full-screen display tool mark of the main process is used interactively among the one or more sub-processes of the webpage. A13. The method according to any one of A1-A8, further comprising: displaying the original size of the picture information of the picture element in the full-screen display state, and loading the picture information for the picture element Picture tools. A14. The method according to any one of A1-A8, characterized in that: the picture information of the picture element includes: attribute information and picture data of the picture element. A15, according to the method described in A14, it is characterized in that: the position information of the picture element includes: the position coordinates of the upper left corner of the picture element in the visible area of the page of the sub-process of the webpage and the width and sum of the picture element high; and the attribute information of the picture element includes: the size of the picture, the address of the local cache of the picture, the storage address of the picture in the cloud and/or the URL of the picture element.
本文公开了B16、一种网页中图片的全屏浏览装置，包括：生成与获取模块，用于在网页子进程中打开当前网页标签，并获取网页中图片元素的位置信息和图片信息；监测与发送模块，用于在当前所述网页子进程中监测到对当前所述图片元素的输入选择事件，将当前所述图片元素的位置信息和图片信息向浏览器主进程发送；创建与显示模块，用于依据当前所述图片元素的位置信息，所述浏览器主进程在指定位置处创建并显示图片全屏显示工具标记；创建与加载模块，用于接收用户对所述图片全屏显示工具标记的触发，在主进程中创建全屏显示窗口，并在所述全屏显示窗口中加载当前所述图片元素的图片信息。B17、根据B16所述的装置，其特征在于，上述生成与获取模块包括：遍历子模块，用于当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及缓存子模块，用于将所述图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。B18、根据B17所述的装置，其特征在于，所述创建与加载模块还配置成：从当前所述网页子进程的缓存中获取并加载当前所述图片元素的图片信息至所述全屏显示窗口。B19、根据B16所述的装置，其特征在于，所述生成与获取模块包括：遍历子模块，用于当前所述网页子进程遍历网页中的图片元素的位置信息和图片信息；以及缓存子模块，用于按照遍历的先后顺序，将当前所述图片元素及其相邻图片元素的位置信息和图片信息保存至当前所述网页子进程的缓存中。B20、根据B19所述的方法，其特征在于，所述相邻图片元素为当前网页标签相关联的网页中的图片元素。B21、根据B19或B20所述的装置，其特征在于，所述创建与加载模块还被配置成：从当前所述网页子进程的缓存中获取并加载所述当前图片的图片信息至所述全屏显示窗口；以及从当前所述网页子进程的缓存中获取并加载与当前所述图片元素相邻的其他图片元素的图片信息，在所述全屏显示窗口中预显与当前所述图片元素相邻的其他图片元素的图片信息。B22、根据B16所述的装置，其特征在于：所述图片元素的输入选择事件包括如下任一种事件：鼠标悬浮事件、鼠标移入事件、鼠标移动事件、触摸按下事件、触摸移动事件、触摸长按事件、触摸滑动事件、键盘选定。B23、根据B16所述的装置，其特征在于，所述创建与加载模块还被配置成：依据当前所述图片元素的位置信息和图片信息在主进程中创建全屏显示窗口；加载一背景图于所述全屏显示窗口中。B24、根据B16-B23任一项所述的装置，其特征在于，所述监测与发送模块与创建与显示模块还被配置成：当在当前所述网页子进程中监测到对所述图片元素的取消选择事件时，当前所述网页子进程通知所述浏览器主进程隐藏所述图片全屏显示工具标记。B25、根据B24所述的装置，其特征在于，所述图片元素的取消选择事件包括如下任一种事件：鼠标移出事件、触摸弹起事件、键盘取消。B26、根据B16-B23任一项所述的装置，其特征在于，所述创建与显示模块还包括：所述指定位置为所述图片元素区域内任一位置；或者为所述图片元素边缘处一位置。B27、根据B16-B23任一项所述的装置，其特征在于，所述生成与获取模块还被配置成：当启动浏览器时生成所述浏览器主进程，所述浏览器主进程对应一个或多个网页子进程，所述浏览器主进程的图片全屏显示工具标记在所述一个或多个网页子进程之间交互使用。B28、根据B16-B23任一项所述的装置，其特征在于，所述创建与显示模块还被配置成：在全屏显示状态下还显示所述图片元素的图片信息的原始尺寸，并加载针对所述图片元素的图片信息的图片工具。B29、根据B16-B23任一项所述的装置，其特征在于：所述图片元素的图片信息包括：所述图片元素的属性信息和图片数据。B30、根据B29所述的装置，其特征在于：所述图片元素的位置信息包括：所述图片元素在所述网页子进程的页面可见区域中的左上角位置坐标和所述图片元素的宽和高；以及所述图片元素的属性信息包括：图片大小、图片在本地缓存的地址、图片在云端的保存地址和/或所述图片元素的URL。This paper discloses B16, a full-screen browsing device for pictures in web pages, including: a generation and acquisition module, used to open the current web page label in the sub-process of the web page, and obtain the position information and picture information of the picture elements in the web page; monitoring and sending The module is used to detect the input selection event to the current picture element in the current webpage sub-process, and sends the position information and picture information of the current picture element to the browser main process; the creation and display module uses According to the position information of the current picture element, the browser main process creates and displays the picture full-screen display tool mark at the specified position; the creation and loading module is used to receive the trigger of the user to the picture full-screen display tool mark, A full-screen display window is created in the main process, and the picture information of the current picture element is loaded in the full-screen display window. B17, according to the described device of B16, it is characterized in that, above-mentioned generation and acquisition module comprises: traversal submodule, is used for the current described webpage subprocess to traverse the position information and the picture information of the picture element in the webpage; And cache submodule, It is used for saving the position information and picture information of the picture element into the cache of the current webpage sub-process. B18. The device according to B17, wherein the creation and loading module is further configured to: obtain and load the picture information of the current picture element from the cache of the current webpage sub-process to the full-screen display window . B19, according to the described device of B16, it is characterized in that, described generating and obtaining module comprises: Traversing submodule, is used for the position information and the picture information of picture element in the current described webpage subprocess traversing webpage; And caching submodule , for saving the position information and picture information of the current picture element and its adjacent picture elements in the cache of the current web page sub-process according to the order of traversal. B20, according to the described method of B19, it is characterized in that, described adjacent picture element is the picture element in the webpage that current webpage label is associated. B21, according to the device described in B19 or B20, it is characterized in that the creation and loading module is also configured to: acquire and load the picture information of the current picture from the cache of the current webpage sub-process to the full screen displaying the window; and obtaining and loading picture information of other picture elements adjacent to the current picture element from the cache of the current webpage sub-process, and pre-displaying the picture information adjacent to the current picture element in the full-screen display window Image information for other image elements. B22, according to the device described in B16, it is characterized in that: the input selection event of the picture element includes any of the following events: mouse hover event, mouse move-in event, mouse move event, touch press event, touch move event, touch Long press event, touch slide event, keyboard selection. B23, according to the described device of B16, it is characterized in that, described creation and loading module are also configured to: create full-screen display window in main process according to the position information of current described picture element and picture information; Load a background picture in The full screen display window. B24. The device according to any one of B16-B23, characterized in that, the monitoring and sending module and the creation and display module are also configured to: when the image element is detected in the current webpage sub-process When the event of deselection is selected, the current webpage subprocess notifies the browser main process to hide the image full-screen display tool mark. B25. The device according to B24, wherein the deselection event of the picture element includes any one of the following events: a mouse out event, a touch popup event, and keyboard cancellation. B26, according to the device described in any one of B16-B23, it is characterized in that, the creation and display module also includes: the specified position is any position in the area of the picture element; or at the edge of the picture element a location. B27. The device according to any one of B16-B23, wherein the generation and acquisition module is also configured to: generate the browser main process when starting the browser, and the browser main process corresponds to one or a plurality of webpage sub-processes, and the picture full-screen display tool mark of the browser main process is used interactively among the one or more webpage sub-processes. B28. The device according to any one of B16-B23, wherein the creation and display module is also configured to: display the original size of the picture information of the picture element in the full-screen display state, and load the The image tool for the image information of the image element. B29. The device according to any one of B16-B23, characterized in that: the picture information of the picture element includes: attribute information and picture data of the picture element. B30, according to the device described in B29, it is characterized in that: the position information of the picture element includes: the position coordinates of the upper left corner of the picture element in the page visible area of the sub-process of the web page and the width and sum of the picture element high; and the attribute information of the picture element includes: the size of the picture, the address of the local cache of the picture, the storage address of the picture in the cloud and/or the URL of the picture element.
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210497486.5ACN102999342B (en) | 2012-11-28 | 2012-11-28 | The full frame browsing method of picture and device thereof in a kind of webpage |
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210497486.5ACN102999342B (en) | 2012-11-28 | 2012-11-28 | The full frame browsing method of picture and device thereof in a kind of webpage |
| Publication Number | Publication Date |
|---|---|
| CN102999342A CN102999342A (en) | 2013-03-27 |
| CN102999342Btrue CN102999342B (en) | 2016-08-24 |
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210497486.5AActiveCN102999342B (en) | 2012-11-28 | 2012-11-28 | The full frame browsing method of picture and device thereof in a kind of webpage |
| Country | Link |
|---|---|
| CN (1) | CN102999342B (en) |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102999341B (en)* | 2012-11-28 | 2016-05-18 | 北京奇虎科技有限公司 | For the full frame browsing method of picture and the device of webpage |
| CN104238867B (en)* | 2013-06-13 | 2018-09-18 | 腾讯科技（深圳）有限公司 | The display methods and device of label data |
| CN103544272A (en)* | 2013-10-18 | 2014-01-29 | 北京奇虎科技有限公司 | Method and device for displaying pictures in browser |
| CN104598467B (en)* | 2013-10-30 | 2020-03-20 | 腾讯科技（深圳）有限公司 | Webpage picture display method and device |
| CN104714963A (en)* | 2013-12-13 | 2015-06-17 | 乐视网信息技术（北京）股份有限公司 | Video poster image and video brief introduction information display method and browser |
| CN103970909A (en)* | 2014-05-27 | 2014-08-06 | 小米科技有限责任公司 | Method and device for displaying tabs of browser |
| CN105740055A (en)* | 2014-12-09 | 2016-07-06 | 陈灿林 | Using third party webpage browser in full screen program |
| CN105893602B (en)* | 2016-04-21 | 2019-11-05 | 北京京东尚科信息技术有限公司 | Full screen display process and system for chart in the webpage of terminal browser |
| CN108563712B (en)* | 2018-03-28 | 2021-08-31 | 腾讯科技（深圳）有限公司 | Webpage picture viewing method and device and storage equipment |
| CN111078785B (en)* | 2019-11-27 | 2023-12-01 | 贝壳技术有限公司 | A method, device, electronic equipment and storage medium for data visualization display |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1920770A (en)* | 2005-08-25 | 2007-02-28 | 千橡世纪科技发展（北京）有限公司 | System and method for obtaining webpage insert data |
| CN101504648A (en)* | 2008-11-14 | 2009-08-12 | 北京搜狗科技发展有限公司 | Method and apparatus for showing web page resources |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1920770A (en)* | 2005-08-25 | 2007-02-28 | 千橡世纪科技发展（北京）有限公司 | System and method for obtaining webpage insert data |
| CN101504648A (en)* | 2008-11-14 | 2009-08-12 | 北京搜狗科技发展有限公司 | Method and apparatus for showing web page resources |
| Publication number | Publication date |
|---|---|
| CN102999342A (en) | 2013-03-27 |
| Publication | Publication Date | Title |
|---|---|---|
| CN102999342B (en) | The full frame browsing method of picture and device thereof in a kind of webpage | |
| CN102999613B (en) | A kind of method of the class of loading tool in a browser window and device thereof | |
| CN104077387B (en) | A kind of web page contents display methods and browser device | |
| US8914496B1 (en) | Tracking user behavior relative to a network page | |
| CN103019703B (en) | Tool window loading method and device for browser | |
| CN104360882B (en) | Display methods and device are carried out to picture in webpage in a kind of browser | |
| CN102999341B (en) | For the full frame browsing method of picture and the device of webpage | |
| CN103020178B (en) | The Load Image method and apparatus of tool bar of a kind of browser | |
| US20130191785A1 (en) | Confident item selection using direct manipulation | |
| CN102981877B (en) | Picture toolbar loading method and device | |
| CN102768683B (en) | A kind of searching method of pictorial information and searcher | |
| US20130080910A1 (en) | Dynamic visualization of page element access rates in a web application | |
| CN103034686B (en) | A method and device for loading a picture toolbar window | |
| US20140380178A1 (en) | Displaying interactive charts on devices with limited resources | |
| TWI545450B (en) | Browser and method for displaying subsites | |
| CN104965881A (en) | Method and device for extracting selected area from page | |
| CN104205017A (en) | Method and system for providing a scrolling graph | |
| CN104361082A (en) | Method and device for displaying specified element in web page in browser | |
| CN103793224A (en) | Window display method and device | |
| CN105260433A (en) | Webpage content collecting method and electronic device | |
| JP2013540309A5 (en) | ||
| US20150278384A1 (en) | System, apparatus, and process for pulling/capturing content | |
| CN102981876B (en) | Picture tool bar window loading method and device | |
| US11954421B2 (en) | Reducing data usage for rendering state changes | |
| JP6015648B2 (en) | Web page update notification program, Web page update notification device, and Web page update notification method |
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | Effective date of registration:20220801 Address after:Room 801, 8th floor, No. 104, floors 1-19, building 2, yard 6, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Patentee after:BEIJING QIHOO TECHNOLOGY Co.,Ltd. Address before:100088 room 112, block D, 28 new street, new street, Xicheng District, Beijing (Desheng Park) Patentee before:BEIJING QIHOO TECHNOLOGY Co.,Ltd. Patentee before:Qizhi software (Beijing) Co.,Ltd. | |
| TR01 | Transfer of patent right |