Method and device for generating picture search entry
By listening to mouse movement events, obtaining screen locations in real time and creating an image search portal, the problems of complex image search operations and poor compatibility in the existing technology are solved, convenient image search functions are realized, the search range is expanded, and the user experience is improved.
Patent Information
- Application Number
- CN202510517696.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-23
- Publication Date
- 2025-08-29
AI Technical Summary
In the prior art, image search operations are complex and have poor compatibility, and it is impossible to realize convenient image search on different platforms, which limits the search scope and user experience.
By listening to mouse movement events, you can obtain screen locations in real time and determine target elements, create image search portals, simplify operation processes, and expand the search range to various platforms.
It realizes the same model for one-click image search, simplifies user operation process, improves the universality and practicality of search, and meets users' needs for efficient and convenient shopping.
Smart Images

Figure CN120561326A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the technical field of browser plug-ins, and in particular to a method and device for generating an image search portal. Background Art
[0002] In the current e-commerce environment, image search (search by image) has become a crucial tool for enhancing the user shopping experience and boosting sales conversions. Traditional image search platforms rely on users actively uploading images or searching for products similar to the one they're currently browsing. While uploading images allows users to search for any image, this is inconvenient, requiring users to download the image locally, click a local file selection box, and then select the image. Image search based on the currently browsed product, while convenient, limits the range of images that can be used as the original source.
[0003] In the prior art, the solutions for implementing image search generally include image uploading, webpage screenshots, and providing image search portals at the platform product location. Among them, image uploading obtains the original image specified by the user by calling up a local file selection window or allowing the user to drag a local image into a specified location. Its disadvantages are: there are many operation processes, and the user needs to save the image locally in advance and then upload it to the platform through some means to trigger the image search. Webpage screenshots provide users with a screenshot function, allowing users to customize the content on the webpage for image search. However, the screenshot operation is not simple enough, and when the user completes the screenshot, there may be errors between the captured content and the original image. The platform product location provides an image search portal. A one-click image search portal is displayed at the location where the product is displayed on the platform page, but this method limits the range of images. E-commerce platforms, such as the homepage, search page, and OD page, usually display product information (including product images) in a fixed layout. Browser plug-ins can find product images based on these pages, and then display an entrance at a suitable location around them to help users perform image searches. However, the "image search portal" provided near product images on e-commerce platforms is based on a known page layout, allowing for targeted image recognition. Users can only search for images based on existing products, not on any other images on or off the platform, making it less universal. Summary of the Invention
[0004] In response to the problems of complex operation and poor compatibility faced by image search in the existing technology, this application provides a solution for generating an image search portal, simplifies the operation process, and expands the scope of image search to various different platforms, significantly improving the comprehensiveness and practicality of the search, and meeting users' needs for an efficient and convenient shopping experience.
[0005] According to a first aspect of the present application, a method for generating an image search portal is provided, characterized by comprising:
[0006] Listen for mouse movement events;
[0007] Based on the monitored mouse movement event, the current position of the mouse on the screen is obtained in real time, and the highest-level HTML element at the current position is determined as the target element;
[0008] determining a target image element related to the target element and / or the current position;
[0009] Creating and displaying a current image search entry corresponding to the target image element at a preset position; and
[0010] In response to clicking the image search entry, the corresponding target image content is read and transmitted to the server.
[0011] According to a second aspect of the present application, a device for generating an image search portal is provided, characterized by comprising:
[0012] Monitoring module, used to monitor mouse movement events;
[0013] A first determination module is configured to obtain the current position of the mouse on the screen in real time based on the monitored mouse movement event, and determine the highest-level HTML element at the current position as the target element;
[0014] A second determining module, configured to determine a target image element related to the target element and / or the current position;
[0015] Creating a display module, used to create and display a current image search entry corresponding to the target image element at a preset position; and
[0016] The reading and transmitting module is used to read the corresponding target image content in response to clicking the image search entrance, and transmit the corresponding target image content to the server.
[0017] According to a third aspect of the present application, an electronic device is provided, including:
[0018] processor; and
[0019] The memory stores computer instructions, and when the computer instructions are executed by the processor, the processor is caused to perform the method described in the first aspect.
[0020] According to a fourth aspect of the present application, a non-transitory computer storage medium is provided, storing a computer program, which, when executed by multiple processors, enables the processors to execute the method described in the first aspect.
[0021] According to the method and device for generating an image search portal provided in this application, an interactive image search process is implemented, which can automatically identify images and render image search portals, helping users to search for the same item with one click. This not only simplifies the user's operating process, but also expands the image search scope to various different platforms, significantly improving the universality and practicality of the search, and meeting the user's needs for an efficient and convenient shopping experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without exceeding the scope of protection required by this application.
[0023] Figure 1 This is a flowchart of a method for generating an image search portal according to an embodiment of the present application.
[0024] Figure 2 It is a schematic diagram of a device for generating an image search portal according to an embodiment of the present application.
[0025] Figure 3 This is a structural diagram of an electronic device provided by this application. DETAILED DESCRIPTION
[0026] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without making creative efforts are within the scope of protection of this application.
[0027] Overall, the solution of this application first obtains the current position of the mouse on the screen through mouse movement events, identifies the target image element through image element screening and matching, and then creates and displays an image search entry corresponding to the target image element. Finally, when the user clicks on the image search entry, the image search is triggered and the corresponding products are returned.
[0028] According to one aspect of the present application, a method for generating an image search portal is provided. Figure 1 This is a flow chart of a method for generating an image search entry according to an embodiment of the present application. Figure 1 As shown, the method includes the following steps:
[0029] Step S101, monitoring mouse movement events;
[0030] Step S102 : Based on the monitored mouse movement event, the current position of the mouse on the screen is acquired in real time, and the highest-level HTML element at the current position is determined as the target element.
[0031] In one embodiment, a script can be embedded and executed in a web page using a browser plug-in called Content Script. In a specific embodiment, the web page can be the entire HTML (HyperText Markup Language) document that the user is currently browsing. The mousemove event of the web page can be used to continuously monitor the user's mouse movements on the web page. Whenever the mouse moves, an event handler is triggered to capture the current mouse position (e.g., coordinates on the screen) and the top-level element at the mouse location.
[0032] Step S103: Determine a target image element related to the target element and / or the current position.
[0033] In one embodiment, a determination is made as to whether the target element of a mouse move event is a valid image element. If so, the target element of the mouse move event is determined as the target image element. If not, the target element of the mouse move event is used as a starting point, and outer image elements are searched for in a preset order (e.g., by traversing the parent element chain upward) in a predetermined order (a first predetermined order). The first outer image element belonging to a valid image element is determined as the target image element. This method of searching for the target image element is referred to as "upward search based on the event target."
[0034] In a specific embodiment, the first preset sequence may include the following process:
[0035] 1. Determine whether the target element is a valid image element. If so, determine the target element as the target image element; if not, proceed to step 2;
[0036] 2. Find the parent element of the target element, search for the elements under the parent element, and determine whether they are valid image elements in turn. The first element found is determined as the target image element. If none of the elements under the parent element are valid image elements, proceed to step 3.
[0037] 3. Find the parent element of the parent element of the target element, search for the elements under the parent element, and determine whether they are valid image elements in turn. The first element found is determined as the target image element; if none of the elements under the parent element are valid image elements, continue searching in the above order.
[0038] The first preset order is to search for outer layer image elements starting from the target element, and determine the first valid image element as the target image element. When searching for the target image element according to the first preset order, the number of levels or the number of traversal of outer layer image elements can be set to avoid traversal of too deep levels.
[0039] In an optional embodiment, step S103 may include:
[0040] Determine whether the target element is a valid image element;
[0041] In a case where the target element is a valid picture element, determining the target element as the target picture element;
[0042] In the case that the target element is not a valid picture element, searching for outer picture elements in a first preset order with the target element as the starting point; and
[0043] The first outer layer picture element that is a valid picture element found is determined as the target picture element.
[0044] In another embodiment, determining the target picture element related to the current position includes: determining valid picture elements in the current page, and then, among the valid picture elements, determining the picture elements that match the current position in a preset order (a second preset order), and determining the first picture element among the valid picture elements that matches the current position as the target picture element. As for how to judge whether "the picture element matches the current position", the picture will involve a coordinate area (for example, a rectangular area), and the current position is a coordinate point. Generally speaking, as long as the area of the picture contains the coordinate point of the current position, it can be considered that the picture element matches the current position. The above method of searching for target picture elements can be called "global picture element screening".
[0045] In a specific embodiment, the second preset order can be a depth-first traversal combined with a pre-order traversal, wherein the depth-first traversal can be a method of searching the tree structure in the deepest possible path, and the pre-order traversal strategy can be to first visit the root node and then visit each child node in turn in a specific order.
[0046] In an optional embodiment, step S103 may include:
[0047] Determine the valid image elements in the current page;
[0048] Determining, among the valid picture elements, a picture element matching the current position according to a second preset order; and
[0049] The first picture element among the valid picture elements that matches the current position is determined as the target picture element.
[0050] In another embodiment, a target picture element related to the target element and the current position can be determined. In this embodiment, the target picture element is determined by combining the "upward search based on event target" method and the "global picture element screening" method. In a specific embodiment, the process of determining the target picture element may include: starting from the target element, searching for outer picture elements according to a third preset order; determining a first valid picture element among the target element and the outer picture elements to form a first picture list; determining a second valid picture element in the current page; determining a picture element that matches the current position of the mouse among the second valid picture elements to form a second picture list; traversing the picture elements in the second picture list in sequence, comparing them with the picture elements in the first picture list, and determining the first picture element in the second picture list that matches the picture element in the first picture list as the target picture element.
[0051] Among them, the dual-path image element screening and matching of target image elements is determined by combining the "upward search based on event targets" method and the "global image element screening" method. Compared with the single-path determination method, it can improve the accuracy and robustness of image element matching.
[0052] In a specific embodiment, the third preset sequence may include the following process:
[0053] 1. Determine whether the target element is a valid image element. If so, put the target element into the first image list; if not, go to step 2;
[0054] 2. Find the parent element of the target element, search for the elements under the parent element, determine whether they are valid image elements in turn, and put the elements that are valid image elements into the first image list; if the traversal level is set to 2, proceed to step 3;
[0055] 3. Find the parent element of the target element's parent element, search for the elements under that parent element, and determine if they are valid image elements. Place the elements that are valid image elements into the first image list. If the set traversal level is greater than 2, continue searching in the same order as above until the set traversal level is reached.
[0056] The third preset order can be to search for outer image elements starting from the target element, traverse the outer image elements of a preset hierarchy, and place the elements that are valid image elements in the first image list. When searching for the target image element according to the third preset order, the number of hierarchical levels or the number of traversed outer image elements can be set to avoid traversing too deep hierarchical levels. In one specific embodiment, the images in the first image sequence can be sorted according to the hierarchy, for example, images with higher hierarchical levels are ranked first.
[0057] In one embodiment, the second valid image element can be determined in the current page according to a fourth preset order. In a specific embodiment, the fourth preset order can be a depth-first traversal combined with a pre-order traversal, wherein the depth-first traversal can be a method of searching the tree structure in the deepest possible path first, and the pre-order traversal strategy can be to first visit the root node and then visit each child node in turn in a specific order. After determining the second valid image element, the second valid image element can be placed in the second image list. In a specific embodiment, the images in the second image sequence can be sorted according to the order of the HTML structure.
[0058] In one embodiment, after determining the first image list and the second image list, the two lists are compared, and matching image elements are determined as target image elements. In a specific embodiment, the image elements in the second image list can be sequentially traversed and compared with the image elements in the first image list, and the first image element in the second image list that matches the image element in the first image list can be determined as the target image element.
[0059] For example, the first image list obtained through "Event-Target-Based Upward Search" includes images [B, C, D], while the second image list obtained through "Global Image Element Filtering" includes images [A, B, C]. The second image list can be sequentially traversed, and each image is checked to see if it is in the first image list. Specifically, if the first image A in the second image list does not exist in the first image list, it does not match the match. However, if the second image B in the second image list does exist in the first image list, it does match the match. Image B is the result of this match and is the target image element.
[0060] In an optional embodiment, step S103 may include:
[0061] Taking the target element as a starting point, searching for outer layer image elements according to a third preset order;
[0062] Determining a first valid picture element from the target element and the outer picture elements to form a first picture list;
[0063] determining a second valid image element in the current page according to a fourth preset order;
[0064] Determining a picture element matching the current position of the mouse in the second valid picture elements to form a second picture list; and
[0065] The picture elements in the second picture list are traversed in sequence, compared with the picture elements in the first picture list, and the first picture element in the second picture list that matches the picture element in the first picture list is determined as the target picture element.
[0066] In one embodiment, a valid picture element determination module may be used to determine whether an element is a valid picture element. The determination may include determining whether the element type is a picture type and determining whether the picture is valid.
[0067] In a specific embodiment, the module is used to determine whether any DOM (Document Object Model) element on a page is a "picture" visually recognized by the user. Qualified element types include, but are not limited to: Label, <picture>Label, <video>The cover image of a tag, any element with the CSS (CascadingStyle Sheets) background-image attribute, etc.
[0068] After confirming the element type, you need to further determine whether the image is valid, which can include:
[0069] Size determination: Images that are too small are generally treated as icons and are not considered for image search. Furthermore, images that are too small will not have enough space to be included in the image search entry. Therefore, it is necessary to set an appropriate image size threshold to exclude elements that do not meet the image size threshold.
[0070] Visibility determination: The element must be visible to the user. The visibility of an element is affected by its own CSS style, including but not limited to display, visibility, opacity and other attributes. A comprehensive judgment of these attributes is required to determine whether the element is visible, excluding elements that cannot be seen by the user;
[0071] Image content validity determination: Images are required to have a valid src link (image source) or dataUrl (a format that embeds data directly into a web page link URL), and elements with invalid content are excluded.
[0072] Step S104: Create and display a current image search entry corresponding to the target image element at a preset position.
[0073] In one embodiment, after confirming the target image element, an image search portal can be created. In a specific embodiment, the image search portal can be an image search button that is positioned at a preset position of the target image in a floating form. Based on common user usage habits and reference to the interaction methods of other image search plug-ins, the image search portal can be positioned in the upper left corner of the target image, which is more likely to attract the user's attention and reduce the impact on the user's normal browsing and use of the original web page.
[0074] In a specific embodiment, considering that users may have multiple plug-ins installed at the same time, there will be a problem of portal overlap, and it is necessary to improve the hierarchy and priority of the created image search portal to improve competitiveness. The coverage relationship of elements on the page is affected by two factors: hierarchy and position in the HTML document. This application sets the CSS z-index property (the property used to control the stacking order of elements in CSS) of the image search portal to the maximum value to ensure the hierarchy of the elements. At the same time, the position of the portal is dynamically monitored to ensure that during user interaction, the image search portal can always be located at the end of the HTML document. By combining the above two methods, it can be guaranteed that the image search portal is displayed first.
[0075] The Dom of the image search entry is generated by a plug-in and is already located in the HTML of the page. It is usually hidden by default. When it needs to be displayed, the plug-in will change the CSS style of this Dom to make it visible, and change its coordinate value (also CSS) to position it at the preset position of the required image (for example, the upper left corner). In the prior art, after the Dom of the image search entry is inserted into the HTML of the page, the position of this Dom in the HTML structure will not be modified subsequently (this is different from the coordinate modification caused by CSS, which is a matter of two dimensions). In this application, every time the user moves the mouse and decides to display the "image search entry" at the preset position of a certain image, it will be determined whether the "image search entry" Dom is at the end of the HTML document. If it is not at the end, the "image search entry" originally inserted into the HTML will be removed, and a new "image search entry" Dom will be inserted at the end of the HTML document to achieve the effect of "always being at the end of the HTML document".
[0076] This application can dynamically ensure the priority of the image search entrance on the page through preemptive rendering, thereby improving the competitiveness of product functions.
[0077] In an optional embodiment, step S104 may include:
[0078] Setting the CSS z-index property of the current image search entry to its maximum value; and
[0079] In response to the current image search entry not being located at the end of the HTML document, the last inserted image search entry is deleted, and the current image search entry is inserted at the end of the HTML document.
[0080] Step S105 , in response to clicking the image search entry, reading the corresponding target image content, and transmitting the corresponding target image content to the server.
[0081] In one embodiment, when a user clicks on the image search entry (image search button), the system reads the current target image content and passes it to the server through the interface. After the server returns a list of similar products, the plug-in renders the results.
[0082] According to another aspect of the present application, a device for generating an image search portal is provided. Figure 2 Schematic diagram of a device for generating a picture search portal according to an embodiment of the present application. Figure 2 As shown, the device includes: a monitoring module 201 for monitoring mouse movement events; a first determination module 202 for obtaining the current position of the mouse on the screen in real time based on the monitored mouse movement events, and determining the highest-level HTML element at the current position as the target element; a second determination module 203 for determining a target image element related to the target element and / or the current position; a creation and display module 204 for creating and displaying a current image search entry corresponding to the target image element at a preset position; a reading and delivery module 205 for reading the corresponding target image content in response to clicking the image search entry, and delivering the corresponding target image content to the server.
[0083] In an optional embodiment, the second determining module 203 may be configured to:
[0084] Determine whether the target element is a valid image element;
[0085] In a case where the target element is a valid picture element, determining the target element as the target picture element;
[0086] In the case that the target element is not a valid picture element, searching for outer picture elements in a first preset order with the target element as the starting point; and
[0087] The first outer layer picture element that is a valid picture element found is determined as the target picture element.
[0088] In an optional embodiment, the second determining module 203 may be configured to:
[0089] Determine the valid image elements in the current page;
[0090] Determining, among the valid picture elements, a picture element matching the current position according to a second preset order; and
[0091] The first picture element among the valid picture elements that matches the current position is determined as the target picture element.
[0092] In an optional embodiment, the second determining module 203 may also be configured to:
[0093] Taking the target element as a starting point, searching for outer layer image elements according to a third preset order;
[0094] Determining a first valid picture element from the target element and the outer picture elements to form a first picture list;
[0095] determining a second valid image element in the current page according to a fourth preset order;
[0096] Determining a picture element matching the current position of the mouse in the second valid picture elements to form a second picture list; and
[0097] The picture elements in the second picture list are traversed in sequence, compared with the picture elements in the first picture list, and the first picture element in the second picture list that matches the picture element in the first picture list is determined as the target picture element.
[0098] In an optional embodiment, the create display module 204 can be used to:
[0099] Setting the CSS z-index property of the current image search entry to its maximum value; and
[0100] In response to the current image search entry not being located at the end of the HTML document, the last inserted image search entry is deleted, and the current image search entry is inserted at the end of the HTML document.
[0101] In an alternative embodiment, Figure 2 The method for the device to determine whether an element is a valid picture element includes:
[0102] Determine whether the element to be determined is of the image type; and
[0103] In the case that the element to be determined is of a picture type, whether the element to be determined is a valid picture element is determined by using a size dimension, a feasibility dimension, and a content validity dimension.
[0104] The elements to be determined may include a target element, a DOM element in the current page, and an outer layer image element that is searched in a preset order starting from the target element.
[0105] According to the method and device for generating the image search portal provided by this application, an interactive image search process is implemented, which can automatically identify images and render image search portals, helping users to search for the same item with one click. This not only simplifies the user's operating process, but also expands the scope of image search to various different platforms, significantly improving the universality and practicality of the search, and meeting the user's demand for an efficient and convenient shopping experience. In this application, the accuracy of the target image judgment is improved by comparing and matching the valid image elements that meet the conditions on the page through two different paths. At the same time, through a preemptive rendering method, the priority of the image search button on the page is dynamically guaranteed, thereby improving the competitiveness of product functions.
[0106] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0107] It should be noted that for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that this application is not limited by the order of the actions described, because according to this application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all optional embodiments, and the actions and modules involved are not necessarily required by this application.
[0108] In the several embodiments provided in this application, it should be understood that the disclosed devices can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical connection or other forms.
[0109] See Figure 3 , Figure 3 An electronic device is provided, comprising a processor and a memory. The memory stores computer instructions or one or more programs. When the computer instructions or one or more programs are executed by the processor, the processor executes the computer instructions to achieve the following Figure 1 The method and refinement scheme shown.
[0110] It should be understood that the above-described device embodiments are merely illustrative, and the devices disclosed herein may also be implemented in other ways. For example, the division of units / modules described in the above-described embodiments is merely a logical functional division, and actual implementations may employ alternative divisions. For example, multiple units, modules, or components may be combined or integrated into another system, or some features may be omitted or not implemented.
[0111] In addition, unless otherwise specified, the functional units / modules in the various embodiments of the present invention may be integrated into a single unit / module, each unit / module may exist physically separately, or two or more units / modules may be integrated together. The aforementioned integrated units / modules may be implemented in the form of hardware or software program modules.
[0112] If the integrated unit / module is implemented in hardware, the hardware may be a digital circuit, an analog circuit, or the like. The physical implementation of the hardware structure includes, but is not limited to, transistors, memristors, and the like. Unless otherwise specified, the processor or chip may be any appropriate hardware processor, such as a CPU, GPU, FPGA, DSP, and ASIC. Unless otherwise specified, the on-chip cache, off-chip memory, and storage may be any appropriate magnetic storage medium or magneto-optical storage medium, such as resistive random access memory (RRAM), dynamic random access memory (DRAM), static random access memory (SRAM), enhanced dynamic random access memory (EDRAM), high-bandwidth memory (HBM), hybrid memory cube (HMC), and the like.
[0113] If the integrated unit / module is implemented in the form of a software program module and sold or used as an independent product, it can be stored in a computer-readable memory. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a memory, including a number of instructions for enabling a computer electronic device (which can be a personal computer, a server or a network electronic device, etc.) to perform all or part of the steps of the method described in each embodiment of the present disclosure. The aforementioned memory includes: various media that can store program codes, such as a U disk, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.
[0114] The embodiment of the present application further provides a computer-readable storage medium storing one or more computer programs, which, when executed by multiple processors, causes the processors to execute the following Figure 1 The method and refinement scheme shown.
[0115] An embodiment of the present application further provides a computer program product, comprising a computer program, which enables the computer to execute the method of any of the above embodiments when the computer program is run on a computer.
[0116] References to features, advantages, or similar language throughout this specification do not imply that all features and advantages achievable with this solution are included or embodied in any single implementation thereof. Rather, language referring to features and advantages is understood to mean that a specific feature, advantage, or characteristic described in connection with an embodiment is included in at least one embodiment of this solution. Therefore, discussions of features, advantages, and similar language throughout this specification may, but do not necessarily, refer to the same embodiment.
[0117] Furthermore, the features, advantages, and characteristics of the present invention may be combined in any suitable manner in one or more embodiments. Based on the description herein, one of ordinary skill in the relevant art will recognize that the present invention may be practiced without one or more of the specific features or advantages of a particular embodiment. In other cases, additional features and advantages may be realized in a particular embodiment that is not presented in all embodiments of the present invention.
[0118] The embodiments of the present application are described in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only intended to help understand the method and core ideas of the present application. At the same time, changes or modifications made by those skilled in the art based on the ideas of the present application, the specific implementation methods, and the scope of application of the present application, all fall within the scope of protection of the present application. In summary, the contents of this specification should not be construed as limiting the present application.< / video> < / picture>
Claims
1. A method for generating an image search portal, characterized in that: include: Listen for mouse movement events; Based on the monitored mouse movement event, the current position of the mouse on the screen is obtained in real time, and the highest-level HTML element at the current position is determined as the target element; determining a target image element related to the target element and / or the current position; Create and display a current image search entry corresponding to the target image element at a preset position; as well as In response to clicking the image search entry, the corresponding target image content is read and transmitted to the server.
2. The method according to claim 1, wherein The determining of a target image element related to the target element and / or the current position includes: Determine whether the target element is a valid image element; In a case where the target element is a valid picture element, determining the target element as the target picture element; In the case that the target element is not a valid picture element, searching for outer picture elements in a first preset order with the target element as the starting point; and The first outer layer picture element that is a valid picture element found is determined as the target picture element.
3. The method according to claim 2, wherein The determining whether the target element is a valid picture element includes: Determine whether the target element is of picture type; and In the case that the target element is of picture type, whether the target element is a valid picture element is determined by using a size dimension, a feasibility dimension, and a content validity dimension.
4. The method according to claim 1, wherein The determining of a target image element related to the target element and / or the current position includes: Determine the valid image elements in the current page; Determining, among the valid picture elements, a picture element matching the current position according to a second preset order; and The first picture element among the valid picture elements that matches the current position is determined as the target picture element.
5. The method according to claim 4, wherein Determining a valid image element in the current page includes: Determine whether the DOM element in the current page is of image type; and In the case that the DOM element is of a picture type, whether the DOM element is a valid picture element is determined by using a size dimension, a feasibility dimension, and a content validity dimension.
6. The method according to claim 1, wherein The determining of a target image element related to the target element and / or the current position includes: Taking the target element as a starting point, searching for outer layer image elements according to a third preset order; Determining a first valid picture element from the target element and the outer picture elements to form a first picture list; determining a second valid image element in the current page according to a fourth preset order; Determining a picture element matching the current position of the mouse in the second valid picture elements to form a second picture list; and The picture elements in the second picture list are traversed in sequence, compared with the picture elements in the first picture list, and the first picture element in the second picture list that matches the picture element in the first picture list is determined as the target picture element.
7. The method according to claim 6, wherein The determining of a first valid picture element among the target element and the outer picture element includes: Determining whether the target element and the outer picture element are of picture type; and In the case that the target element and the outer picture element are of picture type, whether the target element and the outer picture element are valid picture elements is determined through a size dimension, a feasibility dimension, and a content validity dimension.
8. The method according to claim 6, wherein Determining the second valid image element in the current page according to the fourth preset order includes: determining, according to a fourth preset order, whether the DOM element in the current page is of a picture type; and In the case where the DOM element is of the picture type, determining whether the DOM element is a valid picture element through the size dimension, the feasibility dimension, and the content validity dimension; The fourth preset order includes a depth-first traversal combined with a pre-order traversal.
9. The method according to claim 1, wherein The step of creating and displaying a current image search entry corresponding to the target image element at a preset position includes: Setting the CSS z-index property of the current image search entry to its maximum value; and In response to the current image search entry not being located at the end of the HTML document, the last inserted image search entry is deleted, and the current image search entry is inserted at the end of the HTML document.
10. The method according to claim 1, wherein The preset position includes the upper left corner of the target image corresponding to the target image element.
11. A device for generating an image search portal, characterized in that: include: Monitoring module, used to monitor mouse movement events; A first determination module is configured to obtain the current position of the mouse on the screen in real time based on the monitored mouse movement event, and determine the highest-level HTML element at the current position as the target element; A second determining module, configured to determine a target image element related to the target element and / or the current position; Creating a display module, used to create and display a current image search entry corresponding to the target image element at a preset position; as well as The reading and transmitting module is used to read the corresponding target image content in response to clicking the image search entrance, and transmit the corresponding target image content to the server.
12. An electronic device, characterized in that: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the method according to any one of claims 1 to 10 when executing the computer program in the memory.
13. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 10 is implemented.
Citation Information
Patent Citations
Vision-based web page extracting method
CN102253979A
Processing method for showing webpage image information and electronic equipment for showing webpage image information
CN105260383A
Information searching method and device
CN106909577A
Method and a device for identifying a visible picture in a webpage
CN109522502A
Webpage processing method and related product
CN110020337A