CN115994009A - Page screenshot method and device - Google Patents

Page screenshot method and device Download PDF

Info

Publication number
CN115994009A
CN115994009A CN202211366871.6A CN202211366871A CN115994009A CN 115994009 A CN115994009 A CN 115994009A CN 202211366871 A CN202211366871 A CN 202211366871A CN 115994009 A CN115994009 A CN 115994009A
Authority
CN
China
Prior art keywords
attribute
dom node
node
coordinate
user
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211366871.6A
Other languages
Chinese (zh)
Inventor
仲伟林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Dingdao Zhilian Beijing Technology Co ltd
Original Assignee
Dingdao Zhilian Beijing Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Dingdao Zhilian Beijing Technology Co ltd filed Critical Dingdao Zhilian Beijing Technology Co ltd
Priority to CN202211366871.6A priority Critical patent/CN115994009A/en
Publication of CN115994009A publication Critical patent/CN115994009A/en
Pending legal-status Critical Current

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a page screenshot method and device, and relates to the field of computer application. The method comprises the following steps: when a user selects an area frame in a webpage, a first Dom node is created; determining the range of the region frame, and generating a webpage into a first image stream; creating a second Dom node according to the node attribute of the first Dom node; performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed; on the composite structure, a second Dom node currently displayed is generated as a second picture stream, which is used to characterize the region box. The invention realizes image selection in any area of the browser page, and fills the blank of the prior art; meanwhile, in the process of selecting the images, user operation is reduced, and user experience is improved.

Description

