Screenshot methods, devices, and electronic equipment

Abstract

This application provides a page screenshot method, including: loading a page to be rendered in a browser; executing a pre-set global variable function to render the page; and taking a screenshot of the page after the rendering operation is completed. The page screenshot method provided by this application can quickly and efficiently capture page screenshots while maintaining compatibility. This application also provides a page screenshot device and an electronic device.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and more specifically, to a method, apparatus, and electronic device for taking screenshots of web pages. Background Technology

[0002] With the increasing prevalence of SaaS (Software as a Service) software deployment models, more third-party vendors of graphic design software are building applications on cloud infrastructure, allowing users to access them on devices with an internet connection and a web browser. The ability to quickly view cloud file content and take screenshots of user files will impact the user experience.

[0003] Methods for taking screenshots of file content typically include browser screenshots and server screenshots. Figure 1 Generally, image generation involves using browser-provided graphics APIs (such as Canvas, SVG, etc.) to redraw the page. Server-side screenshots, on the other hand, use a headless browser (such as Puppeteer) to mimic opening and rendering the page, then take a screenshot and generate an image.

[0004] However, redrawing the page using the browser's graphics API is equivalent to reimplementing the browser's rendering process, which is complex and cumbersome. It also has poor support for some CSS property values ​​and presents compatibility issues with front-end browsers. Server-side screenshot methods have limited ability to capture the content of files generated by cloud-based drawing and design software with special data structures. Furthermore, screenshot services consume significant server resources, limiting batch screenshot capabilities and resulting in low performance in weak network environments. Summary of the Invention

[0005] To address the problems existing in the prior art, embodiments of this application provide a page screenshot method, apparatus, and electronic device that can quickly and efficiently capture page screenshots while also ensuring compatibility.

[0006] In a first aspect, embodiments of this application provide a method for taking screenshots of a webpage, including:

[0007] Load the browser's page to be rendered;

[0008] Execute the pre-defined global variable function to render the page to be rendered; and

[0009] Take a screenshot of the page after the rendering process is complete.

[0010] Furthermore, the step of executing a pre-set global variable function to perform rendering operations on the page to be rendered includes:

[0011] Preprocess the data of the page to be rendered;

[0012] Collect the data of the page to be rendered; and

[0013] The rendering operation of the page to be rendered is performed through the global variable function.

[0014] Furthermore, the preprocessing of the page data to be rendered includes:

[0015] Initialize global variables in the browser environment.

[0016] Furthermore, the collection of the page data to be rendered includes:

[0017] The page to be rendered and screenshot configuration parameters are passed in, and the page to be rendered is used to parse data and collect screenshots.

[0018] Furthermore, the page to be rendered in the browser includes:

[0019] The structured data passed to the browser; and

[0020] The structured data is converted into HTML string format data.

[0021] Further, the step of converting the structured data into HTML string format data includes:

[0022] The browser's structured data is used to generate a DOM tree by invoking the DOM renderer; and

[0023] The DOM tree is converted into HTML string format data.

[0024] Furthermore, after taking a screenshot of the page after the rendering operation is completed, the process also includes:

[0025] Save the screenshot of the page.

[0026] Secondly, embodiments of this application also provide a page screenshot device, including:

[0027] The page loading module is used to load the page to be rendered in the browser;

[0028] The page rendering module is used to execute pre-set global variable functions to perform rendering operations on the page to be rendered; and

[0029] The screenshot module is used to take screenshots of the page after the rendering process is complete.

[0030] Thirdly, embodiments of this application also provide an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor is configured to execute the program to implement the page screenshot method described in the first aspect above.

[0031] Fourthly, embodiments of this application also provide a computer-readable storage medium having a computer program stored thereon, the computer program being used to implement the page screenshot method according to the first aspect described above.

[0032] Fifthly, embodiments of this application also provide a computer program product having a computer program stored thereon, the computer program being used to implement the page screenshot method according to the first aspect described above.

[0033] The embodiments of this application bring the following beneficial effects:

[0034] The page screenshot method provided in this application, after loading the page to be rendered in the browser, executes a global variable function through a headless browser, achieving screenshots or batch screenshots with only one page resource load, thus optimizing server resource usage. Furthermore, it can reproduce the rendering process of cloud-based drawing software files, ensuring high consistency between the captured images and content; and it avoids front-end compatibility issues across numerous browsers and terminals. Attached Figure Description

[0035] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on the structures shown in these drawings without creative effort.

[0036] Figure 1 A schematic flowchart illustrating a page screenshot method provided in an embodiment of this application;

