CN112306619A - Screenshot method and device - Google Patents
Screenshot method and device Download PDFInfo
- Publication number
- CN112306619A CN112306619A CN202011391636.5A CN202011391636A CN112306619A CN 112306619 A CN112306619 A CN 112306619A CN 202011391636 A CN202011391636 A CN 202011391636A CN 112306619 A CN112306619 A CN 112306619A
- Authority
- CN
- China
- Prior art keywords
- page
- canvas
- screenshot
- data
- browser
- 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 60
- 238000009877 rendering Methods 0.000 claims description 15
- 238000012545 processing Methods 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 6
- 238000012800 visualization Methods 0.000 claims description 6
- 238000004458 analytical method Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 22
- 238000010586 diagram Methods 0.000 description 16
- 230000006870 function Effects 0.000 description 16
- 230000008569 process Effects 0.000 description 11
- 238000004590 computer program Methods 0.000 description 7
- 238000010367 cloning Methods 0.000 description 5
- 230000008901 benefit Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 239000003999 initiator Substances 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004883 computer application Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the invention provides a screenshot method and a screenshot device, which are applied to terminal equipment, wherein the terminal equipment runs with a browser, and a drawing image element canvas is deployed on the browser, and the screenshot method comprises the following steps: receiving a screenshot instruction aiming at the global wide area network (WWAN) WEB application displayed by the browser; responding to the screenshot command, and generating page copy data aiming at the currently displayed page of the WEB application; calling the canvas to generate a first canvas object from the page copy data; converting the first canvas object into a first character string; and calling the browser to analyze the first character string to generate screenshot data. The embodiment of the invention does not need to repeat page development, only needs to copy the page and draw pictures, and reduces the cost of page development.
Description
Technical Field
The invention relates to the technical field of computer application, in particular to a screenshot method and a screenshot device.
Background
In actual WEB (World Wide WEB) interactive application, a user often has a scene requirement for screenshot on a page; a user can intercept an interested image part in a screen interface through screenshot operation, and the realization scheme of the prior art is that the user initiates a request and submits data through a page, and the data is sent to a server to generate an image and then sent to terminal equipment of the user. The technical scheme of the server-side implementation usually needs to acquire screen information on terminal equipment of an initiator, so as to develop and implement page layout and generate pictures, and not only web pages are developed, but also the server-side page function is developed based on the original design layout of the pages; resulting in increased cost of page implementation.
Disclosure of Invention
In view of the above, embodiments of the present invention are proposed to provide a screenshot method and a corresponding screenshot apparatus that overcome or at least partially solve the above-mentioned problems.
The embodiment of the invention discloses a screenshot method, which is applied to terminal equipment, wherein the terminal equipment runs with a browser, and a drawing image element canvas is deployed on the browser, and the screenshot method comprises the following steps:
receiving a screenshot instruction aiming at the global wide area network (WWAN) WEB application displayed by the browser;
responding to the screenshot command, and generating page copy data aiming at the currently displayed page of the WEB application;
calling the canvas to generate a first canvas object from the page copy data;
converting the first canvas object into a first character string;
and calling the browser to analyze the first character string to generate screenshot data.
Optionally, the step of generating page copy data for the currently displayed page of the WEB application in response to the screenshot command includes:
responding to the screenshot command, and acquiring a Document Object Model (DOM) corresponding to a currently displayed page of the WEB application, wherein the DOM comprises style information and structure information;
and generating page copy data based on the style information and the structure information.
Optionally, the step of invoking the canvas to generate the page copy data into the first canvas object includes:
calling the canvas to render the style information and the structure information to obtain corresponding page elements;
and performing visualization processing on the page element to generate a first canvas object.
Optionally, the step of calling the canvas to render the DOM style and the DOM structure to obtain the corresponding page element includes:
calling the canvas to read the style information and the structure information;
drawing the style information and the structure information according to a preset drawing rule to generate a DOM combination;
and rendering the DOM combination to obtain the corresponding page element.
Optionally, the step of converting the first canvas object into a first character string includes:
and converting the first canvas object into a first character string by adopting a base64 encoding rule.
Optionally, the method further comprises:
receiving a sharing operation command aiming at the screenshot data;
and responding to the sharing operation command, and sharing the screenshot data.
Optionally, the method further comprises:
receiving expansion data;
calling the canvas to generate a second canvas object by the page copy data and the expansion data;
the second canvas object is translated into a second string.
The embodiment of the invention also discloses a screenshot device, which is applied to terminal equipment, wherein the terminal equipment runs with a browser, and a rendering image element canvas is deployed on the browser, and the screenshot device comprises:
the first receiving module is used for receiving a screenshot instruction of the global wide area network (WWAN) WEB application displayed by the browser;
the first response module is used for responding to the screenshot command and generating page copy data aiming at the currently displayed page of the WEB application;
the canvas module is used for calling the canvas to generate a first canvas object from the page copy data;
a first conversion module, configured to convert the first canvas object into a first character string;
and the analysis module is used for calling the browser to analyze the first character string and generating screenshot data.
The embodiment of the invention also discloses a vehicle comprising:
one or more processors; and
one or more machine readable media having instructions stored thereon that, when executed by the one or more processors, cause the vehicle to perform one or more methods as described above.
Embodiments of the invention also disclose one or more machine-readable media having instructions stored thereon, which when executed by one or more processors, cause the processors to perform one or more of the methods described above.
The embodiment of the invention has the following advantages:
the embodiment of the invention receives a screenshot instruction aiming at the global wide area network WEB application displayed by the browser; responding to the screenshot command, and generating page copy data aiming at the currently displayed page of the WEB application; calling the canvas to generate a first canvas object from the page copy data; converting the first canvas object into a first character string; and calling the browser to analyze the first character string to generate screenshot data. The whole screenshot process can be realized without repeated page development, only the page element cloning and the picture drawing are needed to be added, the page development cost is reduced, the screenshot function can be realized by small-range development and change based on page bottom element copying, and the technical limitation is small.
Drawings
FIG. 1 is a schematic diagram of a process of generating a picture by screenshot on a WEB page in the prior art;
FIG. 2 is a flow chart of the steps of one embodiment of a screenshot method of the present invention;
FIG. 3 is an exemplary diagram of a process for generating a picture from a screenshot of the present invention;
FIG. 4 is a schematic diagram of an example screenshot method of the present invention;
FIG. 5 is a block diagram of an embodiment of a screenshot device of the present invention.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in further detail below.
It should be noted that, if the screenshot function is not included, only front-end page development and server-side data interface development need to be implemented in the development flow of the WEB page. The front-end development refers to a process of creating a front-end interface such as a WEB page or an APP (application program) and presenting the front-end interface to a user, and the user interface interactive development of an internet product is realized through various technologies, frameworks and solutions derived from HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and Javascript (programming Language). The development of the data interface of the server refers to the development of an interface between the terminal equipment of a user and a hardware system of a server computer, so that the terminal equipment and the server can perform data interaction.
Referring to fig. 1, a schematic diagram of a process of generating a picture by a screenshot of an existing WEB page is shown;
in the prior art, if a screenshot function is to be provided in a WEB page, the front-end page development and the server-end data interface development are needed to be processed, and the layout of the same page is often needed to be realized at the server-end; after a page design draft is developed, the page design draft is divided into two parts for development and realization, wherein firstly, the front end of a page is developed to develop a WEB page capable of interacting with a user; and secondly, developing a page layout server, and rendering the page data layout on the page to generate a page picture. When a user clicks in a WEB page to generate a picture, the WEB page initiates a screenshot request and submits page data; the server side needs to obtain information displayed by a current webpage of a screen of the terminal equipment of the initiator through a generated image interface, further arrange webpage data and then generate a picture of a screenshot. And returning the generated picture file to the terminal equipment, wherein the picture of the screenshot is displayed on the terminal equipment. This results in an increase in the cost of server implementation for page implementation, both to display a WEB page and to develop the function of generating a page by the server based on the original layout of the page. It can be seen that in the prior art, a corresponding functional module needs to be independently developed for generating a picture of a screenshot in a WEB page, which increases implementation cost of the WEB page, interface bearing cost, and consumption cost of a server, and increases implementation cost of page development. The embodiment of the invention is provided for solving the technical problem of cost increase caused by realizing the screenshot function in page development.
Referring to fig. 2, a flowchart illustrating steps of an embodiment of a screenshot method according to the present invention is shown, where the method is applied to a terminal device running a browser on which a rendering image element canvas is deployed;
it should be noted that, the terminal device retrieves, displays, and transmits WEB information resources through a browser. The WEB information associated with each other can be browsed in a browser by means of Hyperlinks (Hyperlinks).
A canvas is a tag newly added in HTML (Hyper Text Markup Language) 5 for generating an image in real time on a web page and manipulating the image content, and is a bitmap (bitmap) which can be manipulated in JavaScript (a high level programming Language). The canvas is designed for terminal device side vector graphics. It does not act on its own, but exposes a drawing API to the terminal device side JavaScript so that the script can draw all things that it wants to draw onto a canvas.
The method specifically comprises the following steps:
it should be noted that, the WEB application is an application program that can be accessed through the WEB, and the greatest benefit of the program is that the user can easily access the application program, and the user only needs to have a browser and does not need to install other software.
When a user accesses a WEB application program through a browser and needs to perform screenshot to generate a screenshot picture, the user initiates a screenshot instruction through a current WEB page of the browser, and the terminal device receives the screenshot instruction aiming at the WEB application page currently displayed by the browser.
and after receiving the screenshot command, the terminal equipment responds to the current displayed page of the WEB application to copy and generate page copy data.
Optionally, the step of generating page copy data for the currently displayed page of the WEB application in response to the screenshot command includes:
step S2021, responding to the screenshot command, acquiring a Document Object Model (DOM) corresponding to a currently displayed page of the WEB application, wherein the DOM comprises style information and structure information;
it should be noted that the DOM is a platform and language independent application program interface that can dynamically access programs and scripts to update their contents and structure. The document may be further processed and the results of the processing may be added to the current page. The DOM is a tree-based API document that requires that the entire document be represented in memory during processing. Different DOMs build different pages, and therefore, each page has a DOM corresponding to it.
Responding to the screenshot command, copying a currently displayed page of the WEB application, and therefore, firstly, acquiring a DOM (document object model) corresponding to the currently displayed page of the WEB application, wherein the DOM can comprise style information and structure information of the page; the style information may be a specific style of the page content data, and a person skilled in the art may select the specific style according to actual requirements, which is not limited in the embodiment of the present invention. The structural information may be a structural relationship between the data.
In the specific implementation, the html code of the currently displayed page of the WEB application can be acquired, and the html code is parsed and constructed into a DOM tree through an html parser, wherein nodes in the DOM tree are the style information; there are various relationships between nodes, such as parent and child, brothers, and then a received CSS (Cascading Style Sheets) code may be used to construct a Style sheet rule through a CSS parser, where the Style sheet rule may be structural information. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports almost all font and font styles and has the capability of editing webpage objects and model styles.
Step S2022, generating page copy data based on the style information and the structure information.
And after the style information and the structure information in the page are obtained, copying and cloning the style information and the structure information in the page to generate page copy data.
invoking the canvas of the browser to generate a single canvas picture element object from the page copy data.
Optionally, the step of invoking the canvas to generate the page copy data into the first canvas object includes:
step S2031, calling the canvas to render the style information and the structure information to obtain corresponding page elements;
and rendering the style information and the structure information in the page copy data by calling the canvas to obtain a corresponding page element after the style information and the structure information are combined.
Optionally, the step of calling the canvas to render the DOM style and the DOM structure to obtain the corresponding page element includes:
step S20311, calling the canvas to read the style information and the structure information;
and calling the canvas to read the style information and the structure information in the page copy data, and temporarily storing the style information and the structure information in the canvas.
Step S20312, drawing the style information and the structure information according to a preset drawing rule, and generating a DOM combination;
combining the style information and the structure information stored in the canvas according to a preset drawing rule, and drawing to generate a DOM combination; the preset drawing rule may be drawing from top to bottom and from left to right, and those skilled in the art may also select different drawing rules according to actual requirements, which is not limited in the embodiment of the present invention.
Step S20313, rendering the DOM combination to obtain corresponding page elements.
And rendering the DOM combination to obtain the corresponding page element.
Step S2032, perform visualization processing on the page element, and generate a first canvas object.
At this time, in an implementation level, the page element is already implemented and the page is already generated, but the page cannot see the actual appearance of the page at this time in the user, so that the page element needs to be visualized to generate the first canvas object.
In specific implementation, the terminal device can read document nodes of the DOM tree in the sequence from top to bottom and from left to right, store the document nodes in the document stream in sequence, and place the read node in a parent node when the node belongs to a child node under another node; according to the structure information, nesting layer by layer, but the nesting level is not limited, after the document is completely arranged, the CSS attributes such as the coordinates and the size of the calculation nodes are obtained, the layout of the page copy data is completed, and after the layout is completed, only the position of each node object to be placed on the page is calculated, but visualization is not achieved. The last step is thus to visualize all the content, generating the first canvas object.
the first canvas object generated by copying the page data of the page is unrecognizable to the terminal device, and therefore, the first canvas object needs to be converted into first character string data recognizable to the terminal device.
Optionally, the step of converting the first canvas object into a first character string includes:
step S2041, using a base64 encoding rule to convert the first canvas object into a first character string.
The first canvas object may be escaped to the first string in base64 encoding format using the base64 encoding rules by the canvas toDataURL method. The base64 encoding is a method for representing binary data based on 64 printable characters, and is one of the common encoding methods for transmitting 8-Bit byte codes. In addition, those skilled in the art may also use other encoding methods to convert the first canvas object into data of a character string type that can be recognized by the terminal device.
The terminal device calls the browser to recognize the first character string so as to generate screenshot data, and the terminal device can display the screenshot data on a current screen to enable a user to check screenshot shapes of pages. Compared with the prior art, the method has the advantages that the screenshot function can be realized only by the front-end technology, the WEB page effect can be accurately restored in equal proportion, the realization cost and the interface of the server side are saved, the performance is shared on the page terminal, and the server overhead cost is saved.
Optionally, the method further comprises:
step S1, receiving a sharing operation command for the screenshot data;
when the terminal equipment generates screenshot data and displays the screenshot data on a current display screen of the terminal equipment, a user can initiate a sharing operation request through the viewing interface.
And step S2, responding to the sharing operation command, and sharing the screenshot data.
And after receiving the sharing operation command, the terminal equipment shares the screenshot data. The user may share the screenshot data with other application programs in the terminal device for use, or share the screenshot data with other terminal devices or other users.
Optionally, the method further comprises:
step S3, receiving expansion data;
after generating screenshot data, because the canvas has a drawing function, the canvas can receive expanded data for screenshot under the condition that a picture is generated on a page; and the expandability of the page implementation is increased. For example, the expansion data may be a screenshot watermark, a promotion two-dimensional code, time, a place, and the like, and a person skilled in the art may select different expansion data according to actual requirements, which is not limited in the embodiment of the present invention.
Step S4, invoking the canvas to generate a second canvas object from the page copy data and the extension data;
and reusing the page copy data stored in the canvas, and fusing the received expansion data with the original page copy data to generate a second canvas object. Similarly, the style information and the structural information in the page copy data can be rendered in the extension data by calling the canvas, so as to obtain the corresponding page element after the style information and the structural information are combined. And generating a second canvas object by performing visual processing on the page element
Step S5, converting the second canvas object into a second character string.
The generated second canvas object is also unrecognizable to the terminal device, and therefore, the second canvas object needs to be converted into second character string data recognizable to the terminal device. Wherein the second character string data may be the second character string data in base64 encoding format.
In addition, the second character string can also be recognized by the browser to generate picture data for the user to edit, share and the like.
The embodiment of the invention receives a screenshot instruction aiming at the global wide area network WEB application displayed by the browser; responding to the screenshot command, and generating page copy data aiming at the currently displayed page of the WEB application; calling the canvas to generate a first canvas object from the page copy data; converting the first canvas object into a first character string; and calling the browser to analyze the first character string to generate screenshot data. The whole screenshot process can be realized without repeated page development, only the page element cloning and the picture drawing are needed to be added, the page development cost is reduced, the screenshot function can be realized by small-range development and change based on page bottom element copying, and the technical limitation is small. Secondly, interface calling is saved, codes of functions are completely interpreted and run by a JS engine (browser integration engine, the responsibility is to run front-end javascript codes) of the terminal, the running cost born by the server is shared, and the overall access stability of the page is improved.
For a clearer understanding of the present invention, referring to fig. 3, an exemplary diagram of a process of generating a picture by screenshot according to the present invention is shown;
in the embodiment of the invention, the screenshot function is provided in the WEB page only by developing at the front end. After a page design draft is developed, a page can be generated only by developing the front end of the page, and when a user clicks to generate a picture in a WEB page, the picture can be generated by the technology of generating the picture by integrating the front end of the embodiment of the invention and displayed on terminal equipment. Actual screenshot method referring to fig. 4, a schematic diagram of an example of a screenshot method of the present invention is shown;
after a screenshot request is initiated on a current WEB page, a DOM and a style corresponding to the current webpage are copied through cloning, a canvas object is generated by combining the cloned DOMs through the canvas, picture elements are transferred into a character string coded by base64 through a TODataURL method, and a screenshot picture is generated and displayed to a user through the browser by identifying the character string.
The embodiment of the invention is realized by not repeating the page development, only by adding the page element cloning and drawing the picture, and the development cost is low; secondly, interface calling is saved, codes of functions are completely interpreted and run by a JS engine (browser integration engine, the responsibility is to run front-end javascript codes) of the terminal, the running cost born by the server is shared, and the overall access stability of the page is improved.
It should be noted that, for simplicity of description, the method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the illustrated order of acts, as some steps may occur in other orders or concurrently in accordance with the embodiments of the present invention. Further, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred and that no particular act is required to implement the invention.
Referring to fig. 5, a block diagram of a screenshot apparatus according to an embodiment of the present invention is shown, where the apparatus is applied to a terminal device, the terminal device runs with a browser, and a rendering image element canvas is deployed on the browser, and the apparatus may specifically include the following modules:
a first receiving module 501, configured to receive a screenshot instruction of a global wide area network (ww an) WEB application displayed by the browser;
a first response module 502, configured to respond to the screenshot command, and generate page copy data for a currently displayed page of the WEB application;
the canvas module 503 is used to invoke the canvas to generate a first canvas object from the page copy data;
a first conversion module 504, configured to convert the first canvas object into a first character string;
and an analysis module 505, configured to invoke the browser to analyze the first character string, and generate screenshot data.
Optionally, the first response module 502 includes:
a first response submodule, configured to respond to the screenshot command, and acquire a document object model DOM corresponding to a currently displayed page of the WEB application, where the DOM includes style information and structure information;
and the copying sub-module is used for generating page copying data based on the style information and the structure information.
Optionally, the canvas module comprises:
the rendering submodule is used for calling the canvas to render the style information and the structure information to obtain corresponding page elements;
and the visualization submodule is used for performing visualization processing on the page elements to generate a first canvas object.
Optionally, the rendering sub-module comprises:
a reading unit, configured to call the canvas to read the style information and the structure information;
the drawing unit is used for drawing the style information and the structure information according to a preset drawing rule to generate a DOM combination;
and the rendering unit is used for rendering the DOM combination to obtain the corresponding page element.
Optionally, the first conversion module 504 includes:
and the conversion submodule is used for converting the first canvas object into a first character string by adopting a base64 coding rule.
Optionally, the apparatus further comprises:
the second receiving module is used for receiving a sharing operation command aiming at the screenshot data;
and the sharing module is used for responding to the sharing operation command and sharing the screenshot data.
Optionally, the apparatus further comprises:
the third receiving module is used for receiving the expansion data;
the canvas expanding module is used for calling the canvas to generate a second canvas object by the page copy data and the expanding data;
and the second conversion module is used for converting the second canvas object into a second character string.
For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
An embodiment of the present invention further provides a vehicle, including:
one or more processors; and
one or more machine readable media having instructions stored thereon that, when executed by the one or more processors, cause the vehicle to perform one or more methods as described above.
Embodiments of the invention also provide one or more machine-readable media having instructions stored thereon, which when executed by one or more processors, cause the processors to perform one or more methods as described above.
The embodiments in the present specification are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the embodiments of the invention.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The screenshot method and the screenshot device provided by the invention are described in detail, a specific example is applied in the text to explain the principle and the implementation mode of the invention, and the description of the embodiment is only used for helping to understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. A screenshot method is applied to a terminal device, the terminal device runs with a browser, and a rendering image element canvas is deployed on the browser, and the method comprises the following steps:
receiving a screenshot instruction aiming at the global wide area network (WWAN) WEB application displayed by the browser;
responding to the screenshot command, and generating page copy data aiming at the currently displayed page of the WEB application;
calling the canvas to generate a first canvas object from the page copy data;
converting the first canvas object into a first character string;
and calling the browser to analyze the first character string to generate screenshot data.
2. The method of claim 1, wherein the step of generating page copy data for the currently displayed page of the WEB application in response to the screenshot command comprises:
responding to the screenshot command, and acquiring a Document Object Model (DOM) corresponding to a currently displayed page of the WEB application, wherein the DOM comprises style information and structure information;
and generating page copy data based on the style information and the structure information.
3. The method of claim 2, wherein said step of invoking said canvas to generate said page copy data into a first canvas object comprises:
calling the canvas to render the style information and the structure information to obtain corresponding page elements;
and performing visualization processing on the page element to generate a first canvas object.
4. The method of claim 3, wherein the step of invoking the canvas to render the DOM style and the DOM structure to obtain the corresponding page elements comprises:
calling the canvas to read the style information and the structure information;
drawing the style information and the structure information according to a preset drawing rule to generate a DOM combination;
and rendering the DOM combination to obtain the corresponding page element.
5. The method of claim 1, wherein said step of translating said first canvas object into a first string comprises:
and converting the first canvas object into a first character string by adopting a base64 encoding rule.
6. The method according to any one of claims 1 or 5, further comprising:
receiving a sharing operation command aiming at the screenshot data;
and responding to the sharing operation command, and sharing the screenshot data.
7. The method of claim 1, further comprising:
receiving expansion data;
calling the canvas to generate a second canvas object by the page copy data and the expansion data;
the second canvas object is translated into a second string.
8. A screenshot device applied to a terminal device, the terminal device running a browser, and a rendering image element canvas deployed on the browser, the device comprising:
the first receiving module is used for receiving a screenshot instruction of the global wide area network (WWAN) WEB application displayed by the browser;
the first response module is used for responding to the screenshot command and generating page copy data aiming at the currently displayed page of the WEB application;
the canvas module is used for calling the canvas to generate a first canvas object from the page copy data;
a first conversion module, configured to convert the first canvas object into a first character string;
and the analysis module is used for calling the browser to analyze the first character string and generating screenshot data.
9. A vehicle, characterized by comprising:
one or more processors; and
one or more machine readable media having instructions stored thereon that, when executed by the one or more processors, cause the vehicle to perform the method of one or more of claims 1-7.
10. One or more machine readable media having instructions stored thereon that, when executed by one or more processors, cause the processors to perform the method of one or more of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011391636.5A CN112306619A (en) | 2020-12-02 | 2020-12-02 | Screenshot method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011391636.5A CN112306619A (en) | 2020-12-02 | 2020-12-02 | Screenshot method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112306619A true CN112306619A (en) | 2021-02-02 |
Family
ID=74487430
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011391636.5A Pending CN112306619A (en) | 2020-12-02 | 2020-12-02 | Screenshot method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112306619A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114047985A (en) * | 2021-10-21 | 2022-02-15 | 盐城金堤科技有限公司 | Screenshot method, screenshot device, storage medium and electronic equipment |
Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN104598902A (en) * | 2015-01-29 | 2015-05-06 | 百度在线网络技术（北京）有限公司 | Method and device for identifying screenshot and browser |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN104965881A (en) * | 2015-06-12 | 2015-10-07 | 北京奇虎科技有限公司 | Method and device for extracting selected area from page |
| CN105988665A (en) * | 2016-03-17 | 2016-10-05 | 广州阿里巴巴文学信息技术有限公司 | Information copying system, information copying method and electronic device |
| CN106355527A (en) * | 2015-07-15 | 2017-01-25 | 北京鸿合智能系统股份有限公司 | Campus teaching information interaction method and system |
| CN107766359A (en) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | A kind of method, apparatus and computing device that content of pages is converted to picture |
| CN107885848A (en) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | Web page screen-cutting method based on web technology |
| CN109145239A (en) * | 2018-07-31 | 2019-01-04 | 深圳点猫科技有限公司 | A kind of multi-platform screenshot sharing method and electronic equipment based on subject game |
| CN109670132A (en) * | 2018-12-18 | 2019-04-23 | 北京城市网邻信息技术有限公司 | A kind of page method for drafting, device, terminal device and storage medium |
| CN109783759A (en) * | 2019-01-15 | 2019-05-21 | 北京智融网络科技有限公司 | Page screenshot automatic generating method, equipment and readable storage medium storing program for executing |
| CN110347319A (en) * | 2019-06-28 | 2019-10-18 | 浙江口碑网络技术有限公司 | It is a kind of to apply interior screenshot method and device |
| CN111858255A (en) * | 2020-07-27 | 2020-10-30 | 中国平安财产保险股份有限公司 | User behavior acquisition method based on screenshot and related equipment |
| CN111914226A (en) * | 2020-08-06 | 2020-11-10 | 星辰天合（北京）数据科技有限公司 | Background picture generation method and device |
-
2020
- 2020-12-02 CN CN202011391636.5A patent/CN112306619A/en active Pending
Patent Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN104598902A (en) * | 2015-01-29 | 2015-05-06 | 百度在线网络技术（北京）有限公司 | Method and device for identifying screenshot and browser |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN104965881A (en) * | 2015-06-12 | 2015-10-07 | 北京奇虎科技有限公司 | Method and device for extracting selected area from page |
| CN106355527A (en) * | 2015-07-15 | 2017-01-25 | 北京鸿合智能系统股份有限公司 | Campus teaching information interaction method and system |
| CN105988665A (en) * | 2016-03-17 | 2016-10-05 | 广州阿里巴巴文学信息技术有限公司 | Information copying system, information copying method and electronic 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 |
| CN107885848A (en) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | Web page screen-cutting method based on web technology |
| CN109145239A (en) * | 2018-07-31 | 2019-01-04 | 深圳点猫科技有限公司 | A kind of multi-platform screenshot sharing method and electronic equipment based on subject game |
| CN109670132A (en) * | 2018-12-18 | 2019-04-23 | 北京城市网邻信息技术有限公司 | A kind of page method for drafting, device, terminal device and storage medium |
| CN109783759A (en) * | 2019-01-15 | 2019-05-21 | 北京智融网络科技有限公司 | Page screenshot automatic generating method, equipment and readable storage medium storing program for executing |
| CN110347319A (en) * | 2019-06-28 | 2019-10-18 | 浙江口碑网络技术有限公司 | It is a kind of to apply interior screenshot method and device |
| CN111858255A (en) * | 2020-07-27 | 2020-10-30 | 中国平安财产保险股份有限公司 | User behavior acquisition method based on screenshot and related equipment |
| CN111914226A (en) * | 2020-08-06 | 2020-11-10 | 星辰天合（北京）数据科技有限公司 | Background picture generation method and device |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114047985A (en) * | 2021-10-21 | 2022-02-15 | 盐城金堤科技有限公司 | Screenshot method, screenshot device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| CN107766359B (en) | Method and device for converting page content into picture and computing equipment | |
| US10289649B2 (en) | Webpage advertisement interception method, device and browser | |
| CN110309451B (en) | Method and device for generating web preloading page | |
| CN106484408A (en) | A kind of node relationships figure display methods based on HTML5 and system | |
| CN109032917B (en) | Page debugging method and system, mobile terminal and computer terminal | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN112507260A (en) | Webpage loading method and device, electronic equipment and computer readable storage medium | |
| CN100590624C (en) | Method for exhibiting multidimensional space data based on SOA structure | |
| CN111737614B (en) | Page display method, page display device, electronic equipment and storage medium | |
| CN114791988A (en) | Browser-based PDF file analysis method, system and storage medium | |
| CN113326043B (en) | Webpage rendering method, webpage manufacturing method and webpage rendering system | |
| CN104156421A (en) | Method, device and system for displaying page | |
| CN112306619A (en) | Screenshot method and device | |
| US10198408B1 (en) | System and method for converting and importing web site content | |
| Fink et al. | Introducing single page applications | |
| CN115686492A (en) | H5 page editing method and device | |
| CN110647695A (en) | Method and device for converting webpage data into picture attachment | |
| CN111913703A (en) | Object editing method and device, electronic equipment and readable storage medium | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN113326456B (en) | Webpage resource acquisition method, device, equipment, system and storage medium | |
| CN116992183B (en) | Domestic browser adaptation compatible method based on deep learning technology | |
| CN113485714B (en) | Data processing method, device, computer equipment and storage medium | |
| CN117934652A (en) | Poster generation method and device, computer readable storage medium and server | |
| CN118035582A (en) | Picture loading method and device, storage medium and electronic equipment |
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 |