Method, device, electronic device and storage medium for page screenshot

Abstract

The application discloses a page screenshot method and device, electronic equipment and storage medium, and relates to the technical field of data processing. A specific embodiment of the method comprises the following steps: in response to a first instruction of a user for a current page, activating a monitoring mechanism, identifying event information of a target object in the current page, and determining a target element set corresponding to the current page based on the event information, wherein the monitoring mechanism is used for monitoring the interactive events of the target object in the current page; in response to a second instruction of the user for the current page, obtaining attribute information of each target element in the target element set, and generating corresponding image data based on the attribute information. The embodiment can solve the problem that the screenshot efficiency and accuracy are easily reduced due to inaccurate screenshot region boundaries because of manual dragging for selecting the screenshot region.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to a method, apparatus, electronic device, and storage medium for taking screenshots of web pages. Background Technology

[0002] In many scenarios, displaying web page content through browsers is a common method. Users can take screenshots of the page content as needed to capture or record it. One technology allows users to use the browser's built-in screenshot function, dragging the mouse to draw a rectangular screenshot area. However, this method relies on manual mouse dragging to select the screenshot area, which can easily lead to screenshots that are too large or too small. Especially for complex pages, inaccurate screenshot boundaries can reduce efficiency and accuracy. Summary of the Invention

[0003] In view of this, embodiments of the present invention provide a method, apparatus, electronic device, and storage medium for taking screenshots, which can solve the problem that relying on manually dragging the mouse to select the screenshot area can easily reduce the efficiency and accuracy of screenshots due to inaccurate screenshot area boundaries.

[0004] To achieve the above objectives, according to one aspect of the present invention, a method for taking screenshots of a webpage is provided.

[0005] A method for taking a screenshot of a webpage according to an embodiment of the present invention includes: In response to the user's first instruction on the current page, a listening mechanism is activated to identify the event information of the target object on the current page, and to determine the target element set corresponding to the current page based on the event information. The listening mechanism is used to listen for the interaction events of the target object on the current page. In response to the user's second instruction for the current page, the attribute information of each target element in the target element set is obtained, and corresponding image data is generated based on the attribute information.

[0006] In one embodiment, after determining the target element set corresponding to the current page based on the event information, the method further includes: Obtain the boundary position of each target element, and determine the visual boundary based on the boundary position; The preset prompt style is rendered based on the visual boundary.

[0007] In yet another embodiment, obtaining the boundary positions of each of the target elements includes: For each target element, in response to the target element belonging to a preset type, the element structure tree of the current page is obtained, the parent element corresponding to the target element is queried based on the element structure tree, the boundary position of the parent element is obtained and determined as the boundary position of the target element; in response to the target element not belonging to the preset type, the boundary position of the target element is obtained.

[0008] In yet another embodiment, prior to responding to the user's second instruction regarding the current page, the method further includes: Get the size of the preset operation control; The target position is determined based on the visual boundary and the control size, and the operation control is rendered at the target position; The second user instruction is received based on the operation control.

[0009] In yet another embodiment, determining the target position based on the visual boundary and the control size includes: A set of candidate locations is determined based on the preset positional relationships, the size of the control, and the visual boundaries; Obtain the visible area of ​​the current page; The candidate locations belonging to the visible area of ​​the page are selected from the candidate location set and determined as the target locations.

[0010] In yet another embodiment, obtaining the attribute information of each target element in the target element set includes: Obtain the element structure tree of the current page, determine the element node corresponding to each target element in the target element set and the child node associated with each element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

[0011] To achieve the above objectives, according to another aspect of the present invention, an apparatus for taking screenshots of web pages is provided.

[0012] An apparatus for taking a screenshot according to an embodiment of the present invention includes: A determining unit is used to respond to a user's first instruction on the current page, activate a listening mechanism, identify event information of the target object on the current page, and determine a set of target elements corresponding to the current page based on the event information, wherein the listening mechanism is used to listen to the interaction events of the target object on the current page; The generation unit is configured to respond to the user's second instruction for the current page, obtain the attribute information of each target element in the target element set, and generate corresponding image data based on the attribute information.

[0013] In one embodiment, the determining unit is further configured to obtain the boundary position of each target element and determine the visual boundary based on the boundary position; The device further includes: The rendering unit is used to render a preset prompt style based on the visual boundary.