Page screenshot method and device
Technical Field
The present invention relates to the field of computer applications, and in particular, to a method and apparatus for capturing a page.
Background
Currently, when a user selects a desired image, the user usually uses a terminal device to select the image. Most terminal devices support an image selection function, for example, free selection of images is realized by using loaded software (windows screenshot, snicast screenshot tools), app applications (WeChat screenshot function) and the like.
In practical applications, the user may also want to freely select an image of a certain area in the browser page, similar to the existing text copying operation in the browser page. In general, the user can select images in a browser page by using screenshot software and an App application which are loaded by the terminal equipment.
However, in the above implementation, the user may also need to perform other operations (e.g., opening the third party software, applying, selecting after starting the third party software, applying, copying, saving as a separate file, etc.) to implement the selection of the image in the browser page. And in the process of selecting the image, the third party software and the application are in an unavailable state when other operations which are started in the current terminal equipment are started, and the starting state can be recovered by other operations until the process of highlighting the selected area is finished. The above-mentioned drawbacks cause great inconvenience to the user in use and low user experience.
Disclosure of Invention
In view of the above, the embodiment of the invention provides a method and a device for screenshot of a page, which realize image selection in any area of the existing browser page and make up for the blank of the prior art; meanwhile, in the process of selecting the image, the user operation is reduced, the states of other opened operations are not influenced, and the user experience is improved.
In a first aspect, an embodiment of the present invention provides a method for capturing a page, where the method is applied to an electronic device, and the electronic device opens and displays a web page, and the method includes:
when a user selects an area frame in the webpage, a first Dom node is created, so that the node attribute of the first Dom node represents the position attribute of the area frame;
determining the range of the region frame, and generating the webpage into a first image stream;
creating a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node;
performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed;
and generating the second Dom node currently displayed into a second picture stream on the composite structure, wherein the second picture stream is used for representing the region frame.
In a second aspect, an embodiment of the present invention provides a device for capturing a page, where the device is applied to an electronic device, and the electronic device opens and displays a web page, and the device includes:
The first creating unit is used for creating a first Dom node when a user selects an area frame in the webpage, so that the node attribute of the first Dom node represents the position attribute of the area frame;
the first generation unit is used for determining the range of the region frame and generating the webpage into a first picture stream;
a second creating unit, configured to create a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node;
the processing unit is used for carrying out background positioning processing on the first image stream and the second Dom node by utilizing the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed;
and the second generating unit is used for generating the second Dom node currently displayed into a second picture stream on the composite structure, wherein the second picture stream is used for representing the region frame.
In a third aspect, an embodiment of the present invention provides an electronic device, including: the device comprises a shell, a processor, a memory, a circuit board and a power circuit, wherein the circuit board is arranged in a space surrounded by the shell, and the processor and the memory are arranged on the circuit board; a power supply circuit for supplying power to each circuit or device of the electronic apparatus; the memory is used for storing executable program codes; the processor executes a program corresponding to the executable program code by reading the executable program code stored in the memory, for executing the method of the page screenshot according to the method of the first aspect.
In a fourth aspect, an embodiment of the present invention provides a computer readable storage medium storing one or more programs executable by one or more processors to implement the method for screenshot according to the first aspect.
According to the page screenshot method and device provided by the embodiment of the invention, when a user selects an area frame in a webpage, the electronic equipment creates a first Dom node, so that the node attribute of the first Dom node represents the position attribute of the area frame; the electronic equipment determines the range of the area frame and generates a webpage into a first image stream; according to the node attribute of the first Dom node, the electronic equipment creates a second Dom node so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node; using a first coordinate of the region frame, the electronic equipment carries out background positioning processing on the first image stream and the second Dom node to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed; on the composite structure, the electronic device generates a second Dom node currently displayed as a second picture stream, which is used to characterize the region box.
The scheme realizes image selection in any area of the browser page, and fills the blank of the prior art; meanwhile, in the process of selecting the image, the user operation is reduced, the states of other opened operations are not influenced, and the user experience is improved.
Drawings
In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flowchart of a method for screenshot of a page according to an embodiment of the present invention;
FIG. 2 is a flowchart of another method for screenshot of a page according to an embodiment of the present invention;
FIG. 3 is a schematic view of a page and a selected region frame according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of a composite structure according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of a device structure of a method for capturing a page according to an embodiment of the present invention;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.
It should be understood that the described embodiments are merely some, but not all, embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
The scheme provided by the embodiment of the invention is described in detail below with reference to fig. 1, and fig. 1 is a flowchart of a page screenshot method provided by the embodiment of the invention. In the embodiment of the invention, the implementation main body is an electronic device. The electronic device may be a terminal device, a server with a display device, etc., which may specifically include a PC, a desktop computer, a tablet computer, etc. As shown in fig. 1, the method of this embodiment specifically includes the following steps: as shown in fig. 1, the method of this embodiment specifically includes the following steps:
step 110, when a user selects an area frame in the web page, a first Dom node is created, so that the node attribute of the first Dom node characterizes the position attribute of the area frame.
In this step, the electronic device displays a work desktop to the user, including a plurality of application (app) icons on the work desktop. When the user wants to acquire and view the related content from the network, the user inputs an opening instruction to the electronic device through an input device (such as a mouse). The open instruction is an operation in which the user selects and double-clicks a certain application icon (for example, a first application icon).
And opening and displaying the webpage corresponding to the first application icon selected by the user by the electronic equipment according to the input opening instruction. It will be appreciated that text, pictures, etc. may be included on the web page at the same time.
After the electronic equipment displays the webpage to the user, the user browses the webpage and selects the content required by the user in the webpage. The user can select the content in the webpage by setting the range of the area frame. Content selected for the user within the region box, including but not limited to text, pictures, and the like.
While the user selects the region box in the web page, the electronic device creates a first document object model (English: document Object Model, simply: dom) node. The first Dom node includes a node attribute, and the node attribute is used to characterize a location attribute of the region box. The Dom node is a standard programming interface for processing extensible markup language recommended by the W3C organization.
The node attribute specifically includes a wide attribute of the first Dom node and a high attribute of the first Dom node, and the position attribute specifically includes a wide attribute of the region frame and a high attribute of the region frame. The wide attribute of the first Dom node is used for representing the wide attribute of the region box, and the high attribute of the first Dom node is used for representing the high attribute of the region box. Thus, the electronic device reflects the change of the range of the region frame by utilizing the wide-high attribute of the changed first Dom node.
In the embodiment of the present invention, the first Dom node may be understood as an empty box, and the size of the empty box characterizes the range of the region box.
In the following embodiments, the location attribute of the user selecting the region frame and the node attribute of the first Dom node to represent the region frame in the web page will be described in detail, which is not described herein.
Step 120, determining the range of the region frame, and generating the web page into a first picture stream.
In this step, after the electronic device creates the first Dom node, the electronic device determines the range of the region frame selected by the user, and at the same time, the electronic device generates the web page into the first image stream.
The first picture stream is specifically in a base64 format, where the base64 format is a recognizable picture format, and is usually a picture address of a binary string. The character string includes english letters and numerals. For example: wednlgpmc79213688.
It should be noted that, the electronic device may generate the web page into the first image stream through a third party plug-in, for example, an "html2canvas" plug-in. The process of generating the first image stream by the third-party plug-in from the web page may refer to the existing generating manner, which is not described herein.
In the following embodiments, a process of determining that the user selects the region frame in the web page will be described in detail, which will not be described herein.
And 130, creating a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node.
In this step, after the electronic device generates the first image stream from the web page, the electronic device creates a second Dom node.
It is understood that the second Dom node may also be understood as an empty box in an abstract way, and that the node attributes of the second Dom node include a wide attribute and a high attribute. The wide attribute of the second Dom node is the same as the wide attribute of the first Dom node, and the high attribute of the second Dom node is the same as the high attribute of the first Dom node. Thus, the second Dom node may also indirectly standard the user-selected region box.
And 140, performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be displayed in a hidden mode and the second Dom node which is arranged to be displayed at present.
In this step, after the electronic device creates the second Dom node, the electronic device obtains the first coordinate of the region frame. And carrying out background positioning processing on the first image stream and the second Dom node by using the first coordinate by the electronic equipment to obtain a composite structure. The composite structure includes a first stream of pictures that are placed as hidden displays and a second Dom node that is placed as a current display.
In other words, in the background positioning process, the electronic device uses the first picture stream as the background of the second Dom node, and meanwhile, the first picture stream is displayed in a hidden manner, and the second Dom node is displayed currently. Thus, the second Dom node, i.e., the user-selected region box, is highlighted.
In the subsequent embodiments, the process of performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain the composite structure will be described in detail, which is not described herein.
And 150, generating the second Dom node currently displayed into a second picture stream on the composite structure, wherein the second picture stream is used for representing the region frame.
In this step, after the electronic device obtains the composite structure, on the composite structure, the electronic device generates a second Dom node that is currently displayed as a second picture stream. The second image stream may be used to characterize an area box selected by the user on the web page.
The second picture stream is specifically in a base64 format, where the base64 format is a recognizable picture format, and is usually a picture address of a binary string. The character string includes english letters and numerals.
It should be noted that, the electronic device may also generate the second Dom to the second picture stream through a third party plug-in, for example, an "html2canvas" plug-in. The process of the third party plug-in generating the second stream of the second image by the second Dom may refer to the existing generating manner, and will not be described herein.
It should be noted that the above steps may be implemented by means of program codes. The electronic equipment can package the program code into an independent component module and load the component module into the front-end project code, so that image selection in any area of a browser page can be simply and conveniently realized, and the blank of the prior art is made up; meanwhile, in the process of selecting the image, the user operation is reduced, the states of other opened operations are not influenced, and the user experience is improved.
In one example, the component module starts with < lu-select-area > and ends with < lu-select-area >. The web page content described in the middle of the beginning and the ending can be selected randomly by a user through the input device, and whether the text or the picture is displayed.
The scheme provided by the embodiment of the invention is described in detail below with reference to fig. 2, fig. 3 and fig. 4, and fig. 2 is a flowchart of another screenshot method provided by the embodiment of the invention. Fig. 3 is a schematic diagram of a page and a selected area frame according to an embodiment of the present invention. Fig. 4 is a schematic diagram of a composite structure according to an embodiment of the present invention.
The electronic device displays a work desktop to a user, including a plurality of application (app) icons on the work desktop. When the user wants to acquire and view the related content from the network, the user inputs an opening instruction to the electronic equipment through the input equipment. The open instruction is an operation in which the user selects and double-clicks a certain application icon (for example, a first application icon).
And opening and displaying the webpage corresponding to the first application icon selected by the user by the electronic equipment according to the input opening instruction. It will be appreciated that text, pictures, etc. may be included on the web page at the same time.
After the electronic equipment displays the webpage to the user, the user browses the webpage and selects the content required by the user in the webpage, and the process is as follows:
step 210, when a user selects an area frame in the web page, creating a first Dom node, so that the node attribute of the first Dom node characterizes the position attribute of the area frame.
In the step, after the electronic device displays the webpage to the user, a click command input by the user in the webpage is received. The click command is an operation in which the user clicks any position in the page through an input device (e.g., a mouse).
According to the click command, the click device determines a click position and records a first coordinate (the first coordinate is specifically (x 1, y 1)) corresponding to the click position, wherein the first coordinate is the starting position of the region frame selected by the user.
In the embodiment of the invention, after the electronic equipment records the first coordinate, the electronic equipment creates a first Dom node and positions the first Dom node to the first coordinate.
And the electronic equipment receives a drag instruction input by a user in the webpage. The drag instruction is an operation in which the user clicks and slides the input device through the input device.
The first Dom node created by the electronic device includes a node attribute, and the node attribute is used to characterize a location attribute of the region box. The node attributes specifically include a wide attribute of the first Dom node and a high attribute of the first Dom node, and the position attributes specifically include a wide attribute of the region frame and a high attribute of the region frame. The wide attribute of the first Dom node is used for representing the wide attribute of the region box, and the high attribute of the first Dom node is used for representing the high attribute of the region box.
It can be appreciated that the above combination of click command and drag command is a process of selecting a region frame in a web page by a user. The range of the region frame is changed according to a sliding operation by the user. Because the first Dom node is positioned to the first coordinate, and the node attribute of the first Dom node represents the position attribute of the region frame, after the electronic equipment receives the sliding operation of the user, the width-height attribute of the first Dom node also changes along with the sliding operation of the user, and the region frame range is further changed along with the sliding operation of the user.
Step 220, determining the range of the region frame, and generating the web page into a first picture stream.
In this step, after the electronic device creates the first Dom node, the electronic device determines the range of the area frame selected by the user.
As can be seen from the description of step 210, the user inputs a click command and a drag command to the electronic device through the input device, respectively. And the electronic equipment determines the clicking position according to the clicking instruction and records the first coordinate of the clicking position. The first coordinate is the starting position of the region frame. And the electronic equipment calculates a dragging distance by taking the first coordinate as a starting point according to the dragging instruction, wherein the dragging distance comprises a horizontal dragging distance and a vertical dragging distance. The electronic device binds the horizontal drag distance with the wide attribute of the first Dom node and binds the vertical drag distance with the high attribute of the first Dom node.
The user inputs a release instruction to the electronic device through the input device. The release instruction is the operation of the click instruction, that is, the operation of lifting the click instruction. According to the release instruction, the electronic device determines a release position input by the user and records a second coordinate corresponding to the release position (the second coordinate is specifically (x 2, y 2)). The second coordinate is the end position of the region frame selected by the user.
The electronic device uses the horizontal dragging distance between the release position and the click position as the wide attribute of the first Dom node. The electronic device uses the vertical drag distance between the release position and the click position as the high attribute of the first Dom node. The electronic device determines the region box using the first coordinate, the second coordinate, the wide attribute, and the high attribute.
Specifically, the electronic device regards a difference value of the x2 value of the second coordinate and the first coordinate x1 (the difference value represents the horizontal drag distance of the region frame) as the wide attribute of the first Dom node. The electronic device takes the difference value between the y2 of the second coordinate and the y1 of the first coordinate (the difference value represents the vertical dragging distance of the region frame) as the high attribute of the first Dom node. In this way, the electronic device determines the range of the area frame using the first coordinate, the second coordinate, the wide attribute and the high attribute of the first Dom node.
As shown in fig. 3, the dashed box represents a region box selected by the user, and the top left vertex of the region box is the first coordinate, that is, the click position input by the user; the lower right vertex of the region box is the second coordinate, i.e., the release position of the user input. The long side of the region frame is the wide attribute of the first Dom node, and the short side of the region frame is the high attribute of the first Dom node.
Optionally, after the user inputs the release instruction, the range of the region box can be changed again according to the actual requirement. At this time, the user inputs an adjustment instruction to the electronic device, and the adjustment instruction may be specifically a combination of a click instruction and a drag instruction. Namely, the user firstly inputs a click command to the electronic equipment to determine the adjustment position. In general, the adjustment position coincides with the release position, then the user inputs a drag instruction to the electronic device, changes the range of the region frame, and finally, the user inputs a release instruction to the electronic device, ends the adjustment process, and forms a final region frame.
It can be appreciated that, in the process that the user selects the region frame for the first time or adjusts the region frame for the subsequent time, the electronic device can compare the difference value calculated by the current coordinate and the first coordinate with 0. If the difference value is larger than 0, the distance represented by the difference value is increased rightward or downward by taking the first coordinate as a starting point; if the difference value is smaller than 0, the distance represented by the difference value is increased leftwards or upwards by taking the first coordinate as a starting point.
For example, the electronic device determines whether the difference between x' of the current coordinate and x1 of the first coordinate is greater than 0, and if so, increases the distance represented by the difference horizontally to the right with x1 as a starting point; otherwise, the distance of the difference characterization is increased to the left. Whether the distance is increased to the left or the right, the horizontal coordinate point at the leftmost side or the rightmost side of the page frame cannot be exceeded. The electronic equipment judges whether the difference value between the y' of the current coordinate and the y1 of the first coordinate is larger than 0, if so, the y1 is used as a starting point, and the distance represented by the difference value is increased horizontally downwards; otherwise, the distance of the difference characterization is increased upwards. The distance can not be increased upwards or downwards beyond the vertical coordinate point at the uppermost side or the lowermost side of the page frame.
The electronic device generates the web page as a first image stream while the electronic device determines the extent of the region box (i.e., while the electronic device receives a release instruction input by the user).
And 230, creating a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node.
In this step, after the electronic device generates the first image stream from the web page, the electronic device creates a second Dom node.
Optionally, the electronic device binds the wide attribute of the first Dom node with the wide attribute of the second Dom node, and binds the high attribute of the first Dom node with the high attribute of the second Dom node.
And 240, performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be displayed in a hidden mode and the second Dom node which is arranged to be displayed at present.
In this step, after the electronic device creates the second Dom node, the electronic device acquires the first coordinates of the recorded region frame again. The electronic device determines a location of the first coordinate in the first stream of pictures. And the electronic equipment overlaps the left top vertex of the area surrounded by the wide attribute and the high attribute of the second Dom node with the position, and vertically places the surrounded area above the first image stream to obtain the composite structure. The electronic device configures the surrounding area as a current display, and configures the first image stream as a hidden display.
As shown in fig. 4, the dashed box represents the region surrounded by the wide attribute and the high attribute of the second Dom node, and the upper left vertex of the surrounded region coincides with the position of the first coordinate in the first film stream. The first picture stream is below as background and the second Dom node is above the first picture stream. The dotted line indicates that the first picture stream is shown hidden.
Step 250, generating, on the composite structure, the second Dom node currently displayed as a second picture stream, where the second picture stream is used to characterize the region box.
In this step, after the electronic device obtains the composite structure, on the composite structure, the electronic device generates a second Dom node that is currently displayed as a second picture stream. The second image stream may be used to characterize an area box selected by the user on the web page.
And 260, creating a picture tag node according to the region display instruction input by the user, wherein the address of the picture tag node is the second picture stream.
In this step, after the electronic device generates the second image stream, the image represented by the second image stream may be displayed or not displayed to the user according to different requirements.
In one implementation, a user may input an area display instruction to an electronic device to view content selected from a web page. And after receiving the region display instruction, the electronic equipment creates a picture tag node. For example, img label nodes. The Img tag node includes an src attribute, and the electronic device stores the second picture stream in the src attribute, in other words, the electronic device uses the second picture stream as an address of the picture tag node. Thus, the user can view the selected content through the Img label node.
In another implementation case, the content selected by the user from the web page is used for subsequent AI analysis and filtering, or is used for picture processing, the user does not view the content selected from the web page any more, and at this time, the electronic device directly transmits the second picture stream to the back end. And the rear end acquires the picture selected by the user through the second picture stream.
And step 270, displaying the picture tag node to the user, so that the user views the corresponding picture in the region frame through the second picture stream.
In this step, after the electronic device creates the picture tag node, the picture tag node is displayed to the user, so that the user views the corresponding picture in the region frame through the second picture stream.
Optionally, in an embodiment of the present application, the user may further configure the region box attribute. Under the conventional configuration, after the user completes one time of selecting the region frame, the region frame is not displayed currently. That is, after the user selects the region frame, the region frame is hidden and displayed, and is no longer displayed to the user. At this time, the value of the display attribute of the region frame is false (false).
If the user still wants to display the region frame currently after finishing the operation of selecting the region frame once and does not disappear under any condition, before executing the steps of this embodiment, the user inputs a region frame attribute configuration instruction to the electronic device, where the region frame attribute configuration instruction includes a display attribute.
And after the electronic equipment receives the region frame attribute configuration instruction, acquiring the display attribute from the region frame attribute configuration instruction. The electronic device identifies the value of the display attribute, and if the value of the display attribute is true (true), the electronic device configures the region box to be always displayed. The normal display specifically means that the color of the region frame is obviously different from that of the first picture stream, that is, the color difference between the color of the region frame and the color of the first picture stream exceeds a preset color difference threshold. For example, in one example, the current color of the first tile stream is yellow, and the currently displayed color of the region box may be blue.
Alternatively, in the embodiment of the present invention, the graphics streams are div tags, and in practical application, any block-level tag in html language, for example, p-tags, etc. may be used.
Fig. 5 is a schematic structural diagram of a screenshot device provided by an embodiment of the present invention, as shown in fig. 5, the screenshot device of this embodiment may include: a first creation unit 510, a first generation unit 520, a second creation unit 530, a processing unit 540, and a second generation unit 550.
The first creating unit 510 is configured to create a first Dom node when a user selects an area frame in the web page, so that a node attribute of the first Dom node characterizes a position attribute of the area frame;
The first generating unit 520 is configured to determine a range of the region frame, and generate the web page into a first image stream;
the second creating unit 530 is configured to create a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node;
the processing unit 540 is configured to perform background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, where the composite structure includes the first image stream that is set to be displayed in a hidden manner and the second Dom node that is set to be displayed currently;
the second generating unit 550 is configured to generate, on the composite structure, the second Dom node currently displayed as a second picture stream, where the second picture stream is used to characterize the region box.
Optionally, the first generating unit 520 is specifically configured to determine a click position according to a click instruction input by the user in the web page, and record a first coordinate corresponding to the click position, where the first coordinate is a starting position of the region frame;
according to a drag instruction input by the user in the webpage, calculating a drag distance by taking the first coordinate as a starting point, wherein the drag distance comprises a horizontal drag distance and a vertical drag distance;
Binding the horizontal drag distance with the wide attribute of the first Dom node, and binding the vertical drag distance with the high attribute of the first Dom node;
determining a release position according to a release instruction input by the user in the webpage, and recording a second coordinate corresponding to the release position, wherein the second coordinate is the termination position of the region frame;
taking the horizontal dragging distance between the release position and the click position as the wide attribute of the first Dom node, and taking the vertical dragging distance between the release position and the click position as the high attribute of the first Dom node;
and determining the range of the region frame by using the first coordinate, the second coordinate, the wide attribute and the high attribute.
Optionally, the second creating unit 530 is specifically configured to bind the wide attribute of the first Dom node with the wide attribute of the second Dom node, and bind the high attribute of the first Dom node with the high attribute of the second Dom node.
Optionally, the node attribute includes a wide attribute and a high attribute;
the processing unit 540 is specifically configured to determine a position of the first coordinate in the first image stream;
Overlapping the left top point of the area surrounded by the wide attribute and the high attribute of the second Dom node with the position, and vertically placing the surrounded area above the first picture flow to obtain a composite structure;
and configuring the surrounding area as current display, and configuring the first picture stream as hidden display.
Optionally, the apparatus further comprises: a third creation unit (not shown in the figure) and a display unit (not shown in the figure);
the third creating unit is configured to create a picture tag node according to the region display instruction input by the user, where an address of the picture tag node is the second picture stream;
and the display unit is used for displaying the picture tag node to the user, so that the user views the corresponding picture in the region frame through the second picture stream.
Optionally, the apparatus further comprises: a receiving unit (not shown in the figure) and a configuration unit (not shown in the figure);
the receiving unit is used for receiving an area frame attribute configuration instruction input by a user, wherein the area frame attribute configuration instruction comprises a display attribute;
and the configuration unit is used for configuring the area frame to be normally displayed if the value of the display attribute is true.
The device of the present embodiment may be used to implement the technical solutions of the method embodiments shown in fig. 1 to 3, and its implementation principle and technical effects are similar, and are not described here again.
Correspondingly, the page screenshot device provided by the embodiment of the invention can be realized by another structure. Fig. 6 is a schematic structural diagram of an embodiment of an electronic device according to the present invention, where the flow of the embodiment shown in fig. 1 to 3 of the present invention may be implemented, and as shown in fig. 6, the electronic device may include: the processor 62 and the memory 63 are arranged on the circuit board 64, wherein the circuit board 64 is arranged in a space surrounded by the shell 61; a power supply circuit 65 for supplying power to the respective circuits or devices of the above-described electronic apparatus; the memory 63 is for storing executable program code; the processor 62 executes a program corresponding to the executable program code by reading the executable program code stored in the memory 63 for performing the method described in the foregoing embodiment.
The specific implementation of the above steps by the processor 62 and the further implementation of the steps by the processor 62 through the execution of executable program codes may be referred to in the embodiments of the present invention shown in fig. 1-3, and will not be described herein.
The electronic device comprises: the electronic device is similar to a general computer architecture in terms of processing capability, stability, reliability, security, expandability, manageability and the like because of the need to provide highly reliable services.
It should be noted that in this document, terms such as "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
In this specification, each embodiment is described in a related manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments.
In particular, for the device embodiments, since they are substantially similar to the method embodiments, the description is relatively simple, and reference is made to the description of the method embodiments in part.
Logic and/or steps represented in the flowcharts or otherwise described herein, e.g., a ordered listing of executable instructions for implementing logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device.
More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). In addition, the computer readable medium may even be paper or other suitable medium on which the program is printed, as the program may be electronically captured, via, for instance, optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner, if necessary, and then stored in a computer memory.
It is to be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof.
In the above-described embodiments, the various steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, may be implemented using any one or combination of the following techniques, as is well known in the art: discrete logic circuits having logic gates for implementing logic functions on data signals, application specific integrated circuits having suitable combinational logic gates, programmable Gate Arrays (PGAs), field Programmable Gate Arrays (FPGAs), and the like.
Those of ordinary skill in the art will appreciate that all or a portion of the steps carried out in the method of the above-described embodiments may be implemented by a program to instruct related hardware, where the program may be stored in a computer readable storage medium, and where the program, when executed, includes one or a combination of the steps of the method embodiments.
For convenience of description, the above apparatus is described as being functionally divided into various units/modules, respectively. Of course, the functions of the various elements/modules may be implemented in the same piece or pieces of software and/or hardware when implementing the present invention.
From the above description of embodiments, it will be apparent to those skilled in the art that the present invention may be implemented in software plus a necessary general hardware platform. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the embodiments or some parts of the embodiments of the present invention.

