CN100511230C - Webpage-text based image search and display method thereof - Google Patents

Abstract

The present invention includes according to picture text stored image information establishing picture and information corresponded relation library; according to picture text display text display image information inputting query criterion, utilizing said query criterion to proceed matching operation in relation library, if matching successfully then feeding back matched information corresponded picture border information and picture text display zone information; according to searching picture border information to determine displaying area only including searching picture, generating displaying regional cover layer capable of covering except searching image display area external picture text; outputting cover layer to displaying terminal, only displaying searching picture. The present invention can high efficiency displaying assigned area in a picture, saving new picture generative process and data transmission process, and processing resource.

Description

Image Retrieval and Display Method Based on Webpage Text

technical field

The invention relates to an image retrieval and display method, in particular to an image retrieval and display method based on webpage (web) page text.

Background technique

Images can express rich meanings and are easily recognized and accepted by people. Therefore, images are widely used in modern life. For example, the logos of some companies and websites are mostly expressed in the form of images. Since images are different from texts and need to be explained by people's own understanding, image retrieval is much more difficult than text query and matching. Especially in text files with many images, it is very difficult to find out the image that the user is interested in among the massive images of the text. Even if the file supports an automatic search function, finding matching images and displaying them to the user output is resource-intensive. Especially when the search object is web page text, the searched text may need to face a large number of users, the server needs to transmit different query results according to different user search needs, and the image data is generally relatively large, which will inevitably lead to network of blocking.

At present, in order to increase the information capacity and attract the attention of netizens in a limited space, there is a lot of image information in the web pages of various websites. There are all kinds of images on the Internet, and sometimes users need to collect some representative images that they are most interested in for their own use. However, with the rapid expansion of image information on the Internet, retrieving corresponding images and displaying them to each client consumes a lot of processing resources for servers with limited processing capabilities. When there are many users, it is likely to cause data congestion.

When a user visits a web page through a browser, they are required to find the ones they are interested in among the large number of images in it, and only highlight one or more images they are interested in in the web page, while hiding other display data that is not related to the retrieved images . The currently widely used method is to perform image retrieval first, and regenerate a web page that only includes the user's retrieval results according to the display needs of the user's retrieval results, and transmit it to the user's browser. The shortcomings of the current method are very obvious: new web pages and images need to be regenerated and transmitted accordingly, which will inevitably lead to an increase in processor burden, and generally delay the display on the browser side, resulting in poor user experience. When there are many retrieval users, it will cause network congestion.

Contents of the invention

In view of the problems and deficiencies in the above-mentioned existing image retrieval and display methods, the purpose of the present invention is to provide an image retrieval and display method based on web page text that can significantly improve the transmission and display effect after image retrieval.

The present invention is realized like this: a kind of image retrieval and display method based on web page text, comprises the following steps:

(1) Establish keyword identification information of images for all images included in the web page text, set up a matching information database for images, establish the corresponding relationship between image display information and image keyword identification information, and set the coordinate system in the web page text , use the coordinate system to complete the positioning of each individual image in the text of the web page, and determine the display area of each image and the entire display area of the text of the web page, and combine the determined display area and the entire display area of the text of the web page with the image bind the keyword identification information;

(2) According to the image displayed in the text of the web page, use the input query condition to perform a matching operation in the matching information database, if the matching is successful, then output the position information of the retrieval image corresponding to the matching information, and the display area of the web page Information and retrieval of image display area information;

(3) According to the display area information of the web page text, create a covering layer greater than or equal to the web page display area, and have a non-transparent background color to cover the original layer;

(4) Setting the area of the covering layer corresponding to the display area of the image corresponding to the matching information to be transparent.

When using the present invention to retrieve images, when a matching image is retrieved and the retrieved image is output, there is no need to regenerate the image text object, and it is not necessary to process the original picture, but the original layer that does not need to be displayed Masked to show only the area where the image was retrieved. Especially when the search object is a web page, using the present invention to display the search results not only saves the process of processing the picture itself, but also saves the process of retransmitting picture data in web applications, and speeds up the process of local positioning and display of pictures. The present invention can efficiently display the designated area on a picture, saving the new picture generation process and the new picture data transmission process. When the original picture is large, it can obviously save the processing resources of the server and reduce the overall waiting time of the user, thereby enabling Significantly improve web user experience and have strong practical significance.