[0014] In yet another embodiment, the determining unit is specifically used for: For each target element, in response to the target element belonging to a preset type, the element structure tree of the current page is obtained, the parent element corresponding to the target element is queried based on the element structure tree, the boundary position of the parent element is obtained and determined as the boundary position of the target element; in response to the target element not belonging to the preset type, the boundary position of the target element is obtained.

[0015] In yet another embodiment, the apparatus further includes: The acquisition unit is used to obtain the size of the preset operation control; The rendering unit is further configured to determine the target position based on the visual boundary and the control size, and render the operation control at the target position; The receiving unit is used to receive the second user instruction based on the operation control.

[0016] In yet another embodiment, the rendering unit is specifically used for: A set of candidate locations is determined based on the preset positional relationships, the size of the control, and the visual boundaries; Obtain the visible area of ​​the current page; The candidate locations belonging to the visible area of ​​the page are selected from the candidate location set and determined as the target locations.

[0017] In yet another embodiment, the generating unit is specifically used for: Obtain the element structure tree of the current page, determine the element node corresponding to each target element in the target element set and the child node associated with each element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

[0018] To achieve the above objectives, according to another aspect of the present invention, an electronic device is provided.

[0019] An electronic device according to an embodiment of the present invention includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the page screenshot method provided in the embodiment of the present invention.

[0020] To achieve the above objectives, according to another aspect of the present invention, a computer-readable medium is provided.

[0021] An embodiment of the present invention provides a computer-readable medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the page screenshot method provided in the embodiment of the present invention.

[0022] To achieve the above objectives, according to another aspect of the present invention, a computer program product is provided.

[0023] A computer program product according to an embodiment of the present invention includes a computer program that, when executed by a processor, implements the page screenshot method provided in the embodiment of the present invention.

[0024] One embodiment of the above invention has the following advantages or beneficial effects: In this embodiment of the invention, in response to a user's first instruction on the current page, a listening mechanism can be activated to monitor the interaction events of the target object on the current page, thereby identifying the event information of the target object and determining the corresponding set of target elements. After receiving a second instruction from the user on the current page, the attribute information of each target element in the target element set can be obtained, and then the corresponding image data can be generated. In this embodiment of the invention, by monitoring the interaction events of the target object on the current page, the corresponding set of target elements is determined, and then the image data to be captured by the user is generated according to the attribute information of each target element. This avoids the problem of inaccurate area selection caused by manually dragging the mouse to select the screenshot area, thus improving the efficiency and accuracy of page screenshots. Furthermore, in this embodiment of the invention, the image data is generated by the attribute information corresponding to the target elements, so that the generated image data includes comprehensive element content. Especially in scenarios where the page content is displayed through a scrolling container, there is no need to manually control the page content to scroll for screenshotting; image data including comprehensive element content can be directly generated, improving the efficiency of page screenshots.

[0025] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0026] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein: Figure 1 This is a schematic diagram of the main process of a page screenshot method according to an embodiment of the present invention; Figure 2 This is a schematic diagram of a system structure of a page screenshot system according to an embodiment of the present invention; Figure 3 This is a schematic diagram of another main process of the page screenshot method according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the main units of a page screenshot device according to an embodiment of the present invention; Figure 5 This is an exemplary system architecture diagram in which embodiments of the present invention can be applied; Figure 6 This is a schematic diagram of the structure of a computer system suitable for implementing embodiments of the present invention. Detailed Implementation

[0027] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0028] It should be noted that, unless otherwise specified, the embodiments and features described in this invention can be combined with each other. The acquisition, transmission, storage, use, and processing of data in this application comply with relevant national laws and regulations. In the embodiments of this application, certain existing industry solutions such as software, components, and models may be mentioned. These should be considered exemplary, intended only to illustrate the feasibility of implementing the technical solution of this application, and do not imply that the applicant has already used or necessarily used such solutions.

[0029] This invention provides a method for taking screenshots of web pages, which can be used in scenarios where a page is displayed in a browser. Specifically, the method for taking screenshots can be implemented using a page screenshot system, plugin, component, or software program. This invention will illustrate the method using a page screenshot plugin as an example.

[0030] It should be noted that when the browser starts or the page finishes loading, the preset page screenshot plugin can be automatically loaded into the browser, and the basic initialization of the page screenshot plugin itself can be completed, such as registering the listening mechanism, registering the shortcut key listening, registering the toolbar control click event, etc., and the life cycle of the page screenshot can be managed to facilitate the execution of the page screenshot method in the embodiments of the present invention.

