CN113900647A

CN113900647A - Method, device and equipment for screenshot of webpage

Info

Publication number: CN113900647A
Application number: CN202111147954.1A
Authority: CN
Inventors: 卫少基
Original assignee: Gaoding Xiamen Technology Co Ltd
Current assignee: Gaoding Xiamen Technology Co Ltd
Priority date: 2021-09-29
Filing date: 2021-09-29
Publication date: 2022-01-07

Abstract

The invention discloses a method for screenshot of a webpage, which comprises the following steps: based on the fact that screenshot operation is initiated on a current browsing page, obtaining an HTML code of the current browsing page, wherein the HTML code comprises an in-line CSS code; analyzing the HTML codes and the CSS codes to generate HTML DOM trees and CSSOM trees of the current browsing page; carrying out style and layout calculation on each determined node in the HTML DOM tree and the CSSOM tree to construct a layout object tree; and drawing the nodes of the layout object tree, synthesizing the drawn data and then coding to generate an image file. The screenshot image consistent with the rendering effect of the browser can be obtained, and the rendering precision is greatly improved.

Description

Method, device and equipment for screenshot of webpage

Technical Field

The invention relates to the technical field of webpage screenshot, in particular to a method, a device and equipment for webpage screenshot.

Background

In the process of using an online editor of a web page version in a browser, a user sometimes needs to store the internal part or the whole content of the web page in an image form. In the traditional technology, a web page developer can use JavaScript script codes to traverse and analyze the web page content needing screenshot in an HTML DOM structure at the bottom layer of a browser into tree-shaped structure data, and the data of each node comprises position information, sub-element information, CSS style and text. And then draw in the Canvas element of the web page based on the CSS cascading layout rules. And acquiring the image data in the Canvas element through a browser API after the drawing is finished. The above scheme is a scheme of a commonly used JavaScript code library of html2Canvas, and for the scheme of html2Canvas, a plane geometry using pixels as a unit needs to be calculated first, and then the plane geometry is drawn on the Canvas, and finally the content of the Canvas element can be rendered through one-time processing by a browser, so that both a conversion unit and rendering lose precision. Moreover, compatibility of different browsers is limited, so that the styles and layout results are inconsistent among different browsers.

Disclosure of Invention

In view of this, the present invention provides a method, an apparatus and a device for web page screenshot, which can effectively solve the above problems.

In order to achieve the above object, the present invention provides a method for screenshot in a web page, the method comprising:

based on the fact that screenshot operation is initiated on a current browsing page, obtaining an HTML code of the current browsing page, wherein the HTML code comprises an in-line CSS code;

analyzing the HTML codes and the CSS codes to generate HTML DOM trees and CSSOM trees of the current browsing page;

carrying out style and layout calculation on each determined node in the HTML DOM tree and the CSSOM tree to construct a layout object tree;

and drawing the nodes of the layout object tree, synthesizing the drawn data and then coding to generate an image file.

Preferably, the step of parsing the HTML code and the CSS code further includes:

and loading the image file and the font file related in the current browsing page.

Preferably, the step of loading the image file and the font file related to the currently browsed page includes:

and downloading and storing the image file and the font file related to the current browsing page from a remote resource server into a local browser memory, and rendering the related image and characters.

Preferably, the step of performing style and layout calculation on each node determined in the HTML DOM tree and the CSSOM tree to construct a layout object tree includes:

calculating the style corresponding to each node in the HTML DOM tree based on HTML specification to obtain corresponding style data;

and storing each node and the corresponding style data in the nodes of the layout object tree by traversing each node in the HTML DOM tree.

Preferably, the step of rendering the nodes of the layout object tree, and encoding the rendered data after synthesizing to generate the image file includes:

performing rasterization processing on different layout objects to obtain different drawing data by traversing nodes in the layout object tree;

synthesizing the drawing data according to the relevant specifications of CSS levels to obtain image data;

and coding the image data based on a common image format to obtain the image file.

In order to achieve the above object, the present invention further provides a device for screenshot in a web page, the device comprising:

the acquisition unit is used for acquiring HTML codes of the current browse page based on the screenshot operation initiated on the current browse page, wherein the HTML codes comprise in-line CSS codes;

the parsing unit is used for parsing the HTML codes and the CSS codes to generate HTML DOM trees and CSSOM trees of the current browsing page;

the building unit is used for carrying out style and layout calculation on each node determined in the HTML DOM tree and the CSSOM tree so as to build a layout object tree;

and the generating unit is used for drawing the nodes of the layout object tree, synthesizing the drawn data and then coding the synthesized drawn data to generate an image file.

Preferably, the analysis unit further includes:

and the loading unit is used for loading the image file and the font file related in the current browsing page.

Preferably, the building unit further includes:

the calculating unit is used for calculating the style corresponding to each node in the HTML DOM tree based on HTML specification to obtain corresponding style data;

and the storage unit is used for storing each node and the corresponding style data in the nodes of the layout object tree by traversing each node in the HTML DOM tree.