[0037] Figure 2 A structural block diagram of the page screenshot device provided in the embodiments of this application;

[0038] Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0039] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0040] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of the embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of this application.

[0041] In the specification, claims, and accompanying drawings of this application, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, unless otherwise stated, "a plurality of" means two or more. Those skilled in the art can understand the specific meaning of the above terms in this application according to the specific circumstances.

[0042] Figure 1 This is a flowchart of a page screenshot method according to an embodiment of this application. Figure 1 As shown, the page screenshot method of this application embodiment includes the following steps:

[0043] S101: Load the browser's page to be rendered;

[0044] Specifically, the server loads the rendered pages organized by the front end using Puppeteer, a Node library that provides a high-level API to control browsers such as Chromium or Chrome via the DevTools protocol. Puppeteer runs in headless mode by default, eliminating the need for a graphical interface; most operations that can be performed manually in a browser can be accomplished using Puppeteer. The server loads the rendered pages organized by the front end using the Puppeteer headless browser.

[0045] Taking the route / router / snapshot.html as an example, Puppeteer can restrict access permissions through server configuration to avoid potential security risks. Developers of cloud-based drawing and design software products can optimize the rendering process based on the existing product front-end code repository, extract the product's front-end general DOM renderer (which can generate a DOM tree when structured data is input), and then configure the page snapshot.html using front-end engineering tools (such as Webpack). This page can share the DOM renderer and common components with the main product and can be packaged into a separate page.

[0046] S102: Execute the pre-set global variable function to perform rendering operations on the page to be rendered;

[0047] Specifically, once the browser loads the page to be rendered, it executes a pre-set global variable function to perform rendering operations on the page.

[0048] The code for the global variable function is `window['SNAPSHOT_CONTROL'] = {pushTaskOption, runRenderAsync, resumeTask}`. `SNAPSHOT_CONTROL` predefines three functions: `pushTaskOption`, `runRenderAsync`, and `resumeTask`, which are:

[0049] a) pushTaskOption: Takes in file ID and screenshot configuration parameters, parses file data, outputs structured data; sets screenshot size, collects the list of pages to be screenshotted, and sets the current screenshot task;

[0050] b) runRenderAsync: Reads the current screenshot task page data, calls structuredDataToHTMLString, and renders the returned result into a page in the browser using document.body.innerHTML;

[0051] c) resumeTask: Sets up the next screenshot task.

[0052] The runRenderAsync function is used to complete the rendering operation of the page to be rendered.

[0053] S103: Take a screenshot of the page after rendering is complete.

[0054] In other words, once the page to be rendered has completed the rendering process, a screenshot operation is performed. That is, based on the set screenshot size and the list of pages to be screenshotted, the task of taking a screenshot of the current page is completed.

[0055] Therefore, the page screenshot method provided in this application, after loading the page to be rendered in the browser, executes a global variable function through a headless browser, achieving screenshot or batch screenshots with only one page resource loading, thus optimizing server resource usage. Furthermore, it can reproduce the rendering process of cloud-based drawing software files, ensuring high consistency between the captured images and content; and it avoids front-end compatibility issues across numerous browsers and terminals.

[0056] Furthermore, in some embodiments of this application, the step of executing a pre-set global variable function to perform rendering operations on the page to be rendered includes:

[0057] Preprocess the data of the page to be rendered;

[0058] Collect the data of the page to be rendered; and

[0059] The rendering operation of the page to be rendered is performed through the global variable function.

[0060] Specifically, after the browser finishes loading the page to be rendered, it is necessary to preprocess the data of the page to be rendered, such as converting structured data into HTML string format data, and collecting the HTML string format data of the page to be rendered. Then, the rendering operation of the page to be rendered is performed through a global variable function, which facilitates the subsequent screenshot operation.

[0061] Furthermore, in some embodiments of this application, the preprocessing of the page data to be rendered includes:

[0062] Initialize global variables in the browser environment.

[0063] Specifically, when the rendering page organized by the front end is loaded, the global variable function window['SNAPSHOT_CONTROL'] is initialized in the Puppeteer browser environment. As mentioned above, SNAPSHOT_CONTROL predefines three functions: pushTaskOption, runRenderAsync, and resumeTask, which are used to take screenshots of the page to be rendered in the browser.

[0064] Furthermore, in some embodiments of this application, collecting the data of the page to be rendered includes:

[0065] The page to be rendered and screenshot configuration parameters are passed in, and the page to be rendered is used to parse data and collect screenshots.