[0031] This invention provides a method for taking a screenshot of a webpage, which can be executed by a webpage screenshot plugin, such as... Figure 1 As shown, the method includes the following steps.

[0032] S101: In response to the user's first instruction on the current page, activate the listening mechanism, identify the event information of the target object on the current page, and determine the set of target elements corresponding to the current page based on the event information.

[0033] The listening mechanism is used to monitor the interaction events of the target object on the current page. By monitoring these interaction events, the event information of the target object can be obtained, thereby determining the corresponding set of target elements. The target object refers to the object used by the user to interact with the current page, which can include the mouse, the user's finger (e.g., in a scenario where the current page is displayed on a touchscreen and the user selects content by moving their finger), and the user's voice (e.g., in a scenario where the user selects content by speaking). Interaction events refer to events triggered by selecting content to be captured on the current page, and can include various types, such as mouse selection (mouse click, movement, etc.) events, user finger selection (e.g., finger click, movement, etc.) events, and user voice selection events. In this embodiment of the invention, the target object is the mouse, and the interaction event is the mouse movement event. When the user controls the mouse to move on the current page, a movement event can be determined to have occurred, i.e., a mouse movement event.

[0034] Users can view web pages and other content through the browser. When a user needs to capture content on the current page while viewing it, they can enter a first command for that page. This first command indicates the user's intention to take a screenshot, initiating the screenshot preparation process, which may include determining the content to be captured. The first command can be entered in various ways. For example, input controls or icons for the first command can be set in the browser's toolbar, allowing users to send the command by clicking them; alternatively, keyboard input commands can be pre-set, allowing users to enter the command via the keyboard on the browser's current page; or users can enter the first command via voice, preset keyboard shortcuts, etc.

[0035] In this embodiment of the invention, after detecting a mouse movement event, the corresponding set of target elements can be determined through bubbling, capturing, or other mechanisms. Event information can represent the event information of the movement event when it is detected, such as a MouseEvent object. Through bubbling or other mechanisms, the target elements corresponding to each movement event can be determined based on the event information, thus deriving the set of target elements, i.e., the elements corresponding to the content the user wants to capture. The event information can include mouse position information and the event source element. Mouse position information can include the coordinates of the mouse relative to the currently visible area of ​​the page, or the distance the mouse has moved relative to the previous movement event. The event source element can represent the element that first triggered the movement event.

[0036] It should be noted that, in this embodiment of the invention, the target element set, i.e., the elements corresponding to the content the user wants to capture, is determined by listening to movement events. Therefore, a page element listening mechanism can be pre-set and triggered after receiving the first instruction. The page element listening mechanism can include a movement event listening mechanism and the process of determining the corresponding target element set.

[0037] To prompt the user about the selected screenshot content, a prompt style can be displayed in the visual area of ​​each target element in the target element set. Specifically, in this embodiment of the invention, the following can also be performed: obtaining the boundary position of each target element, determining the visual boundary based on the boundary position, and rendering a preset prompt style based on the visual boundary.

[0038] The boundary position of a target element can be obtained through its attribute information. Target elements with the same or connected boundary positions can be merged to obtain the boundary position corresponding to the target element set. Then, a preset tooltip style is rendered based on this boundary position. Tooltip styles can include various types, specifically highlight styles, such as rendering a highlight style at the boundary position or creating a highlight layer above the area enclosed by the boundary position.

[0039] It should be noted that rendering highlight styles at the boundary can be achieved by adding an outline style to the CSS (Cascading Style Sheets) of the corresponding target element.

[0040] In one implementation, some target elements do not have explicit boundaries, meaning their boundary positions cannot be obtained. In this case, the parent element of the target element can be found through the element structure tree, and the boundary position of the parent element can be used to determine the boundary position of the target element. Specifically, this can be done as follows: for each target element, if the target element belongs to a preset type, obtain the element structure tree of the current page, query the parent element corresponding to the target element based on the element structure tree, obtain the boundary position of the parent element, and determine it as the boundary position of the target element; if the target element does not belong to a preset type, obtain the boundary positions of each target element.

[0041] Preset types can represent elements without explicit boundaries, such as text nodes, inline elements, etc. The element structure tree is pre-stored, through which the parent element corresponding to the target element can be looked up, and then the smallest enclosing element corresponding to the target element can be determined. The boundary position of the target element is determined by the boundary position of the parent element.