Preferably, the generating unit further includes:

the drawing unit is used for performing rasterization processing on different layout objects to obtain different drawing data by traversing nodes in the layout object tree;

the processing unit is used for synthesizing the drawing data according to the relevant specifications of CSS levels to obtain image data;

and the coding unit is used for coding the image data based on a common image format to obtain the image file.

To achieve the above object, the present invention further provides an apparatus including a processor, a memory, and a computer program stored in the memory, where the computer program is executable by the processor to implement a method of screenshot as described in the above embodiment.

Has the advantages that:

according to the scheme, the acquired HTML codes and CSS codes are analyzed to generate an HTML DOM tree and a CSSOM tree, the nodes in the HTML DOM tree and the CSSOM tree are subjected to style and layout calculation to obtain a layout object tree, the nodes of the layout object tree are drawn, the drawn data obtained by drawing are synthesized and then coded to generate an image file, the limitation that the existing method is limited by Canvas API can be solved, the screenshot image consistent with the rendering effect of a browser is obtained, and the rendering precision is greatly improved.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1 is a schematic flowchart of a method for web page screenshot according to an embodiment of the present invention.

Fig. 2 is a schematic structural diagram of a device for web page screenshot according to an embodiment of the present invention.

Fig. 3 is a schematic structural diagram of an apparatus according to an embodiment of the present invention.

The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the technical solutions of the embodiments of the present invention will be described clearly and completely with reference to the accompanying drawings of the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all embodiments of the present invention. All other embodiments, which can be obtained by a person skilled in the art without any inventive step based on the embodiments of the present invention, are within the scope of the present invention. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be obtained by a person skilled in the art without any inventive step based on the embodiments of the present invention, are within the scope of the present invention.

The present invention will be described in detail with reference to the following examples.

Because the existing scheme is limited in that Canvas shadow APIs provided by different browsers have no diffusion radius, shadow support for styles is incomplete; and, being limited to Canvas APIs provided by different browsers, results in imperfect support of the bounding box dotted lines. The invention can have a calculation process which is not influenced by the compatibility of the browser, and on the browser of the old version, even if the HTML and CSS characteristics which are not supported by the version exist in the webpage content, the characteristics can be correctly processed, and then the screenshot image which is consistent with the rendering effect of the browser supporting the new characteristics is generated, thereby greatly improving the precision of the calculation process and the rendering.

Fig. 1 is a schematic flow chart of a method for web page screenshot according to an embodiment of the present invention.

In this embodiment, the method is implemented based on an architecture system, wherein the architecture system comprises a parsing module, a resource loading module, a computing module, a rendering module, a synthesizing module, and an encoding module,

and the analysis module is mainly used for analyzing the HTML code fragments and the CSS code fragments of the webpage content into an HTML DOM tree data structure and a CSSOM data structure, and then combining DOM tree nodes and the related calculated style data to obtain a new layout object tree structure.

The resource loading module is used for downloading the image files and font files related to the webpage content from the remote resource server and storing the image files and font files into a local browser memory; and the resources are used for related image and text rendering operation.

And the calculation module is used for carrying out the style and layout calculation according to the CSS specification and the HTML specification.

And the drawing module is used for rasterizing different two-dimensional or three-dimensional graphic data expressed by the layout object tree data structure to obtain bitmap data corresponding to the two-dimensional or three-dimensional graphic data.

And the synthesis module is used for carrying out processing such as layer synthesis, clipping, position conversion and the like on the drawn multiple bitmap data according to the levels to obtain single image data which can be output as a file or to a canvas area.

And the coding module is used for coding the image data generated by the synthesis module in a common image format and then outputting the image data as an image file.

In this embodiment, the method includes:

s11, based on the screenshot operation initiated on the current browsing page, obtaining the HTML code of the current browsing page, wherein the HTML code comprises the inline CSS code.

S12, analyzing the HTML codes and the CSS codes to generate HTML DOM trees and CSSOM trees of the current browsing page.

Wherein the step of parsing the HTML codes and the CSS codes further comprises:

and loading the image file and the font file related in the current browsing page. Further, the image file and the font file related to the currently browsed page are downloaded from a remote resource server and stored in a local browser memory, and the related images and characters are rendered.

In this embodiment, the HTML code and the CSS code are parsed by calling a parsing module, and the parsing module represents the current web content as an HTML DOM tree data structure and a CSSOM data structure. In the analysis process, when external CSS files, image resources and font information are involved, a resource loading module is called to load the files; and after the loading is finished, continuing to call the analysis module to analyze the HTML codes and the CSS codes until the analysis is finished.

S13, performing style and layout calculation on each node determined in the HTML DOM tree and the CSSOM tree to construct a layout object tree.

Wherein, the step of performing style and layout calculation on each determined node in the HTML DOM tree and the CSSOM tree to construct a layout object tree comprises:

s13-1, calculating the style corresponding to each node in the HTML DOM tree based on HTML specification to obtain corresponding style data;

s13-2, storing each node and the corresponding style data in the nodes of the layout object tree by traversing each node in the HTML DOM tree.