Claims (10)

1. A method of screenshot of a page, the method being applied to an electronic device that opens and displays a web page, the method comprising:
when a user selects an area frame in the webpage, a first Dom node is created, so that the node attribute of the first Dom node represents the position attribute of the area frame;
determining the range of the region frame, and generating the webpage into a first image stream;
creating a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node;
Performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed;
and generating the second Dom node currently displayed into a second picture stream on the composite structure, wherein the second picture stream is used for representing the region frame.
2. The method according to claim 1, wherein said determining the extent of the region box comprises:
determining a clicking position according to a clicking instruction input by the user in the webpage, and recording a first coordinate corresponding to the clicking position, wherein the first coordinate is the starting position of the region frame;
according to a drag instruction input by the user in the webpage, calculating a drag distance by taking the first coordinate as a starting point, wherein the drag distance comprises a horizontal drag distance and a vertical drag distance;
binding the horizontal drag distance with the wide attribute of the first Dom node, and binding the vertical drag distance with the high attribute of the first Dom node;
Determining a release position according to a release instruction input by the user in the webpage, and recording a second coordinate corresponding to the release position, wherein the second coordinate is the termination position of the region frame;
taking the horizontal dragging distance between the release position and the click position as the wide attribute of the first Dom node, and taking the vertical dragging distance between the release position and the click position as the high attribute of the first Dom node;
and determining the range of the region frame by using the first coordinate, the second coordinate, the wide attribute and the high attribute.
3. The method according to claim 2, wherein creating a second Dom node according to the node properties of the first Dom node, comprises:
binding the wide attribute of the first Dom node with the wide attribute of the second Dom node, and binding the high attribute of the first Dom node with the high attribute of the second Dom node.
4. The method of claim 1, wherein the node attributes comprise a wide attribute and a high attribute;
and performing background positioning processing on the first image stream and the second Dom node by using the first coordinate of the region frame to obtain a composite structure, wherein the method specifically comprises the following steps:
Determining a position of the first coordinate in the first stream of pictures;
overlapping the left top point of the area surrounded by the wide attribute and the high attribute of the second Dom node with the position, and vertically placing the surrounded area above the first picture flow to obtain a composite structure;
and configuring the surrounding area as current display, and configuring the first picture stream as hidden display.
5. The method according to claim 1, wherein the method further comprises:
creating a picture tag node according to the region display instruction input by the user, wherein the address of the picture tag node is the second picture stream;
and displaying the picture tag node to the user, so that the user views the corresponding picture in the region frame through the second picture stream.
6. The method according to claim 1, wherein the method further comprises:
receiving an area frame attribute configuration instruction input by a user, wherein the area frame attribute configuration instruction comprises a display attribute;
and if the value of the display attribute is true, configuring the area frame as normal display.
7. A device for capturing a page, the device being applied to an electronic apparatus, the electronic apparatus opening and displaying a web page, the device comprising:
The first creating unit is used for creating a first Dom node when a user selects an area frame in the webpage, so that the node attribute of the first Dom node represents the position attribute of the area frame;
the first generation unit is used for determining the range of the region frame and generating the webpage into a first picture stream;
a second creating unit, configured to create a second Dom node according to the node attribute of the first Dom node, so that the node attribute of the second Dom node is the same as the node attribute of the first Dom node;
the processing unit is used for carrying out background positioning processing on the first image stream and the second Dom node by utilizing the first coordinate of the region frame to obtain a composite structure, wherein the composite structure comprises the first image stream which is arranged to be hidden and displayed and the second Dom node which is arranged to be currently displayed;
and the second generating unit is used for generating the second Dom node currently displayed into a second picture stream on the composite structure, wherein the second picture stream is used for representing the region frame.
8. The apparatus of claim 7, wherein the first generating unit is specifically configured to determine a click position according to a click command input by the user in the web page, and record a first coordinate corresponding to the click position, where the first coordinate is a start position of the region frame;
According to a drag instruction input by the user in the webpage, calculating a drag distance by taking the first coordinate as a starting point, wherein the drag distance comprises a horizontal drag distance and a vertical drag distance;
binding the horizontal drag distance with the wide attribute of the first Dom node, and binding the vertical drag distance with the high attribute of the first Dom node;
determining a release position according to a release instruction input by the user in the webpage, and recording a second coordinate corresponding to the release position, wherein the second coordinate is the termination position of the region frame;
taking the horizontal dragging distance between the release position and the click position as the wide attribute of the first Dom node, and taking the vertical dragging distance between the release position and the click position as the high attribute of the first Dom node;
and determining the range of the region frame by using the first coordinate, the second coordinate, the wide attribute and the high attribute.
9. The apparatus according to claim 8, wherein the second creation unit is specifically configured to bind a wide attribute of the first Dom node with a wide attribute of the second Dom node, and bind a high attribute of the first Dom node with a high attribute of the second Dom node.
10. The apparatus of claim 7, wherein the node attributes comprise a wide attribute and a high attribute;
the processing unit is specifically configured to determine a position of the first coordinate in the first image stream;
overlapping the left top point of the area surrounded by the wide attribute and the high attribute of the second Dom node with the position, and vertically placing the surrounded area above the first picture flow to obtain a composite structure;
and configuring the surrounding area as current display, and configuring the first picture stream as hidden display.
CN202211366871.6A 2022-11-01 2022-11-01 Page screenshot method and device Pending CN115994009A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211366871.6A CN115994009A (en) 2022-11-01 2022-11-01 Page screenshot method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211366871.6A CN115994009A (en) 2022-11-01 2022-11-01 Page screenshot method and device

Publications (1)

Publication Number Publication Date
CN115994009A true CN115994009A (en) 2023-04-21

Family

ID=85994466

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211366871.6A Pending CN115994009A (en) 2022-11-01 2022-11-01 Page screenshot method and device

Country Status (1)

Country Link
CN (1) CN115994009A (en)

Similar Documents

Publication Publication Date Title
US10691331B2 (en) Native overlay for rapid editing of web content
US11763067B2 (en) User interface for editing web content
CN109933322B (en) Page editing method and device and computer readable storage medium
US9213460B2 (en) Visual editing tool buffer region
KR102118223B1 (en) Cross window animation
JP2005228339A (en) Method, system and program to support freeform annotations
US10169307B2 (en) Method and system for the use of adjustment handles to facilitate dynamic layout editing
EP3832459A1 (en) Graphic drawing method and apparatus, device, and storage medium
US11640283B2 (en) Control bar for element activation
US20180315400A1 (en) Rendering graphical assets on electronic devices
CN113655999A (en) Rendering method, device and equipment of page control and storage medium
US7554544B2 (en) Just-in-time user interface layout
CN110020279A (en) Page data processing method, device and storage medium
CN115994009A (en) Page screenshot method and device
CN106095734B (en) Text display method and device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination