CN116954450A - Screenshot method and device for front-end webpage, storage medium and terminal - Google Patents
Screenshot method and device for front-end webpage, storage medium and terminal Download PDFInfo
- Publication number
- CN116954450A CN116954450A CN202310913390.0A CN202310913390A CN116954450A CN 116954450 A CN116954450 A CN 116954450A CN 202310913390 A CN202310913390 A CN 202310913390A CN 116954450 A CN116954450 A CN 116954450A
- Authority
- CN
- China
- Prior art keywords
- node
- screenshot
- object model
- document object
- preset
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 69
- 238000010367 cloning Methods 0.000 claims description 27
- 238000004891 communication Methods 0.000 claims description 22
- 238000012545 processing Methods 0.000 claims description 15
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 238000012216 screening Methods 0.000 claims description 5
- 238000005516 engineering process Methods 0.000 description 10
- 239000000463 material Substances 0.000 description 8
- 230000008901 benefit Effects 0.000 description 6
- 238000013473 artificial intelligence Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 206010070245 Foreign body Diseases 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000013135 deep learning Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000003058 natural language processing Methods 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Document Processing Apparatus (AREA)
Abstract
The application discloses a screenshot method and device for a front-end webpage, a storage medium and a terminal, relates to the technical field of network front-end and the financial field, and mainly aims to solve the problem that an accurate screenshot result for the front-end webpage cannot be obtained in the prior art. Comprising the following steps: responding to a screenshot instruction aiming at a target area, and identifying each document object model node contained in the target area; converting each document object model node into corresponding preset format vector graphic data, wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode; and assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area.
Description
Technical Field
The present application relates to the field of network front-end technologies and finance, and in particular, to a method and apparatus for capturing a screenshot of a front-end webpage, a storage medium, and a terminal.
Background
The web page screenshot function is very common in front-end development, particularly in requirements related to marketing scenes, for example, the web page screenshot function is used for capturing screen saving pictures or continuing sharing operation, and compared with common link sharing, the web page screenshot function has the advantages of richer display, more information bearing and the like. The front-end screenshot function to be implemented on a page is typically implemented based on DOM, and is not 100% accurate to the real representation, since the actual screenshot cannot be generated, but rather the screen shots are built based on the information available on the page.
At present, a relatively common screenshot mode is to use an open-source screenshot npm library to redraw a page through a graphics API to generate a picture, wherein the screenshot mode comprises two implementation schemes of SVG (dom-to-image) and Canvas (html 2 Canvas). However, both the above methods cannot support all css attributes, and thus cannot obtain an accurate screenshot result for the front-end webpage.
Disclosure of Invention
In view of the above, the present application provides a method and apparatus for capturing images of a front-end web page, a storage medium, and a terminal, and aims to solve the technical problem that the accurate capturing images of the front-end web page cannot be obtained.
According to one aspect of the present application, there is provided a screenshot method for a front-end webpage, including:
responding to a screenshot instruction aiming at a target area, and identifying each document object model node contained in the target area;
converting each document object model node into corresponding preset format vector graphic data, wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode;
and assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area.
Preferably, the assigning the preset format vector graphics data to a picture display path to output a screenshot result for the target area specifically includes:
if the system for outputting the screenshot result is a non-preset system, assigning the preset format vector graphic data to a display path of a preset image object;
and outputting the screenshot result based on a preset image drawing interface when the loading completion event of the preset image object is monitored.
Preferably, the assigning the preset format vector graphics data to a picture display path to output a screenshot result for the target area further includes:
if the system for outputting the screenshot result is a preset system, assigning the preset format vector graphic data to a display path of a preset image object, and placing the preset image object in a temporary document object model node;
and when the loading completion event of the preset image object is monitored, outputting the screenshot result based on a preset image drawing interface, and deleting the temporary document object model node.
Preferably, the converting the document object model nodes into corresponding vector graphics data in a preset format specifically includes:
cloning each document object model node based on a preset method to generate a first cloning node of each document object model node;
respectively adding original attribute characteristics of each document object model node to the first clone node based on a first marking and then replacing mode to generate a second clone node;
respectively adding original font characteristics of each document object model node to the second clone node based on an embedding mode to generate a third clone node;
converting each third clone node into a vector graph with a preset format;
and converting the preset format vector graphic into preset format vector graphic data.
Preferably, the method for generating the second clone node based on the mark-first and replacing mode adds the original attribute features of each document object model node to the first clone node respectively, specifically includes:
traversing original attribute features of each document object model node, screening out unsupported attribute features, and marking the unsupported attribute features as preset alias attribute features;
and adding the preset alias attribute features and the corresponding original attribute features to the first clone node to generate a second clone node.
Preferably, the embedding method is based on adding original font features of each document object model node to the second clone node to generate a third clone node, which specifically includes:
traversing the original font characteristics of each document object model node to obtain a full-scale network font embedded statement;
acquiring files corresponding to each network font according to the network font embedded statement;
and carrying out coding processing on the content of the file, and adding the content of the file subjected to coding processing to the second cloning node to generate a third cloning node.
Preferably, after the assigning the preset format vector graphics data to a picture display path to output a screenshot result for the target area, the method further includes:
copying the screenshot result, and outputting a picture saving button and/or a picture sharing button;
and executing a saving task aiming at the screenshot result and/or sharing the task according to the triggering operation of the user.
According to another aspect of the present application, there is provided a screenshot device for a front-end webpage, including:
the identifying module is used for responding to the screenshot instruction aiming at the target area and identifying each document object model node contained in the target area;
the conversion module is used for converting each document object model node into corresponding preset format vector graphic data, wherein the attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and the font characteristics are obtained based on an embedding mode;
and the output module is used for assigning the vector graphic data in the preset format to a picture display path so as to output a screenshot result aiming at the target area.
Preferably, the output module is specifically configured to:
if the system for outputting the screenshot result is a non-preset system, assigning the preset format vector graphic data to a display path of a preset image object;
and outputting the screenshot result based on a preset image drawing interface when the loading completion event of the preset image object is monitored.
Preferably, the output module further includes:
if the system for outputting the screenshot result is a preset system, assigning the preset format vector graphic data to a display path of a preset image object, and placing the preset image object in a temporary document object model node;
and when the loading completion event of the preset image object is monitored, outputting the screenshot result based on a preset image drawing interface, and deleting the temporary document object model node.
Preferably, the conversion module specifically includes:
the cloning unit is used for carrying out cloning processing on each document object model node based on a preset method and generating a first cloning node of each document object model node;
a label replacing unit, configured to respectively add original attribute features of each document object model node to the first clone node based on a label replacing manner, and generate a second clone node;
the embedding unit is used for respectively adding the original font characteristics of each document object model node to the second cloning node based on an embedding mode to generate a third cloning node;
the first conversion unit is used for converting each third clone node into a vector graph with a preset format;
and the second conversion unit is used for converting the preset format vector graphic into preset format vector graphic data.
Preferably, the tag replacement unit is specifically configured to:
traversing original attribute features of each document object model node, screening out unsupported attribute features, and marking the unsupported attribute features as preset alias attribute features;
and adding the preset alias attribute features and the corresponding original attribute features to the first clone node to generate a second clone node.
Preferably, the embedding unit is specifically configured to:
traversing the original font characteristics of each document object model node to obtain a full-scale network font embedded statement;
acquiring files corresponding to each network font according to the network font embedded statement;
and carrying out coding processing on the content of the file, and adding the content of the file subjected to coding processing to the second cloning node to generate a third cloning node.
Preferably, after the output module, the apparatus further includes:
the copying module is used for copying the screenshot result, outputting a picture saving button and/or a picture sharing button;
and the execution module is used for executing a storage task aiming at the screenshot result and/or sharing the task according to the triggering operation of the user.
According to still another aspect of the present application, there is provided a storage medium having stored therein at least one executable instruction for causing a processor to perform operations corresponding to the screenshot method for a front-end web page described above.
According to still another aspect of the present application, there is provided a computer apparatus including: the device comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete communication with each other through the communication bus;
the memory is used for storing at least one executable instruction, and the executable instruction enables the processor to execute the operation corresponding to the screenshot method for the front-end webpage.
By means of the technical scheme, the technical scheme provided by the embodiment of the application has at least the following advantages:
the application provides a screenshot method and device for a front-end webpage, a storage medium and a terminal, wherein the screenshot method and device for the front-end webpage comprises the steps of firstly, responding to a screenshot instruction for a target area, and identifying each document object model node (dom node) contained in the target area; secondly, converting each document object model node into corresponding preset format vector graphic data (data URL data of svg), wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode; and finally, assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area. Compared with the prior art, the embodiment of the application firstly takes the svg format picture as the basic material, thereby ensuring that the basic svg material can be normally displayed; the attribute characteristics of each node are supported based on a mode of marking and replacing, and the font characteristics of each node are supported based on an embedding mode, so that the accuracy of a screenshot result is improved; in addition, the aim of compatibility with multiple systems is fulfilled by adding a temporary dom node to prerenderize the screenshot result.
The foregoing description is only an overview of the present application, and is intended to be implemented in accordance with the teachings of the present application in order that the same may be more clearly understood and to make the same and other objects, features and advantages of the present application more readily apparent.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the application. Also, like reference numerals are used to designate like parts throughout the figures. In the drawings:
FIG. 1 shows a flowchart of a screenshot method for a front-end webpage according to an embodiment of the present application;
FIG. 2 shows a method for outputting screenshot results provided by an embodiment of the present application;
FIG. 3 shows another method for outputting screenshot results provided by an embodiment of the present application;
FIG. 4 is a flow chart illustrating node conversion provided by an embodiment of the present application;
FIG. 5 is a block diagram illustrating a screenshot device for a front-end web page according to an embodiment of the present application;
fig. 6 shows a schematic structural diagram of a computer device according to an embodiment of the present application.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
The embodiment of the application can acquire and process the related data based on the artificial intelligence technology. Among these, artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a digital computer-controlled machine to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use knowledge to obtain optimal results.
Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and other directions.
In this regard, in one embodiment, as shown in fig. 1, a screenshot method for a front-end webpage is provided, and an example of application of the method to a computer device such as a server is described, where the server may be an independent server, or may be a cloud server that provides cloud services, a cloud database, cloud computing, a cloud function, cloud storage, a network service, cloud communication, a middleware service, a domain name service, a security service, a content delivery network (Content Delivery Network, CDN), and basic cloud computing services such as a big data and an artificial intelligent platform, such as an intelligent medical system, a digital medical platform, and the like. The method comprises the following steps:
101. in response to the screenshot instructions for the target region, each document object model node contained within the target region is identified.
The document object model node is used for representing DOM element nodes, and it can be understood that a plurality of DOM element nodes can be contained in one front-end webpage. In the embodiment of the application, a user firstly selects a target area of the expected screenshot based on terminal equipment at the user side, wherein the target area can be a product benefit introduction part or a product purchase condition part of a financial product detail page. For example, when the terminal device at the user side is a computer device, the target area may be selected through an external input device (such as a mouse, a keyboard, etc.); when the terminal device on the user side is a mobile phone device, the target area may be selected by a manner such as a screenshot gesture and a screenshot button, which is not limited in detail in the embodiment of the present application. Further, after selecting the target area of the expected screenshot, the user may initiate a screenshot instruction based on the terminal device on the user side. The current execution end (which may be a front-end webpage screenshot control unit) responds to a screenshot instruction aiming at a target area, and can identify each document object model node contained in the target area by calling a preset screenshot method, wherein the preset screenshot method is an exemplary method of toPng (domnodes), and the domNode parameters represent all DOM element nodes contained in the selected target area in the html webpage, and the screenshot range is all DOM element nodes contained in the target area; the options parameter may be used to configure an attribute of the screenshot result, including width/height (width/height) background color (bgcolor) of the screenshot result, quality of the picture (quality), and so on.
It should be noted that, the screenshot result expected to be generated based on the toPng (domnodes) method is in png picture format, the screenshot result expected to be generated by the topg method is in jpg picture format, the screenshot result expected to be generated by the topblob method is in blob binary picture format, and the screenshot result expected to be generated by the topixel data method is in original pixel value picture format, etc.
102. And converting each document object model node into corresponding vector graphic data in a preset format.
The attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking and replacing, and the font characteristics are obtained based on an embedding mode; the vector graphics with the preset format are used for representing the svg scalable vector graphics; the preset format vector graphic data are used for representing data URL data after svg conversion; attribute features of the document object model node, such as text background clipping attribute features (background-clip) background mixed mode attribute features (background-clip-mode), element shadow effect attribute features (box-shadow), filter effect attribute features (filter), element deformation effect attribute features (rotation/distortion/scale/movement transform), and css new attributes with different support degrees for different browsers; font features are used to characterize embedded web fonts maintained in the server, font declarations being typically made in css by @ font-face. In the embodiment of the application, a toSvg method is called based on a preset screenshot method (such as toPng) in the embodiment step 101 to convert each document object model node into a scalable vector graphic svg, meanwhile, the attribute characteristics of the document object model node are processed based on a mark-before-replacement mode, font attributes of the document object model node are processed based on an embedding mode, so that a high-reality svg is generated, and then the svg is converted into data URL data.
103. And assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area.
In the embodiment of the present application, by assigning the svg converted data URL data obtained in the embodiment step 102 to the picture display path src (path), the screenshot result corresponding to the target area can be output at the user terminal.
It should be noted that, in order to realize compatibility of the screenshot result output at different terminal device systems, different output modes may be configured according to different terminal device systems, for example, the terminal device systems are divided into ios terminal device systems and non-ios terminal device systems, and corresponding output modes are configured.
Compared with the prior art, the embodiment of the application firstly takes the svg format picture as the basic material, thereby ensuring that the basic svg material can be normally displayed; the attribute characteristics of each node are supported based on a mode of marking and replacing, and the font characteristics of each node are supported based on an embedding mode, so that the accuracy of a screenshot result is improved; in addition, the aim of compatibility with multiple systems is fulfilled by adding a temporary dom node to prerenderize the screenshot result.
In one embodiment of the present application, for further definition and explanation, embodiment step 103 assigns the preset format vector graphics data to the picture display path to output the screenshot result for the target area, and specifically includes:
201. if the system for outputting the screenshot result is a non-preset system, the preset format vector graphic data is assigned to the display path of the preset image object.
202. And when a loading completion event of the preset image object is monitored, outputting a screenshot result based on the preset image drawing interface.
The non-preset system is used for representing systems except for ios systems, such as a common browser chrome/edge/safari of a pc end, a browser of an android device of a mobile phone end, a WebView page embedded in a WebView of an app inside a company, and the like; the preset Image object is used for representing the Image object; the preset image drawing interface is used for representing a canvas drawing picture interface. In the embodiment of the application, an Image object is firstly created, and a data URL of the svg is assigned to a display path attribute src of the Image object; when the loading completion event of the image object is monitored, calling a canvas drawing picture interface to return a picture with a required format so as to complete the output program of the screenshot result.
In one embodiment of the present application, for further definition and explanation, the embodiment step 103 assigns the preset format vector graphics data to the picture display path to output the screenshot result for the target area, and further includes:
301. if the system for outputting the screenshot result is a preset system, assigning the preset format vector graphic data to a display path of a preset image object, and placing the preset image object in a temporary document object model node.
302. And when a loading completion event of the preset image object is monitored, outputting a screenshot result based on the preset image drawing interface, and deleting the temporary document object model node.
The preset system is used for representing the ios system, for example, a browser of the ios device at a mobile phone end, a WebView page embedded in an app inside a company and the like; the temporary document object model node is used to characterize temporary DOM element nodes. In the embodiment of the application, because the ios system needs to display in the document, otherwise, a picture cannot be generated, when an Image object is needed to be newly built, the newly built Image object is placed in a temporary DOM element node, and then the data URL of the svg is assigned to the display path attribute src of the Image object, so that the picture rendering is completed in the temporary DOM element node. Further, when the loading completion event of the image object is monitored, calling a canvas drawing picture interface to return a picture with a required format, and deleting the temporary DOM element node to avoid adding useless nodes.
In one embodiment of the present application, for further definition and explanation, step 102 converts each document object model node into corresponding vector graphics data in a preset format, and specifically includes:
401. and cloning each document object model node based on a preset method to generate a first cloning node of each document object model node.
The preset method can be a cloonenode method, and cloning of the original DOM element nodes is achieved in a recursion mode. In the embodiment of the application, first, element nodes with tags such as canvas, video, iframe are converted into image objects, and a first clone node of each document object model node is generated.
402. And respectively adding the original attribute characteristics of each document object model node to the first clone node based on the mode of marking and replacing, and generating a second clone node.
In the embodiment of the application, the values of all css attributes of the node elements can be repeatedly obtained through a getComputedStyle method, and the style attributes are inserted into the newly-built style labels, wherein when the values of the css attributes are the attribute features which cannot be supported, the attribute features which cannot be supported are marked as preset alias attribute features, and the preset alias attribute features and the corresponding original attribute features are added into the first clone node to generate the second clone node. By taking a background-clip text as an example, the attribute features represent clipping attributes, attributes with background picture patterns can be clipped according to text contents, but the getComputedStyle method cannot obtain a pattern with-webkit background clipping, at this time, the background-clip can be replaced by a preset alias attribute feature has-background-clip, the preset alias attribute feature has-background-clip and corresponding values are set in cloned dot element nodes, and finally, the corresponding attributes are replaced back to the attributes supportable by the browser when the svg URL is generated.
It should be noted that, the getComputedStyle (element) method is a method of browser object window, by which an object can be returned, and the style used for obtaining the actual display of the element (i.e. the value actually presented on the screen) can include attribute characteristics, font characteristics and the like; and traversing the object returned by the method, and acquiring a value corresponding to the style attribute through getPropertyValue (propName).
Correspondingly, the embodiment step 402 specifically includes: traversing original attribute features of each document object model node, screening out unsupported attribute features, and marking the unsupported attribute features as preset alias attribute features; and adding the preset alias attribute features and the corresponding original attribute features to the first clone node to generate a second clone node.
403. And respectively adding the original font characteristics of each document object model node to the second clone node based on the embedding mode to generate a third clone node.
In the embodiment of the application, firstly, all network font embedded declarations @ font-face are searched; analyzing the file URL, and downloading a corresponding font file, wherein the format type of the font file can comprise ttf, woff, woff2 and the like; further, the content of the font file is encoded to solve the problem of cross-domain and improve the conversion efficiency; then the data URL is connected in an inline way; finally, a < style > element is placed and then appended to the clone to generate a third clone node.
Correspondingly, the embodiment step 403 specifically includes: traversing the original font characteristics of each document object model node to obtain a full-scale network font embedded statement; acquiring files corresponding to each network font according to the network font embedded statement; and carrying out coding processing on the content of the file, and adding the content of the file subjected to coding processing to the second cloning node to generate a third cloning node.
404. And converting each third clone node into a vector graph with a preset format.
In an embodiment of the present application, based on the < foreignObject > element of the svg (elements with other XML namespaces may be used therein), XHTML elements may be embedded inside the svg; serializing the XML document or Node object into a character string of unresolved XML mark through the XMLLIAIIzer object; the string is embedded in the < foreignObject > tag.
405. And converting the preset format vector graphic into preset format vector graphic data.
In the embodiment of the application, the image/svg+xml can be obtained through data; charset=utf-8, $ { svg } converts the pre-format vector graphic svg into pre-format vector graphic data URL data and returns.
In one embodiment of the present application, for further defining and describing, the embodiment step 103 assigns the preset format vector graphics data to the picture display path, so as to output the screenshot result for the target area, where the embodiment method further includes: copying the screenshot result, and outputting a picture saving button and/or a picture sharing button; and executing a saving task aiming at the screenshot result and/or sharing the task according to the triggering operation of the user.
In the embodiment of the application, the current page is an exemplary detail page of a financial product, the screenshot result is an area of a product profit part, the current execution end copies the screenshot result and outputs a stored picture button and a shared picture button when outputting the screenshot result, and the current execution end can output only a single button or two buttons simultaneously; further, when the user clicks the picture saving button, only the task of saving the picture is executed, and when the user clicks the picture sharing button, the user jumps to the sharing interface and simultaneously executes the task of saving the picture.
The application provides a screenshot method for a front-end webpage, which comprises the steps of firstly, responding to a screenshot instruction for a target area, and identifying each document object model node (dom node) contained in the target area; secondly, converting each document object model node into corresponding preset format vector graphic data (data URL data of svg), wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode; and finally, assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area. Compared with the prior art, the embodiment of the application firstly takes the svg format picture as the basic material, thereby ensuring that the basic svg material can be normally displayed; the attribute characteristics of each node are supported based on a mode of marking and replacing, and the font characteristics of each node are supported based on an embedding mode, so that the accuracy of a screenshot result is improved; in addition, the aim of compatibility with multiple systems is fulfilled by adding a temporary dom node to prerenderize the screenshot result.
Further, as an implementation of the method shown in fig. 1, an embodiment of the present application provides a screenshot device for a front-end webpage, as shown in fig. 5, where the device includes:
an identification module 51, a conversion module 52, and an output module 53.
An identifying module 51, configured to identify, in response to a screenshot instruction for a target area, each document object model node contained in the target area;
the conversion module 52 is configured to convert the respective document object model nodes into corresponding preset format vector graphics data, where attribute features of the respective document object model nodes included in the preset format vector graphics data are obtained based on a mode of marking first and replacing then, and font features are obtained based on an embedding mode;
and the output module 53 is configured to assign the preset format vector graphics data to a picture display path, so as to output a screenshot result for the target area.
In a specific application scenario, the output module is specifically configured to:
if the system for outputting the screenshot result is a non-preset system, assigning the preset format vector graphic data to a display path of a preset image object;
and outputting the screenshot result based on a preset image drawing interface when the loading completion event of the preset image object is monitored.
In a specific application scenario, the output module further includes:
if the system for outputting the screenshot result is a preset system, assigning the preset format vector graphic data to a display path of a preset image object, and placing the preset image object in a temporary document object model node;
and when the loading completion event of the preset image object is monitored, outputting the screenshot result based on a preset image drawing interface, and deleting the temporary document object model node.
In a specific application scenario, the conversion module specifically includes:
the cloning unit is used for carrying out cloning processing on each document object model node based on a preset method and generating a first cloning node of each document object model node;
a label replacing unit, configured to respectively add original attribute features of each document object model node to the first clone node based on a label replacing manner, and generate a second clone node;
the embedding unit is used for respectively adding the original font characteristics of each document object model node to the second cloning node based on an embedding mode to generate a third cloning node;
the first conversion unit is used for converting each third clone node into a vector graph with a preset format;
and the second conversion unit is used for converting the preset format vector graphic into preset format vector graphic data.
In a specific application scenario, the label replacing unit is specifically configured to:
traversing original attribute features of each document object model node, screening out unsupported attribute features, and marking the unsupported attribute features as preset alias attribute features;
and adding the preset alias attribute features and the corresponding original attribute features to the first clone node to generate a second clone node.
In a specific application scenario, the embedding unit is specifically configured to:
traversing the original font characteristics of each document object model node to obtain a full-scale network font embedded statement;
acquiring files corresponding to each network font according to the network font embedded statement;
and carrying out coding processing on the content of the file, and adding the content of the file subjected to coding processing to the second cloning node to generate a third cloning node.
In a specific application scenario, after the output module, the apparatus further includes:
the copying module is used for copying the screenshot result, outputting a picture saving button and/or a picture sharing button;
and the execution module is used for executing a storage task aiming at the screenshot result and/or sharing the task according to the triggering operation of the user.
The application provides a screenshot device for a front-end webpage, which is characterized in that firstly, a screenshot instruction for a target area is responded, and each document object model node (dom node) contained in the target area is identified; secondly, converting each document object model node into corresponding preset format vector graphic data (data URL data of svg), wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode; and finally, assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area. Compared with the prior art, the embodiment of the application firstly takes the svg format picture as the basic material, thereby ensuring that the basic svg material can be normally displayed; the attribute characteristics of each node are supported based on a mode of marking and replacing, and the font characteristics of each node are supported based on an embedding mode, so that the accuracy of a screenshot result is improved; in addition, the aim of compatibility with multiple systems is fulfilled by adding a temporary dom node to prerenderize the screenshot result.
According to one embodiment of the present application, there is provided a storage medium storing at least one executable instruction for performing the screenshot method for a front-end web page in any of the method embodiments described above.
Based on such understanding, the technical solution of the present application may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.), and includes several instructions for causing a computer device (may be a personal computer, a server, or a network device, etc.) to execute the method described in the respective implementation scenario of the present application.
Fig. 6 is a schematic structural diagram of a terminal according to an embodiment of the present application, which is not limited to the specific implementation of the terminal.
As shown in fig. 6, the terminal may include: a processor 602, a communication interface (Communications Interface), a memory 606, and a communication bus 608.
Wherein: processor 602, communication interface 604, and memory 606 perform communication with each other via communication bus 608.
Communication interface 604 is used to communicate with network elements of other devices, such as clients or other servers.
The processor 602 is configured to execute the program 610, and may specifically perform relevant steps in the screenshot method embodiment for a front-end webpage.
In particular, program 610 may include program code including computer-operating instructions.
The processor 602 may be a central processing unit CPU or a specific integrated circuit ASIC (Application Specific Integrated Circuit) or one or more integrated circuits configured to implement embodiments of the present application. The one or more processors included in the computer device may be the same type of processor, such as one or more CPUs; but may also be different types of processors such as one or more CPUs and one or more ASICs.
A memory 606 for storing a program 610. The memory 606 may comprise high-speed RAM memory or may further comprise non-volatile memory (non-volatile memory), such as at least one disk memory.
The program 610 may be specifically operable to cause the processor 602 to:
responding to a screenshot instruction aiming at a target area, and identifying each document object model node contained in the target area;
converting each document object model node into corresponding preset format vector graphic data, wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode;
and assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area.
The storage medium may also include an operating system, a network communication module. The operating system is a program that manages the entity device hardware and software resources described above for the screenshot of the front-end web page, supporting the execution of information handling programs and other software and/or programs. The network communication module is used for realizing communication among all components in the storage medium and communication with other hardware and software in the information processing entity equipment.
In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different manner from other embodiments, so that the same or similar parts between the embodiments are mutually referred to. For system embodiments, the description is relatively simple as it essentially corresponds to method embodiments, and reference should be made to the description of method embodiments for relevant points.
The method and system of the present application may be implemented in a number of ways. For example, the methods and systems of the present application may be implemented by software, hardware, firmware, or any combination of software, hardware, firmware. The above-described sequence of steps for the method is for illustration only, and the steps of the method of the present application are not limited to the sequence specifically described above unless specifically stated otherwise. Furthermore, in some embodiments, the present application may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present application. Thus, the present application also covers a recording medium storing a program for executing the method according to the present application.
It will be appreciated by those skilled in the art that the modules or steps of the application described above may be implemented in a general purpose computing device, they may be concentrated on a single computing device, or distributed across a network of computing devices, they may alternatively be implemented in program code executable by computing devices, so that they may be stored in a memory device for execution by computing devices, and in some cases, the steps shown or described may be performed in a different order than that shown or described, or they may be separately fabricated into individual integrated circuit modules, or multiple modules or steps within them may be fabricated into a single integrated circuit module for implementation. Thus, the present application is not limited to any specific combination of hardware and software.
The above description is only of the preferred embodiments of the present application and is not intended to limit the present application, but various modifications and variations can be made to the present application by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the protection scope of the present application.
Claims (10)
1. A method for capturing a screenshot of a front-end web page, comprising:
responding to a screenshot instruction aiming at a target area, and identifying each document object model node contained in the target area;
converting each document object model node into corresponding preset format vector graphic data, wherein attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and font characteristics are obtained based on an embedding mode;
and assigning the vector graphic data in the preset format to a picture display path to output a screenshot result aiming at the target area.
2. The method according to claim 1, wherein assigning the pre-formatted vector graphics data to a picture display path to output a screenshot result for the target area, specifically comprises:
if the system for outputting the screenshot result is a non-preset system, assigning the preset format vector graphic data to a display path of a preset image object;
and outputting the screenshot result based on a preset image drawing interface when the loading completion event of the preset image object is monitored.
3. The method of claim 1, wherein assigning the pre-formatted vector graphics data to a picture display path to output a screenshot result for the target region, further comprises:
if the system for outputting the screenshot result is a preset system, assigning the preset format vector graphic data to a display path of a preset image object, and placing the preset image object in a temporary document object model node;
and when the loading completion event of the preset image object is monitored, outputting the screenshot result based on a preset image drawing interface, and deleting the temporary document object model node.
4. The method according to claim 1, wherein the converting the respective document object model nodes into corresponding pre-formatted vector graphics data specifically comprises:
cloning each document object model node based on a preset method to generate a first cloning node of each document object model node;
respectively adding original attribute characteristics of each document object model node to the first clone node based on a first marking and then replacing mode to generate a second clone node;
respectively adding original font characteristics of each document object model node to the second clone node based on an embedding mode to generate a third clone node;
converting each third clone node into a vector graph with a preset format;
and converting the preset format vector graphic into preset format vector graphic data.
5. The method according to claim 4, wherein the step of adding original attribute features of each document object model node to the first clone node in a label-first-replacement manner to generate a second clone node includes:
traversing original attribute features of each document object model node, screening out unsupported attribute features, and marking the unsupported attribute features as preset alias attribute features;
and adding the preset alias attribute features and the corresponding original attribute features to the first clone node to generate a second clone node.
6. The method according to claim 4, wherein the generating a third clone node by adding original font features of each document object model node to the second clone node based on the embedding manner, comprises:
traversing the original font characteristics of each document object model node to obtain a full-scale network font embedded statement;
acquiring files corresponding to each network font according to the network font embedded statement;
and carrying out coding processing on the content of the file, and adding the content of the file subjected to coding processing to the second cloning node to generate a third cloning node.
7. The method of claim 1, wherein after assigning the pre-formatted vector graphics data to a picture display path to output a screenshot result for the target region, the method further comprises:
copying the screenshot result, and outputting a picture saving button and/or a picture sharing button;
and executing a saving task aiming at the screenshot result and/or sharing the task according to the triggering operation of the user.
8. A screenshot device for a front-end web page, comprising:
the identifying module is used for responding to the screenshot instruction aiming at the target area and identifying each document object model node contained in the target area;
the conversion module is used for converting each document object model node into corresponding preset format vector graphic data, wherein the attribute characteristics of each document object model node contained in the preset format vector graphic data are obtained based on a mode of marking first and replacing then, and the font characteristics are obtained based on an embedding mode;
and the output module is used for assigning the vector graphic data in the preset format to a picture display path so as to output a screenshot result aiming at the target area.
9. A storage medium having stored therein at least one executable instruction for causing a processor to perform operations corresponding to a screenshot method for a front-end web page as recited in any one of claims 1-7.
10. A computer device, comprising: the device comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete communication with each other through the communication bus;
the memory is configured to store at least one executable instruction, where the executable instruction causes the processor to perform operations corresponding to the method for capturing a front-end web page according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310913390.0A CN116954450A (en) | 2023-07-24 | 2023-07-24 | Screenshot method and device for front-end webpage, storage medium and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310913390.0A CN116954450A (en) | 2023-07-24 | 2023-07-24 | Screenshot method and device for front-end webpage, storage medium and terminal |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116954450A true CN116954450A (en) | 2023-10-27 |
Family
ID=88445752
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310913390.0A Pending CN116954450A (en) | 2023-07-24 | 2023-07-24 | Screenshot method and device for front-end webpage, storage medium and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116954450A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117411847A (en) * | 2023-12-14 | 2024-01-16 | 彩讯科技股份有限公司 | Mail out-link picture transfer method, system and medium |
| CN117707681A (en) * | 2023-12-27 | 2024-03-15 | 上海神功意匠网络科技有限公司 | Picture generation method and device based on client host |
| CN117892698A (en) * | 2024-03-14 | 2024-04-16 | 成都数之联科技股份有限公司 | A text gradient rendering method, device and storage medium |
-
2023
- 2023-07-24 CN CN202310913390.0A patent/CN116954450A/en active Pending
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117411847A (en) * | 2023-12-14 | 2024-01-16 | 彩讯科技股份有限公司 | Mail out-link picture transfer method, system and medium |
| CN117411847B (en) * | 2023-12-14 | 2024-03-08 | 彩讯科技股份有限公司 | Mail out-link picture transfer method, system and medium |
| CN117707681A (en) * | 2023-12-27 | 2024-03-15 | 上海神功意匠网络科技有限公司 | Picture generation method and device based on client host |
| CN117892698A (en) * | 2024-03-14 | 2024-04-16 | 成都数之联科技股份有限公司 | A text gradient rendering method, device and storage medium |
| CN117892698B (en) * | 2024-03-14 | 2024-06-07 | 成都数之联科技股份有限公司 | Text gradual change rendering method, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| CN116954450A (en) | Screenshot method and device for front-end webpage, storage medium and terminal | |
| Zhang et al. | Viscode: Embedding information in visualization images using encoder-decoder network | |
| CN111741329B (en) | Video processing method, device, equipment and storage medium | |
| CN108984070B (en) | Method, apparatus, electronic device and readable medium for thermodynamic diagram imaging | |
| CN113158101A (en) | Visual page rendering method, device, equipment and storage medium | |
| CN111951356B (en) | Animation rendering method based on JSON data format | |
| CN112905944A (en) | Page online dynamic generation method and device, electronic equipment and readable storage medium | |
| CN113377453A (en) | Picture processing method and device and electronic equipment | |
| CN112632425A (en) | Method, device, equipment and storage medium for generating offline resource file | |
| CN110162301B (en) | Form rendering method, form rendering device and storage medium | |
| CN104156421A (en) | Method, device and system for displaying page | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN113190509A (en) | Animation processing method and device, electronic equipment and computer readable storage medium | |
| CN119415580A (en) | Data export method, device and equipment based on rich text editor | |
| US12182501B2 (en) | Systems and methods for conversion of documents to reusable content types | |
| CN112328930B (en) | Webpage rendering method, server, client and system based on cobalt | |
| CN113902018B (en) | Image sample generation method, device, computer readable medium and electronic device | |
| CN111949266B (en) | Webpage generation method and device and electronic equipment | |
| CN115455327A (en) | Page template generation method, electronic device, storage medium and program product | |
| CN111913703B (en) | Object editing method, device, electronic equipment and readable storage medium | |
| CN112558973A (en) | Front-end page generation method and device, storage medium and electronic device | |
| CN112163179A (en) | Screen drawing method and system | |
| CN113518248A (en) | Program publishing method, device and system |
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 |