[0042] It should be noted that after finding the parent element, you can also check if it has a clear boundary. If not, you can search for the parent element at the next higher level until you find a parent element with a clear boundary. Then, use this parent element with a clear boundary as the smallest enclosing element of the target element, and determine its boundary position as the boundary position of the target element.

[0043] S102: In response to the user's second instruction for the current page, obtain the attribute information of each target element in the target element set, and generate the corresponding image data based on the attribute information.

[0044] The second instruction is a screenshot instruction, which is to take a screenshot of the content corresponding to the identified set of target elements. The second instruction can be input in various preset ways, such as via voice, preset keyboard shortcuts, preset icons, or controls. Attribute information can include the rendering level and style properties of the target elements. The rendering level indicates the order in which the target elements are rendered, and the style properties represent the specific styles of each target element, including geometric information and applied CSS styles, such as text, rectangle and background fill, borders and rounded corners, shadows and opacity, position coordinates, etc. In this step, the attribute information of each target element can be used to regenerate the corresponding image data according to the rendering method of the target element on the current page.

[0045] Specifically, to avoid missing any content selected by the user in the screenshot, the step of obtaining attribute information in this process can be performed as follows: obtain the element structure tree of the current page, determine the element node corresponding to each target element and the child nodes associated with the element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

[0046] An element structure tree represents the hierarchical structure of elements on a page. It can include the hierarchical relationships and attribute information of each element. For example, it can be a DOM (Document Object Model) tree, where the target element is a node in the element structure tree. For each target element, the element structure tree can be traversed recursively, starting from the target element, to determine the element node corresponding to the target element and its associated child nodes. This is the set of nodes belonging to the target element, which is equivalent to all the content included in the target element. Then, the attribute information of each element node and its child nodes in the target element set can be obtained. In this way, comprehensive attribute information can be obtained, achieving the goal of obtaining the complete content to be captured.

[0047] In this embodiment of the invention, the method of generating image data is not limited. For example, the target element can be redrawn based on attribute information and image data can be generated. Specifically, the target element can be redrawn on a Canvas and then the image data can be exported.

[0048] The method by which the target element is redrawn on the Canvas is not limited. For example, libraries such as html2canvas (an HTML to Canvas library) can be used to determine the drawing order and style based on attribute information and simulate rendering to the Canvas, thereby exporting complete image data.

[0049] It should be noted that, in this embodiment of the invention, the stack context logic of the browser can be simulated, and the drawing order of each element node and each child node can be determined according to the z-index (the z-axis property of the element), transparency, positioning properties, etc. in the attribute information, so as to ensure that the redrawn target element is consistent with the actual rendering of the current page.

[0050] In another implementation, to facilitate the input of the second command, an operation control for inputting the second command can be pre-set in this embodiment of the invention and displayed along the visual boundary of the rendering prompt style, allowing the user to directly input the second command through the operation control after determining the content of the selected screenshot. Therefore, before performing this step, the following can also be performed: obtaining the size of the preset operation control; determining the target position based on the visual boundary and the control size, and rendering the operation control at the target position; and receiving the second user command based on the operation control.

[0051] To facilitate user operation and avoid obstructing the area within the visual boundary, the control can be displayed along the visual boundary but outside of it. Therefore, the target position can be determined based on the visual boundary and the control size. For example, the target position can be any location of the control size along or outside the visual boundary. The target position can include coordinate information, i.e., the position coordinates in the rendering operation space.

[0052] In this embodiment of the invention, the positional relationship can also be preset to represent the relative position between the operation control and the visual boundary, so as to determine the target position by combining the visual boundary and the control size.

[0053] In some scenarios, the target location may exceed the visible area of ​​the current page, causing the rendered controls to not be fully displayed within the visible area, thus affecting the input of the second command. Therefore, in this embodiment of the invention, multiple positional relationships can be preset. In this step, multiple candidate locations, i.e., a candidate location set, can be determined based on each positional relationship. Then, these are filtered according to the visible area of ​​the page so that the determined target location can be fully displayed within the visible area of ​​the page. Therefore, determining the target location in this step can be performed as follows: determining the candidate location set based on preset positional relationships, control sizes, and visual boundaries; obtaining the visible area of ​​the current page; and filtering candidate locations belonging to the visible area of ​​the page from the candidate location set and determining them as the target location.