In the embodiment, a style corresponding to a node in an HTML DOM tree is calculated by calling a calculation module to obtain style data; and traversing each node in the HTML DOM tree, and storing each node and the corresponding style data as nodes in the layout object tree data.

And S14, drawing the nodes of the layout object tree, synthesizing the drawn data and coding to generate an image file.

The step of drawing the nodes of the layout object tree, synthesizing the drawn data and encoding to generate an image file includes:

s14-1, rasterizing different layout objects to obtain different drawing data by traversing nodes in the layout object tree;

s14-2, synthesizing the drawing data according to the relevant specifications of CSS levels to obtain image data;

and S14-3, coding the image data based on a common image format to obtain the image file.

In the embodiment, different layout objects are drawn into different drawing data by traversing nodes in the layout object tree; synthesizing and rasterizing the drawing data according to the relevant specifications of CSS levels by calling a synthesis module to obtain single image data; and finally, coding the image data according to a common image coding format by calling a coding module to obtain an image file. By analyzing and calculating CSS codes and HTML codes in the browser, the calculation process free from the influence of browser compatibility can be realized, so that the problem of inconsistent screenshot effects of different browsers is solved, screenshot images consistent with the rendering effect of the browser are obtained, and the rendering precision is greatly improved.

In this embodiment, the apparatus 20 includes:

an obtaining unit 21, configured to initiate a screenshot operation on a current browsing page, and obtain an HTML code of the current browsing page, where the HTML code includes an inline CSS code;

the parsing unit 22 is configured to parse the HTML code and the CSS code to generate an HTML DOM tree and a CSSOM tree for the current browsing page;

a constructing unit 23, configured to perform style and layout calculation on each node determined in the HTML DOM tree and the CSSOM tree to construct a layout object tree;

the generating unit 24 is configured to draw nodes of the layout object tree, synthesize and encode drawing data obtained by drawing, and generate an image file.

Further, the parsing unit 22 further includes:

Further, the building unit 23 further includes:

Further, the generating unit 24 further includes:

Each unit module of the apparatus 20 can respectively execute the corresponding steps in the above method embodiments, and therefore, the description of each unit module is omitted here, and please refer to the description of the corresponding steps above in detail.

An embodiment of the present invention further provides an apparatus, which includes a processor, a memory, and a computer program stored in the memory, where the computer program is executable by the processor to implement the method for capturing a webpage according to the foregoing embodiment.

As shown in fig. 3, the apparatus may include, but is not limited to, a processor 31, a memory 32. It will be appreciated by those skilled in the art that the schematic diagrams are merely examples of the device and do not constitute a limitation of the device and may include more or less components than those shown, or some components in combination, or different components, e.g. the device may also include input output devices, network access devices, buses, etc.

The Processor may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic, discrete hardware components, etc. The general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, the control center of the device utilizing various interfaces and lines to connect the various parts of the overall device.

The memory may be used to store the computer programs and/or modules, and the processor may implement the various functions of the apparatus by running or executing the computer programs and/or modules stored in the memory, as well as by invoking data stored in the memory. In addition, the memory may include high speed random access memory, and may also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), at least one magnetic disk storage device, a Flash memory device, or other volatile solid state storage device.

Wherein the device-integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc.

It should be noted that the above-described device embodiments are merely illustrative, where the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. In addition, in the drawings of the embodiment of the apparatus provided by the present invention, the connection relationship between the modules indicates that there is a communication connection between them, and may be specifically implemented as one or more communication buses or signal lines. One of ordinary skill in the art can understand and implement it without inventive effort.

The embodiments in the above embodiments can be further combined or replaced, and the embodiments are only used for describing the preferred embodiments of the present invention, and do not limit the concept and scope of the present invention, and various changes and modifications made to the technical solution of the present invention by those skilled in the art without departing from the design idea of the present invention belong to the protection scope of the present invention.

Claims

1. A method for screenshot of a web page, the method comprising:

2. The method of claim 1, wherein the step of parsing the HTML code and the CSS code further comprises:

3. The method for web page screenshot according to claim 2, wherein the step of loading the image file and the font file related to the currently browsed page comprises:

4. The method of claim 1, wherein the step of performing style and layout calculations on the nodes determined in the HTML DOM tree and the CSSOM tree to construct a layout object tree comprises:

5. The method of claim 1, wherein the step of rendering the nodes of the layout object tree, synthesizing the rendered data, and encoding the synthesized rendered data to generate the image file comprises:

6. An apparatus for web screenshot, the apparatus comprising:

7. The apparatus for web screenshot according to claim 6, wherein the parsing unit further includes:

8. The apparatus for web screenshot according to claim 6, wherein the constructing unit further includes:

9. The apparatus for web screenshot according to claim 6, wherein the generating unit further includes:

10. An apparatus comprising a processor, a memory, and a computer program stored in the memory, the computer program being executable by the processor to perform a method of web screenshot as claimed in any one of claims 1 to 5.