Method for improving webpage screenshot definition based on WEB technology

Abstract

The invention provides a method for improving webpage screenshot definition based on a WEB technology, which comprises the following steps of: obtaining HTML (Hypertext Markup Language) element content of a to-be-intercepted page, and cloning a DOM (Document Object Model) structure of the to-be-intercepted page; analyzing and judging target nodes and child nodes to be intercepted in the DOM structure as well as corresponding styles and hierarchy requirements; if the DOM structure does not have the CSS style requirement influencing the screenshot accuracy, drawing the to-be-intercepted node element into a canvas according to the style and hierarchical relationship of the to-be-intercepted node element; otherwise, if a cross-domain resource in the webpage content to be intercepted or an execution script is not allowed to remotely access an original resource due to a security privacy requirement, performing on-demand scaling configuration on canvas drawing coordinate parameters; otherwise, converting the HTML content to be subjected to screenshot, carry out screenshot preprocessing according to different CSS style requirements, constructing an SVG document format and subjecting the SVG document format to picture processing; and finally, performing picture conversion on the content drawn in the canvas to generate a screenshot file.

Description

technical field [0001] The invention relates to the technical field of screenshots, in particular to a method for improving the clarity of webpage screenshots based on WEB (World Wide Web, global wide area network) technology. Background technique [0002] Rich picture sharing is one of the important ways of information dissemination. The method of generating pictures by intercepting the whole or part of the content of the webpage is widely used. Webpage screenshots play an important role in electronic archiving, traceability and evidence collection, and dissemination and sharing. However, in actual operation, webpage screenshots often have pixel distortion, low definition, and inability to accurately draw the original webpage content. There are still many problems in rendering style, rendering level, external resources and special attribute processing: 1) For CSS (Cascading Style Sheets, Cascading Style Sheets) attribute styles such as shadows, special borders, element scal...

AI Technical Summary

Problems solved by technology

However, in actual operation, webpage screenshots often have pixel distortion, low definition, and inability to accurately draw the original webpage content. There are still many problems in rendering style, rendering level, external resources and special attribute processing: 1) For CSS (Cascading Style Sheets, Cascading Style Sheets) attribute styles such as shadows, special borders, element scaling, and arcs have low calculation accuracy, resulting in fuzzy screenshot results; 2) For deeply nested DOM (Document Object Model, Document Object Model) Nodes are prone to pixel loss in pixelized calculations, resulting in black screenshot results; 3) For resources such as externally linked images and scripts, cross-domain access is not supported or execution is restricted, resulting in incomplete screenshots

Images