[0054] The preset positional relationships can include various options, such as the operation control being located at the top right corner, bottom right corner, or center at the bottom of the visual boundary. For each positional relationship, corresponding candidate positions can be identified. Then, it can be determined whether each candidate position belongs to the visible area of ​​the page, thus filtering out the candidate positions that do belong to the visible area and determining them as the target position. If multiple candidate positions are selected, any one can be chosen as the target position, or the priority of each positional relationship can be preset to determine the target position based on the priority of the positional relationships.

[0055] It should be noted that in this embodiment of the invention, the z-index of the operation control is set higher than that of all elements on the page to ensure interactivity.

[0056] In this embodiment of the invention, after obtaining the image data, it can be stored as a screenshot file in a preset format. The preset format may include PNG, JPEG, WebP, etc. For image data obtained through Canvas, it can be converted into a screenshot file in a preset format using either the toDataURL (a method that converts the currently drawn content on the canvas into a Data URL string containing image data) or the toBlob (a standard method that converts the Canvas drawing content into a binary large object (Blob)) method.

[0057] For screenshots, you can trigger the browser's download and save function to output the screenshot file. Specifically, you can create a temporary file... The `` element sets its `href` (hyperlink) to the URL of the converted screenshot file and its `download` attribute to the filename of the screenshot file (the screenshot file can be automatically generated, for example, a filename in the format "screenshot-target element ID-timestamp.png"). Triggering the click event of this hyperlink will download the screenshot file. After the download is complete, it can be deleted. Label.

[0058] It should be noted that after obtaining the image data, indicating that the page screenshot is complete, the screenshot mode can be automatically exited, and the normal interactive state of the current page can be restored. In this embodiment of the invention, the target element can specifically be a DOM element, and the element structure tree of the DOM element is pre-stored.

[0059] In some scenarios, the current page displays content through a scrolling view container. In related technologies, when a user takes a screenshot, if they want to select all the content to be captured, they need to manually scroll the current page content to perform the selection operation. However, in this embodiment of the invention, by listening to the interaction events of the target object on the current page, the corresponding set of target elements is determined. Then, image data is generated using the attribute information corresponding to each target element. Regardless of whether the content is currently displayed through a scrolling view container, the generated image data can include all the content to be captured. There is no need to manually control the page content to scroll for screenshotting; image data including all elements can be directly generated, improving the efficiency of page screenshotting.

[0060] In this embodiment of the invention, by listening to the interaction events of the target object on the current page, the corresponding set of target elements is determined, and then the image data to be captured by the user is generated according to the attribute information of each target element. This avoids the problem of inaccurate area selection caused by manually dragging the mouse to select the screenshot area, thereby improving the efficiency and accuracy of page screenshots.

[0061] The following is combined Figure 1 The illustrated embodiment provides a detailed description of the page screenshot plugin in this invention. Figure 2 The image shown is a schematic diagram of one type of page screenshot plugin structure.

[0062] like Figure 2As shown, the page screenshot plugin can include a screenshot plugin loading module, a listening module, a page element recognition engine, a tooltip style rendering module, an operation control rendering module, a Canvas drawing module, and a screenshot file output module. The screenshot plugin loading module automatically loads the page screenshot plugin when the browser starts, handling the initialization and lifecycle management of the screenshot function. The element listening module activates the listening mechanism upon receiving the first command, listening for interactive events and triggering the page element recognition engine. The page element recognition engine starts after the listening mechanism is activated, determining the corresponding target element in real time based on event information. The tooltip style rendering module renders a preset tooltip style after the target element is determined, displaying the visual boundaries of the target element. The operation control rendering module dynamically renders operation controls based on the visual boundaries of the target element, providing an input interface for the second command. The Canvas drawing module draws the content of the target element onto the Canvas and then exports the complete content image data from the Canvas. The screenshot file output module converts the image data into a screenshot file, which is then downloaded and saved through the browser.

[0063] It should be noted that the data processing principle in the embodiments of the present invention is the same as... Figure 1 The data processing principles in the illustrated embodiments are the same and will not be repeated here.

[0064] The following is combined Figure 1 The illustrated embodiments and Figure 2 The architecture shown illustrates the method for taking screenshots in this embodiment of the invention. Figure 3 As shown, the method includes the following steps.

[0065] S301: In response to the user's first instruction on the current page, activate the listening mechanism, identify the event information of the target object on the current page, and determine the set of target elements corresponding to the current page based on the event information.