[0066] Specifically, the data collection process for the page to be rendered includes passing in the page to be rendered and screenshot configuration parameters, parsing the data of the page to be rendered, and collecting screenshots, thereby facilitating the smooth completion of browser page screenshots.

[0067] Furthermore, in some embodiments of this application, loading the browser's page to be rendered includes:

[0068] The structured data passed to the browser; and

[0069] The structured data is converted into HTML string format data.

[0070] Specifically, the global variable function `structuredDataToHTMLString` is used to pass in structured data. By calling the DOM renderer, it can generate a DOM tree and convert the output data into HTML string format, thus facilitating the smooth completion of browser page screenshots.

[0071] Furthermore, in some embodiments of this application, the step of converting the structured data into HTML string format data includes:

[0072] The browser's structured data is used to generate a DOM tree by invoking the DOM renderer; and

[0073] The DOM tree is converted into HTML string format data.

[0074] Specifically, the global variable function `structuredDataToHTMLString` is used to pass in structured data. By calling the DOM renderer, it can generate a DOM tree and convert the output data into HTML string format, thus facilitating the smooth completion of browser page screenshots.

[0075] Furthermore, in some embodiments of this application, after taking a screenshot of the page after the rendering operation is completed, the method further includes:

[0076] Save the screenshot of the page.

[0077] After the browser takes a screenshot, the screenshot needs to be saved. The specific saving format can be a single image or a compressed file containing multiple images, so that users can easily view the screenshot of the browser page.

[0078] Furthermore, when the rendered page of the front-end organization is loaded, the global variable `window['SNAPSHOT_CONTROL']` is initialized in the Puppeteer browser environment. The following demonstration screenshots illustrate the execution process in a Node.js environment:

[0079] 1) Pass in the file and screenshot configuration parameters (parameters) to perform... document The code for data parsing and screenshot collection is as follows:

[0080] page.evaluate(`((option)=>

[0081] window.${SNAPSHOT_CONTROL}.pushTaskOption(option))(JSON.str ingify(parameters))`)

[0082] 2) Render the current screenshot task page, the code is as follows:

[0083] page.evaluate(`(()=>window.${SNAPSHOT_CONTROL}.runRenderAsync())()`)

[0084] 3) Take a screenshot and save it. The code is as follows:

[0085] page.screenshot({type:"png",path:"file.png"}).

[0086] Therefore, the page screenshot method provided in this application, after loading the page to be rendered in the browser, executes a global variable function through a headless browser, achieving screenshot or batch screenshots with only one page resource loading, thus optimizing server resource usage. Furthermore, it can reproduce the rendering process of cloud-based drawing software files, ensuring high consistency between the captured images and content; and it avoids front-end compatibility issues across numerous browsers and terminals.

[0087] Figure 2 This is a structural block diagram of the page screenshot device 200 according to an embodiment of this application. Figure 2 As shown, the page screenshot device 200 of this application embodiment includes: a page loading module 210, a page rendering module 220, and a screenshot module 230, wherein:

[0088] Page loading module 210 is used to load the browser's page to be rendered;

[0089] Page rendering module 220 is used to execute pre-set global variable functions to perform rendering operations on the page to be rendered; and

[0090] The screenshot module 230 is used to take screenshots of the page after the rendering operation is completed.

[0091] The page screenshot device provided in this application, after loading the page to be rendered in the browser, executes a global variable function through a headless browser, enabling screenshots or batch screenshots with only one page resource loading, thus optimizing server resource usage. Furthermore, it can reproduce the rendering process of cloud-based drawing software files, ensuring high consistency between the captured images and content; and it avoids front-end compatibility issues across numerous browsers and terminals.

[0092] It should be noted that the specific implementation of the page screenshot device in this application embodiment is similar to the specific implementation of the page screenshot method in this application embodiment. Please refer to the description in the method section for details, which will not be repeated here.

[0093] Figure 3 This is a schematic diagram of the structure of the electronic device 300 according to an embodiment of this application.

[0094] like Figure 3 As shown, the electronic device 300 includes a central processing unit (CPU) 301, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 302 or a program loaded from the storage section 302 into a random access memory (RAM) 303. The RAM 303 also stores various programs and data required for the operation of the electronic device 300. The CPU 301, ROM 302, and RAM 303 are interconnected via a bus 304. An input / output (I / O) interface 305 is also connected to the bus 304.