Description of drawings

Fig. 1 is a schematic diagram of the image retrieval and display process of the present invention;

FIG. 2 is a schematic diagram of website page image display.

Detailed ways

The present invention will be described in detail below in conjunction with the accompanying drawings.

The invention is proposed aiming at searching and displaying images in a text object containing a large number of images. The following describes the present invention in detail by taking typical web pages as objects. Those skilled in the art should understand that the present invention is not limited to the application of web page text.

When the present invention is implemented, it is first necessary to establish retrieval matching information for each individual image included in the web page text. The present invention can adopt keyword retrieval mode. First, identification information is established for all images included in the web page text, and the identification information is text information to facilitate user input. The identification information of these keywords includes all possible names, connotations, attributes, sizes, website addresses, website domain names, website keywords, website profiles, and other textual information that can identify image features. A matching information database is established for the image, and a corresponding relationship between the image display information and the keyword identification information of the image is established. Set the coordinate system in the web page text, such as grid, coordinates, etc., which can be used to determine the image position and display area, use the coordinate system to complete the positioning of each individual image included in the web page text, and determine the display area of each image , the entire display area of the web page text, and bind the determined display area, the entire display area of the web page text and the keyword identification information of the image.

As shown in Figure 1, the specific process of the present invention is as follows:

Step 1 is the process start step;

In step 2, when a web user needs to retrieve an image of interest to himself on a massive web page, input corresponding search matching information;

In step 3, the user's browser sends the search request to the web server, and the web server forwards the search request to the database storing the image information for matching information matching. If there is matching information, go to step 4; otherwise, return to the search Unsuccessful information, go to step 6;

In step 4, the position information of the retrieval image corresponding to the output matching information, the display area information of the web page and the retrieval image display area (one or more pieces) information;

In step 5, after the browser of the web client receives the position and the display area information that the web server returns, the coordinate system according to the present invention dynamically creates one that is consistent with the size of the original web page display area (or larger than the web page display area), and has A layer with a non-transparent background color (hereinafter referred to as an overlay layer) covers the original layer, thereby hiding the entire original web page. According to the retrieval image display area returned by the web server, set the background color of the retrieval image display area to a transparent color, thereby displaying the corresponding area of the original picture below—these areas are exactly the areas related to the results retrieved by the web user. When the web user proceeds to retrieve next time, the overlay layer will be cleared first, and then the above-mentioned retrieval and display process will be repeated.

Step 6, the process ends.

The image region information generating steps of the present invention are:

1. According to the boundary coordinate information of the image, determine the maximum abscissa value, the minimum abscissa value, the maximum ordinate value and the minimum ordinate value of the image;

2. Determine the rectangular area according to the above coordinate values, and determine an image display area greater than or equal to the area according to the rectangular area;

3. Binding the image display area information determined in step 2 above with the identification information.

The image area information generation step of the present invention can also be:

1. Determine a coordinate point in the image, and calculate the maximum distance between the coordinate point and the boundary of the image, and determine a circular area with the coordinate point as the center and the maximum distance as the radius;

2. Determine an image display area greater than or equal to the area according to the circular area;

3. Binding the image display area information determined in step 2 above with the identification information.

The specific application process of the present invention will be explained below by taking the web page of www.www.com.cn as an example.

Wanwang Grid is a page that displays the logos and icons of Wanwang Alliance member websites in a centralized manner, and uniformly displays the logos (a kind of picture logo) of many member websites on a complete page. For details, please refer to the display content of the above website, as shown in Figure 2, and for details, please refer to the page http://g.www.com.cn . Because the entire web page has a huge area and there are so many website logs (images included in the web page), it is very difficult for users to find the logo of the relevant website they are interested in with the naked eye. At this time, you can retrieve the matching information that you are more interested in by inputting. As the user is only interested in images that are identified by domain names, you can input "domain name" to search for images. The process takes less than 0.05s, which avoids server resource consumption and hardly requires users to wait.

To enable those skilled in the art to better understand the present invention. Still taking the above grid as an example to specifically illustrate how to quickly display search results on a specified web page that includes massive image information.

Firstly, it is necessary to establish the mapping relationship data between the picture area and the identification information (keyword), and the specific steps are as described above.