[0066] S302: Obtain the boundary position of each target element, determine the visual boundary based on the boundary position, and render the preset prompt style based on the visual boundary.

[0067] S303: Obtain the size of the preset operation control; determine the target position based on the visual boundary and control size, and render the operation control at the target position.

[0068] S304: Receive second user instructions based on operation controls.

[0069] S305: In response to the user's second instruction for the current page, obtain the element structure tree of the current page, determine the element nodes corresponding to each target element in the target element set and the child nodes associated with each element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

[0070] S306: Generate corresponding image data based on attribute information.

[0071] It should be noted that the data processing principle in the embodiments of the present invention is the same as... Figure 1 The data processing principles in the illustrated embodiments are the same and will not be repeated here.

[0072] To address the problems existing in the prior art, embodiments of the present invention provide a page screenshot device 400, such as... Figure 4 As shown, the device 400 includes: The determining unit 401 is used to respond to the user's first instruction on the current page, activate the listening mechanism, identify the event information of the target object on the current page, and determine the target element set corresponding to the current page based on the event information, wherein the listening mechanism is used to listen to the interaction events of the target object on the current page; The generation unit 402 is used to respond to the user's second instruction on the current page, obtain the attribute information of each target element in the target element set, and generate corresponding image data based on the attribute information.

[0073] It should be understood that the manner in which embodiments of the present invention are implemented is different from the implementation method. Figure 1 The embodiments shown are the same and will not be described again here.

[0074] In one embodiment, the determining unit 401 is further configured to obtain the boundary position of each target element and determine the visual boundary based on the boundary position; The device 400 further includes: The rendering unit is used to render a preset prompt style based on the visual boundary.

[0075] In yet another embodiment, the determining unit 401 is specifically used for: For each target element, in response to the target element belonging to a preset type, the element structure tree of the current page is obtained, the parent element corresponding to the target element is queried based on the element structure tree, the boundary position of the parent element is obtained and determined as the boundary position of the target element; in response to the target element not belonging to the preset type, the boundary position of the target element is obtained.

[0076] In yet another embodiment, the device 400 further includes: The acquisition unit is used to obtain the size of the preset operation control; The rendering unit is further configured to determine the target position based on the visual boundary and the control size, and render the operation control at the target position; The receiving unit is used to receive the second user instruction based on the operation control.

[0077] In yet another embodiment, the rendering unit is specifically used for: A set of candidate locations is determined based on the preset positional relationships, the size of the control, and the visual boundaries; Obtain the visible area of ​​the current page; The candidate locations belonging to the visible area of ​​the page are selected from the candidate location set and determined as the target locations.

[0078] In yet another embodiment, the generation unit 402 is specifically used for: Obtain the element structure tree of the current page, determine the element node corresponding to each target element in the target element set and the child node associated with each element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

[0079] It should be understood that the manner in which embodiments of the present invention are implemented is different from the implementation method. Figure 1 , 3 The embodiments shown are the same and will not be described again here.

[0080] In this embodiment of the invention, by listening to the interaction events of the target object on the current page, the corresponding set of target elements is determined. Then, based on the attribute information of each target element, the image data that the user wants to capture is generated. This avoids the problem of inaccurate area selection caused by manually dragging the mouse to select the screenshot area, thus improving the efficiency and accuracy of page screenshots. Furthermore, by generating image data based on the attribute information corresponding to the target elements, this embodiment of the invention can ensure that the generated image data includes comprehensive element content. Especially in scenarios where page content is displayed through a scrolling container, there is no need to manually control the page content to scroll for screenshotting; image data including comprehensive element content can be directly generated, improving the efficiency of page screenshots.

[0081] According to embodiments of the present invention, an electronic device and a readable storage medium are also provided.

[0082] An electronic device according to an embodiment of the present invention includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to cause the at least one processor to perform the page screenshot method provided in the embodiment of the present invention.

[0083] Figure 5 An exemplary system architecture 500 is shown, in which the method or apparatus for taking screenshots according to embodiments of the present invention can be applied.

[0084] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, and 503, a network 504, and a server 505. Network 504 serves as the medium for providing communication links between terminal devices 501, 502, and 503 and server 505. Network 504 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0085] Users can use terminal devices 501, 502, and 503 to interact with server 505 via network 504 to receive or send messages, etc. Various client applications, such as browser clients, can be installed on terminal devices 501, 502, and 503.