[0095] The following components are connected to I / O interface 305: an input section 306 including a keyboard, mouse, etc.; an output section 307 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 308 including a hard disk, etc.; and a communication section 309 including a network interface card such as a LAN card, modem, etc. The communication section 309 performs communication processing via a network such as the Internet. A drive 310 is also connected to I / O interface 305 as needed. A removable medium 311, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 310 as needed so that computer programs read from it can be installed into storage section 308 as needed.

[0096] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a machine-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 309, and / or installed from removable medium 311. When the computer program is executed by central processing unit (CPU) 301, it performs the functions defined in the electronic device of this application.

[0097] It should be noted that the computer-readable medium shown in this application may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example,—but not limited to—an electronic device, apparatus, or device that is electrical, magnetic, optical, electromagnetic, infrared, or semiconductor, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof.

[0098] In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used or combined with an electronic device, apparatus, or device by instructions. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use or combined with an electronic device, apparatus, or device by instructions. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wireline, optical fiber, RF, etc., or any suitable combination thereof.

[0099] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of processing and receiving devices, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based electronic device that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0100] The units or modules described in the embodiments of this application can be implemented in software or hardware. The described units or modules can also be housed in a processor, which executes the program to implement the page screenshot method.

[0101] Load the browser's page to be rendered;

[0102] Execute the pre-defined global variable function to render the page to be rendered; and

[0103] Take a screenshot of the page after the rendering process is complete.

[0104] In another aspect, this application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable storage medium stores one or more programs, which, when used by one or more processors, execute the page screenshot method described in this application:

[0105] Load the browser's page to be rendered;

[0106] Execute the pre-defined global variable function to render the page to be rendered; and

[0107] Take a screenshot of the page after the rendering process is complete.

[0108] On the other hand, this application also provides a computer program product, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer program product stores one or more programs, which, when used by one or more processors, execute the page screenshot method described in this application:

[0109] Load the browser's page to be rendered;

[0110] Execute the pre-defined global variable function to render the page to be rendered; and

[0111] Take a screenshot of the page after the rendering process is complete.

[0112] The above description is merely a preferred embodiment of this application and does not limit the patent scope of this application. Any equivalent structural transformations made based on the content of this application's specification and drawings under the concept of this application, or direct / indirect applications in other related technical fields, are included within the patent protection scope of this application.

Claims

1. A method for taking a screenshot of a webpage, characterized in that, include: Load the front-end organized page to be rendered using a headless browser; and Execute the pre-set global variable function to render the page to be rendered; and Take a screenshot of the page after the rendering process is complete. The global variable function is initialized and resides in memory in the headless browser environment. It has multiple predefined sub-functions for data parsing, calling the DOM renderer for rendering and task switching. It supports multiple rounds of screenshot task reuse and only requires one page resource load to complete batch screenshots.

2. The page screenshot method according to claim 1, characterized in that, The step of executing a pre-set global variable function to render the page to be rendered includes: Preprocess the data of the page to be rendered; Collect the data of the page to be rendered; and The rendering operation of the page to be rendered is performed through the global variable function.

3. The page screenshot method according to claim 2, characterized in that, The preprocessing of the page data to be rendered includes: Initialize global variables in the browser environment.

4. The page screenshot method according to claim 2, characterized in that, The collection of the data for the page to be rendered includes: The page to be rendered and screenshot configuration parameters are passed in, and the page to be rendered is used to parse data and collect screenshots.

5. The page screenshot method according to claim 1, characterized in that, The page to be rendered in the browser includes: The structured data passed to the browser; and The structured data is converted into HTML string format data.

6. The page screenshot method according to claim 5, characterized in that, The step of converting the structured data into HTML string format data includes: The browser's structured data is used to generate a DOM tree by invoking the DOM renderer; and The DOM tree is converted into HTML string format data.

7. The page screenshot method according to claim 1, characterized in that, After taking a screenshot of the page after the rendering operation is completed, the following is also included: Save the screenshot of the page.

8. A page screenshot device, characterized in that, include: The page loading module is used to load the front-end organized pages to be rendered through a headless browser. The page rendering module is used to execute the pre-set global variable function to perform rendering operations on the page to be rendered. The global variable function is initialized in the headless browser environment and resides in memory. It has multiple predefined sub-functions for data parsing, calling the DOM renderer for rendering execution and task switching. It supports multiple rounds of screenshot task reuse and only requires one page resource loading to complete batch screenshots. and The screenshot module is used to take screenshots of the page after the rendering process is complete.

9. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, implements the page screenshot method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program for implementing the page screenshot method according to any one of claims 1-7.

Images