CN112163179A - Screen drawing method and system - Google Patents
Screen drawing method and system Download PDFInfo
- Publication number
- CN112163179A CN112163179A CN202011055461.0A CN202011055461A CN112163179A CN 112163179 A CN112163179 A CN 112163179A CN 202011055461 A CN202011055461 A CN 202011055461A CN 112163179 A CN112163179 A CN 112163179A
- Authority
- CN
- China
- Prior art keywords
- dom
- node
- dom node
- script
- nodes
- 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 43
- 238000010422 painting Methods 0.000 description 6
- 238000009877 rendering Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
The embodiment of the invention provides a screen drawing method, which comprises the following steps: the method comprises the following steps: according to the transmitted DOM node, the JS script obtains the width and the height of the DOM node; step two: creating a canvas of the width and height of the DOM node according to the width and height of the DOM node; step three: the JS script analyzes the DOM nodes layer by layer and acquires DOM child nodes in the DOM nodes; step four: drawing a picture by using the canvas according to the acquired target information; according to the embodiment of the invention, the area screen capturing efficiency is improved, and the product experience of a user is further improved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a screen drawing method and a screen drawing system.
Background
The H5 front-end application needs to achieve the effect similar to the screen capture of a mobile phone in some scenes, and needs to capture the screen according to a specified area, for example, content displayed under a DOM needing to be specified by 'screen capture', wherein the content comprises a background picture, a picture of a fixed area, text content, text color, text font, text size and the like
If a method can be packaged to specially process the requirement, only a DOM node object needing to be drawn needs to be transmitted to draw a picture, and the method solves the requirement through a process of technical means.
Summary of the invention
In order to overcome the defects of the prior art, the invention provides a screen drawing method which is used for solving the problems of low area screen capturing efficiency and poor product experience.
The technical scheme adopted by the invention for solving the technical problems is as follows: provided is a screen drawing method including the steps of:
the method comprises the following steps: according to the transmitted DOM node, the JS script obtains the width and the height of the DOM node;
step two: creating a canvas of the width and height of the DOM node according to the width and height of the DOM node;
step three: the JS script analyzes the DOM nodes layer by layer and acquires DOM child nodes in the DOM nodes;
step four: and drawing a picture by using the canvas according to the acquired target information.
Preferably, before the JS script acquires the width and height of the DOM node according to the incoming DOM node, the steps further include:
transmitting DOM nodes and byte streams;
and calling a document.getElementById method to obtain a DOM node needing to be drawn.
Preferably, after creating the canvas of the DOM node width and height, the steps further include:
and carrying out recursive analysis on the DOM node.
Preferably, after recursively parsing the DOM node, the method further includes:
and when the DOM node is analyzed, checking whether the label contains a custom mark.
Preferably, after checking whether the tag contains the custom flag, the steps further include:
when the check tag contains the custom mark, acquiring the value of the mark;
and when the check tag has no custom mark or the value of the custom mark is empty, performing any processing.
Preferably, the JS script parses the DOM nodes layer by layer, and after acquiring DOM child nodes in the DOM nodes, the steps further include:
the JS script calculates the absolute position of the child node in the current DOM node.
Specifically, the JS script calculates the absolute position of the child node in the current DOM node, the steps include:
the absolute position of the child node includes a pixel value from the top of the DOM and a pixel value from the left of the DOM.
Preferably, after the JS script calculates the absolute position of the child node in the current DOM node, the steps further include:
acquiring style information of the text, wherein the style information comprises text color, text size and text font.
Specifically, according to the acquired target information, drawing a picture by using the canvas, the steps include:
and drawing the picture by using the canvas according to the acquired position information, color, size and font of the DOM node.
A screen rendering system, the system comprising:
the first acquisition unit is used for acquiring the width and the height of the DOM node according to the transmitted DOM node and the JS script;
the creating unit is used for creating a canvas of the DOM node according to the width and the height of the DOM node;
the second acquisition unit is used for analyzing the DOM nodes layer by the JS script and acquiring DOM child nodes in the DOM nodes;
and the drawing unit is used for drawing the picture by using the canvas according to the acquired target information.
The invention has the beneficial effects that: according to the DOM node that spreads into, the JS script acquires the width and the height of DOM node, according to the width and the height of DOM node, establish the canvas of the width and the height of DOM node, the DOM node is analyzed by the JS script layer by layer to acquire the DOM sub-node in the DOM node, according to the target information who acquires, use the picture is drawn to the canvas, thereby improving regional screen capture efficiency, and then improve the user's experience to the product.
Drawings
Fig. 1 is a flow chart diagram of a screen rendering method.
Fig. 2 is a functional block diagram of a screen rendering system.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The following detailed description of specific implementations of the present invention is provided in conjunction with specific embodiments:
the first embodiment is as follows:
fig. 1 shows an implementation flow of a screen drawing method provided in an embodiment of the present invention, and for convenience of description, only the parts related to the embodiment of the present invention are shown, which are detailed as follows:
in step S101: according to the transmitted DOM node, the JS script obtains the width and the height of the DOM node;
preferably, before the JS script acquires the width and height of the DOM node according to the incoming DOM node, the steps further include:
transmitting DOM nodes and byte streams;
and calling a document.getElementById method to obtain a DOM node needing to be drawn.
In step S102: creating a canvas of the width and height of the DOM node according to the width and height of the DOM node;
preferably, after creating the canvas of the DOM node width and height, the steps further include:
and carrying out recursive analysis on the DOM node.
Preferably, after recursively parsing the DOM node, the method further includes:
and when the DOM node is analyzed, checking whether the label contains a custom mark.
Preferably, after checking whether the tag contains the custom flag, the steps further include:
when the check tag contains the custom mark, acquiring the value of the mark;
and when the check tag has no custom mark or the value of the custom mark is empty, performing any processing.
In step S103: the JS script analyzes the DOM nodes layer by layer and acquires DOM child nodes in the DOM nodes;
preferably, the JS script parses the DOM nodes layer by layer, and after acquiring DOM child nodes in the DOM nodes, the steps further include:
the JS script calculates the absolute position of the child node in the current DOM node.
Specifically, the JS script calculates the absolute position of the child node in the current DOM node, the steps include:
the absolute position of the child node includes a pixel value from the top of the DOM and a pixel value from the left of the DOM.
Preferably, after the JS script calculates the absolute position of the child node in the current DOM node, the steps further include:
acquiring style information of the text, wherein the style information comprises text color, text size and text font.
In step S104: and drawing a picture by using the canvas according to the acquired target information.
Specifically, according to the acquired target information, drawing a picture by using the canvas, the steps include:
and drawing the picture by using the canvas according to the acquired position information, color, size and font of the DOM node.
It will be understood by those skilled in the art that all or part of the steps in the method for implementing the above embodiments may be implemented by relevant hardware instructed by a program, and the program may be stored in a computer-readable storage medium, such as ROM/RAM, magnetic disk, optical disk, etc.
Example two:
fig. 2 shows a structure of a screen drawing system according to a second embodiment of the present invention, and for convenience of description, only the parts related to the second embodiment of the present invention are shown, which are detailed as follows:
the first obtaining unit 201 is configured to obtain, according to an incoming DOM node and a JS script, a width and a height of the DOM node;
a creating unit 202, configured to create a canvas of the DOM node according to the width and the height of the DOM node;
the second obtaining unit 203 is used for analyzing the DOM nodes layer by the JS script and obtaining DOM child nodes in the DOM nodes;
and the drawing unit 204 is configured to draw a picture by using the canvas according to the acquired target information.
In the embodiment of the invention, the width and the height of the DOM node are obtained according to the transmitted DOM node and the JS script, the canvas of the width and the height of the DOM node is created according to the width and the height of the DOM node, the JS script analyzes the DOM node layer by layer and obtains DOM sub-nodes in the DOM node, and the canvas is used for drawing pictures according to the obtained target information, so that the efficiency of area screen capturing is improved, the experience of a user on a product is further improved, and the specific implementation mode of each unit can refer to the description of the first embodiment and is not repeated herein.
Example three:
the third embodiment of the invention shows the specific steps of a screen drawing method, which comprises the following steps:
1. encapsulating a Javascript code block, called as js method, which specifies an incoming parameter (DOM node) and a returned data (picture stream), where the incoming parameter is a DOM node, a caller uses document. And the JS program can obtain the DOM of the node according to the document.getElementById method, and after the DOM object of the node is obtained, the DOM object of the node is subjected to recursive analysis, and the JS code block only processes < DIV > and < P > during analysis.
2.1, when the < DIV > is analyzed, whether the label has a self-defined mark ysBgImage is checked, if the self-defined mark ysBgImage exists, the value of the label is obtained, if the self-defined mark ysBgImage does not exist, or the value of the ysBgImage is empty, no processing is carried out, the value of the obtained picture is required to be a string of characters compressed by base64, if the value is utl addresses (for example, http:// url/img. png) of the picture, the picture can be drawn only under the same domain, otherwise, the problem of cross-domain occurs, and an error is reported when the program is drawn. For our procedure to be relatively general, specifying the values here requires a string of characters compressed by base64 to avoid being unusable. After acquiring the base64 characters of the picture, the width and height of the picture are acquired.
2.2, when the < P > is found by analysis, whether the tag has a self-defined mark ysText is checked, if the tag has the self-defined mark ysText, the value of the tag is obtained, the value is the character information on the page, and no processing is performed if the value of the self-defined mark ysText is not found or the value of the ysText is empty. In addition, when the self-defined mark ysText has a value, the position of the current node in the top parent class is required to be obtained, the top parent node of the node can be found in a recursion mode, and the top value and the left value of the current node in the top parent node are obtained; the top value may be obtained from the offset top attribute of the current node, and the left value may be obtained from the offset left attribute of the current node. Reading the customized mark ysTextCss of the < P > node needs to obtain the CSS information of the node, wherein the CSS information describes the size, font and color of the characters
The value acquisition of the above-mentioned custom flag (ysBgImage, ysText, ysTextCss) can be obtained using native JS, using the getAttribute method of the current node.
For example: a var wenben ═ document.
wenben.getAttribute('ysBgImage')；
3. The above steps obtain base64 character strings, picture size, text information, text, left value at the current top node position, top value and text style information. The following starts the rendering:
3.1 first create a canvas, whose size is determined by the size of the picture, create canvas code fragments as follows
...
var canvas＝document.createElement('myCanvas')；
canvas.width＝dom.clientWidth；
canvas.height＝dom.clientHeight；
......
3.2, create a brush, var ctx ═ canvas. getcontext ("2 d"); the role of the brush is to draw, for example, drawing later, writing text in various colors and fonts, and from what position the text starts to be written, based on the brush.
3.3, drawing the picture by using a painting brush, wherein x and y coordinates specified by the drawn picture are both 0, drawing is realized by using a drawing method of the painting brush, the first parameter of the drawing image is a picture stream, the second parameter represents from which the x coordinate of the painting brush starts to be drawn, the third parameter represents from which the y coordinate of the painting brush starts to be drawn, the fourth parameter represents how wide the painting brush needs to draw, the fifth parameter represents how high the painting brush needs to draw, and the following code segments are
And 3.4, drawing characters by using a brush, writing the characters by using a fillText method of the brush, and specifying the writing position of the text, wherein the first parameter is the characters, and the second parameter and the third parameter are position information. The font of the text is specified by the font method of the brush, and the color of the text is specified by the fillStyle method of the brush.
.. code fragment.
var wenzi＝obj.innerText；
ctx.font＝style.font；
ctx.fillStyle＝"#FF0000"；
ctx.fillText(wenzi,offsetLeft,offsetTop)；
......
4. After drawing and text drawing are finished, drawing pictures are obtained by using a method TODataURL () of canvas, the return value is a byte stream of the pictures, a string of character strings after base64 encoding is used, a screenshot is a character string output by the current canvas, and a command description of a browser console is used
5. In addition, the following description is provided: when the toDataURL () is used, the picture can be compressed according to the requirement, so that the bandwidth occupied by the picture uploading is considered, and the IO applied to the server is increased.
6. And (5) completing screen capture of the screen, compressing the picture, converting the picture into base64 and uploading, and ending the process.
In the embodiment of the present invention, the screen drawing may be implemented by corresponding hardware or software units, and each unit may be an independent software or hardware unit, or may be integrated into a software or hardware unit, which is not limited herein.
Those of ordinary skill in the art will appreciate that the elements and algorithm steps of the embodiments described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation.
Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention. The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (10)
1. A screen drawing method, comprising the steps of:
the method comprises the following steps: according to the transmitted DOM node, the JS script obtains the width and the height of the DOM node;
step two: creating a canvas of the width and height of the DOM node according to the width and height of the DOM node;
step three: the JS script analyzes the DOM nodes layer by layer and acquires DOM child nodes in the DOM nodes;
step four: and drawing a picture by using the canvas according to the acquired target information.
2. The method of claim 2, wherein before the JS script obtains the width and height of the DOM node from the incoming DOM node, the steps further comprise:
transmitting DOM nodes and byte streams;
and calling a document.getElementById method to obtain a DOM node needing to be drawn.
3. The screen drawing method of claim 3, wherein after creating the canvas of the DOM node in width and height, the steps further comprise:
and carrying out recursive analysis on the DOM node.
4. The screen drawing method of claim 3, wherein after recursively parsing the DOM node, the steps further comprise:
and when the DOM node is analyzed, checking whether the label contains a custom mark.
5. The screen drawing method of claim 4, wherein after checking whether the tab contains the custom mark, the steps further comprise:
when the check tag contains the custom mark, acquiring the value of the mark;
and when the check tag has no custom mark or the value of the custom mark is empty, performing any processing.
6. The screen drawing method of claim 5, wherein after the JS script parses the DOM nodes layer by layer and obtains DOM children in the DOM nodes, the steps further comprise:
the JS script calculates the absolute position of the child node in the current DOM node.
7. The method of claim 6, wherein the JS script calculates the absolute position of the child node in the current DOM node, said steps comprising:
the absolute position of the child node includes a pixel value from the top of the DOM and a pixel value from the left of the DOM.
8. The method of claim 6, wherein the JS script calculates the absolute position of the child node in the current DOM node, and wherein the method further comprises:
acquiring style information of the text, wherein the style information comprises text color, text size and text font.
9. The screen drawing method according to claim 1, wherein the picture is drawn using the canvas according to the acquired target information, the steps comprising:
and drawing the picture by using the canvas according to the acquired position information, color, size and font of the DOM node.
10. A BI system based data query system, the system comprising:
the first acquisition unit is used for acquiring the width and the height of the DOM node according to the transmitted DOM node and the JS script;
the creating unit is used for creating a canvas of the DOM node according to the width and the height of the DOM node;
the second acquisition unit is used for analyzing the DOM nodes layer by the JS script and acquiring DOM child nodes in the DOM nodes;
and the drawing unit is used for drawing the picture by using the canvas according to the acquired target information.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011055461.0A CN112163179A (en) | 2020-09-29 | 2020-09-29 | Screen drawing method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011055461.0A CN112163179A (en) | 2020-09-29 | 2020-09-29 | Screen drawing method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112163179A true CN112163179A (en) | 2021-01-01 |
Family
ID=73861511
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011055461.0A Pending CN112163179A (en) | 2020-09-29 | 2020-09-29 | Screen drawing method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112163179A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102955854A (en) * | 2012-11-06 | 2013-03-06 | 北京中娱在线网络科技有限公司 | Webpage presenting method and device based on HTML5 (Hypertext Markup Language 5) protocol |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN107766359A (en) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | A kind of method, apparatus and computing device that content of pages is converted to picture |
| CN110442820A (en) * | 2019-07-24 | 2019-11-12 | 上海易点时空网络有限公司 | Picture synthetic method and device for webpage |
-
2020
- 2020-09-29 CN CN202011055461.0A patent/CN112163179A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102955854A (en) * | 2012-11-06 | 2013-03-06 | 北京中娱在线网络科技有限公司 | Webpage presenting method and device based on HTML5 (Hypertext Markup Language 5) protocol |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN107766359A (en) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | A kind of method, apparatus and computing device that content of pages is converted to picture |
| CN110442820A (en) * | 2019-07-24 | 2019-11-12 | 上海易点时空网络有限公司 | Picture synthetic method and device for webpage |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| CN107766359B (en) | Method and device for converting page content into picture and computing equipment | |
| JP5274305B2 (en) | Image processing apparatus, image processing method, and computer program | |
| US8612847B2 (en) | Embedding rendering interface | |
| JP2012059275A (en) | System and method for digital document processing | |
| WO2022048141A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| JP7213291B2 (en) | Method and apparatus for generating images | |
| CN111208998A (en) | Method and device for automatically laying out data visualization large screen and storage medium | |
| CN106776994B (en) | Application method and system of engineering symbols in engineering report forms and web pages | |
| CN115988170B (en) | Method and device for clearly displaying English characters in real-time video combined screen in cloud conference | |
| CN112487763A (en) | SVG-based OFD file online display method, server side and system | |
| CN111915705A (en) | Picture visual editing method, device, equipment and medium | |
| CN111913566B (en) | Data processing method, device, electronic equipment and computer storage medium | |
| CN103577496B (en) | A kind of display methods and device of Email | |
| US20060140513A1 (en) | Dynamic image production method and system | |
| CN117376660A (en) | Subtitle element rendering method, device, equipment, medium and program product | |
| CN113297425B (en) | Document conversion method, device, server and storage medium | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN110211484A (en) | A kind of electronics price tag display methods, system and server and storage medium | |
| JP2010039815A (en) | Web page layout correction system | |
| CN112163179A (en) | Screen drawing method and system | |
| CN107248947A (en) | Expression processing method and processing device, computer equipment and storage medium | |
| CN108519962B (en) | Font display method and apparatus applied to android system, and terminal device | |
| CN112114803A (en) | Deep learning-based front-end code generation method, equipment and medium for UI (user interface) |
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 |