The web page specified above can be logically decomposed into many independent image areas-the independence here refers to separating the area, visually it is a small picture or icon, which can express certain information independently, and does not depend on Other areas, this is the image referred to in the present invention, each image occupies a certain area on the web page, and each image has corresponding keyword identification information in the corresponding database. These keywords identify the corresponding relationship between information and images, and are stored in a mapping table in the database on the Web server side.

The mapping relationship between images stored in the database and related information can be roughly expressed as "coordinate x, coordinate y, width, height, URL, introduction, other information", where the four data definitions of coordinate x, coordinate y, width and height The area where each image is located on the entire web page map is shown.

When the user enters the search term, the web page uses Javascript's AJAX technology to implement asynchronous background submission (the meaning of asynchronous submission here is that the client's web page is not refreshed or the page URL remains unchanged, and the search term is submitted to the server by the xhttp component of javascript).

The database at the Web server side will find out the image position information, Web page display area information and image display area information corresponding to the keyword identification information according to the input keyword identification information.

The server will add the javascript command to the above location and display area information found, and send it back to the client in the form of a string. Execute the javascript command returned by the server.

The operations performed by these javascript instructions are divided into two steps. First call javascript's own createElement method to dynamically create a div floating overlay with the same size as the display area of the web page picture, and set its coordinates on the web page so that its position floats directly above the web page picture to cover the original Displays the effect of the region. The covered area is equal to or larger than the image display area of the original web page.

Then set the css attribute FILTER of the div floating layer to mask (color=#efefff). After setting this property, the div floating layer will have a characteristic, the area where the child element (childElement) in the div is located (retrieve the image display area) It will be transparent and lose its covering effect. The present invention will use this feature to continue to dynamically create the sub-elements of the div floating layer of createElement, and set the position attributes of the css attributes of these sub-elements according to the coordinate data returned by the previous server, including left, top, width, height, etc. Information, positioned above locations that do not need to be covered. There is a one-to-one correspondence between the number of display areas of the searched image and the number of searched images. Finally complete the display. In the present invention, the original page itself does not change, and there is no transmission of any new page pictures, which saves the process of picture data retransmission, prevents network congestion, and efficiently completes the process of picture search and display, which is very meaningful for improving the user experience of the website .

Certainly, the present invention also can have other multiple embodiments, without departing from the spirit and essence of the present invention, those skilled in the art can make various corresponding changes and deformations according to the present invention, but these corresponding changes and All deformations should belong to the protection scope of the appended claims of the present invention.

Claims (4)

1, a kind of image retrieval and display method based on web page text, it is characterized in that, this method comprises the following steps: (1) Establish keyword identification information of images for all images included in the web page text, set up a matching information database for images, establish the corresponding relationship between image display information and image keyword identification information, and set the coordinate system in the web page text , use the coordinate system to complete the positioning of each individual image in the text of the web page, and determine the display area of each image and the entire display area of the text of the web page, and combine the determined display area and the entire display area of the text of the web page with the image bind the keyword identification information; (2) According to the image displayed in the text of the web page, use the input query condition to perform a matching operation in the matching information database, if the matching is successful, then output the position information of the retrieval image corresponding to the matching information, and the display area of the web page Information and retrieval of image display area information; (3) According to the display area information of the web page text, create a covering layer greater than or equal to the web page display area, and have a non-transparent background color to cover the original layer; (4) Setting the area of the covering layer corresponding to the display area of the image corresponding to the matching information to be transparent. 2. The method according to claim 1, characterized in that, in step (1), the display area of each image is determined, specifically: a. According to the boundary coordinate information of the image corresponding to the matching information, determine the maximum abscissa value, the minimum abscissa value, the maximum ordinate value and the minimum ordinate value of the image; b. Determine a rectangular area according to the above coordinate values, and determine an image display area greater than or equal to the rectangular area according to the rectangular area; c. Binding the image display area information determined in step b with the identification information. 3. The method according to claim 1, characterized in that, in step (1), the display area of each image is determined, specifically: a. Determine a coordinate point in the image corresponding to the matching information, and calculate the maximum distance between the coordinate point and the boundary of the image, and determine a circular area with the coordinate point as the center and the maximum distance as the radius; b. Determine an image display area larger than or equal to the circular area according to the circular area; c. Binding the image display area information determined in step b with the identification information. 4. The method according to claim 1, wherein the image identification information includes image name and image attribute.

Images