[0086] Terminal devices 501, 502, and 503 can be various electronic devices with displays that support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0087] A 505 error can be caused by a server that provides various services. The server can analyze and process data such as received page requests and then send the page data back to the terminal device.

[0088] It should be noted that the page screenshot method provided in the embodiments of the present invention is generally executed by terminal devices 501, 502, and 503, and correspondingly, the page screenshot device is generally set in terminal devices 501, 502, and 503.

[0089] It should be understood that Figure 5 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0090] The following is for reference. Figure 6 It shows a schematic diagram of the structure of a computer system 600 suitable for implementing embodiments of the present invention. Figure 6 The computer system shown is merely an example and should not be construed as limiting the functionality and scope of use of the embodiments of the present invention.

[0091] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 602 or programs loaded from storage section 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of the system 600. The CPU 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0092] The following components are connected to I / O interface 605: an input section 606 including a keyboard, mouse, etc.; an output section 607 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to I / O interface 605 as needed. A removable medium 611, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 610 as needed so that computer programs read from it can be installed into storage section 608 as needed.

[0093] In particular, according to the embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 609, and / or installed from removable medium 611. When the computer program is executed by central processing unit (CPU) 601, it performs the functions defined above in the system of this invention.

[0094] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0095] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a unit, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0096] The units described in the embodiments of the present invention can be implemented in software or in hardware. The described units can also be located in a processor; for example, a processor can be described as including a determining unit and a generating unit. The names of these units do not necessarily limit the specific unit; for example, a determining unit can also be described as a "unit that determines functions."

[0097] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs that, when executed by the device, cause the device to perform the page screenshot method provided by the present invention.

[0098] In another aspect, the present invention also provides a computer program product, including a computer program that, when executed by a processor, implements the method for taking screenshots provided in the embodiments of the present invention.

[0099] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method of taking a screenshot of a page, characterized by, include: In response to the user's first instruction on the current page, a listening mechanism is activated to identify the event information of the target object on the current page, and to determine the target element set corresponding to the current page based on the event information. The listening mechanism is used to listen for the interaction events of the target object on the current page. In response to the user's second instruction on the current page, the attribute information of each target element in the target element set is obtained, and corresponding image data is generated based on the attribute information.

2. The method of claim 1, wherein, After determining the target element set corresponding to the current page based on the event information, the method further includes: Obtain the boundary position of each target element, and determine the visual boundary based on the boundary position; The preset prompt style is rendered based on the visual boundary.

3. The method of claim 2, wherein, Obtaining the boundary positions of each target element includes: For each target element, in response to the target element belonging to a preset type, the element structure tree of the current page is obtained, the parent element corresponding to the target element is queried based on the element structure tree, the boundary position of the parent element is obtained and determined as the boundary position of the target element; in response to the target element not belonging to the preset type, the boundary position of the target element is obtained.

4. The method of claim 2, wherein, Prior to responding to the user's second instruction regarding the current page, the method further includes: Get the size of the preset operation control; The target position is determined based on the visual boundary and the control size, and the operation control is rendered at the target position; The second user instruction is received based on the operation control.

5. The method of claim 4, wherein, Determining the target position based on the visual boundary and the control size includes: A set of candidate locations is determined based on preset positional relationships, the size of the control, and the visual boundaries; Obtain the visible area of ​​the current page; The candidate locations belonging to the visible area of ​​the page are selected from the candidate location set and determined as the target locations.

6. The method of claim 1, wherein, Obtain the attribute information of each target element in the target element set, including: Obtain the element structure tree of the current page, determine the element node corresponding to each target element in the target element set and the child node associated with each element node based on the element structure tree, and obtain the attribute information of each element node and each child node.

7. An apparatus for taking a screenshot of a page, the apparatus comprising: include: A determining unit is used to respond to a user's first instruction on the current page, activate a listening mechanism, identify event information of the target object on the current page, and determine a set of target elements corresponding to the current page based on the event information, wherein the listening mechanism is used to listen to the interaction events of the target object on the current page; The generation unit is configured to respond to the user's second instruction for the current page, obtain the attribute information of each target element in the target element set, and generate corresponding image data based on the attribute information.

8. An electronic device, comprising: include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-6.

9. A computer readable medium having stored thereon a computer program, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-6.

10. A computer program product comprising a computer program, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-6.

Images