Screenshot image acquisition method and apparatus, device, and computer-readable storage medium

Abstract

The present application relates to the technical field of computers, and discloses a screenshot image acquisition method and apparatus, a device, and a computer-readable storage medium. The method comprises: acquiring, via a JavaScript process, element information of at least one first element comprised in a first screenshot region in a page, wherein the element information of each first element comprises at least one of style information or content information of the first element, and level information of the first element; processing the element information of the at least one first element via a WebAssembly process, so as to obtain pixel information of a plurality of first pixel points corresponding to the at least one first element in a canvas, wherein the pixel information of each first pixel point comprises position information and color information of the first pixel point; and performing, via the JavaScript process, a rendering operation on the canvas on the basis of the pixel information of the plurality of first pixel points, so as to obtain a first screenshot image corresponding to the first screenshot region.

Description

Methods, apparatus, devices, and computer-readable storage media for acquiring screenshot images

[0001] This application claims priority to Chinese Patent Application No. 202510139023.9, filed on February 7, 2025, entitled “Method, Apparatus, Device and Computer-Readable Storage Medium for Acquiring Screenshot Images”, the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of computer technology, and in particular to a method, apparatus, device, and computer-readable storage medium for acquiring screenshot images. Background Technology

[0003] With the continuous development of computer technology, terminal devices are becoming increasingly powerful. For example, screenshots can be taken of the pages displayed on a terminal device to obtain corresponding screenshot images.

[0004] In some methods, the element information of each element included in the screenshot area of ​​the page is obtained through the JavaScript (a high-level, interpreted programming language) process. The element information of each element includes at least one of the element's style information or content information and the element's hierarchy information; a canvas is drawn by calling the canvas API, and the image is rendered on the canvas according to the element information of each element to obtain the screenshot image corresponding to the screenshot area.

[0005] Technical content

[0006] This application provides a method, apparatus, device, and computer-readable storage medium for acquiring screenshot images. The technical solution is as follows:

[0007] This application provides a method for obtaining a screenshot image, the method including:

[0008] The JavaScript process obtains the element information of at least one first element included in the first screenshot area of ​​the page. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0009] The WebAssembly process processes the element information of the at least one first element to determine the pixel information of multiple first pixels corresponding to the at least one first element in the canvas. The pixel information of each first pixel includes the position information and color information of the first pixel.

[0010] The JavaScript process performs a rendering operation on the canvas based on the pixel information of the plurality of first pixels to obtain a first screenshot image corresponding to the first screenshot area, wherein the first screenshot image includes at least one first element.

[0011] This application embodiment also provides a screenshot image acquisition device, the device comprising:

[0012] The acquisition module is used to acquire element information of at least one first element included in the first screenshot area of ​​the page through the JavaScript process. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0013] The processing module is used to process the element information of the at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one first element in the canvas, wherein the pixel information of each first pixel includes the position information and color information of the first pixel.

[0014] The rendering module is used to perform a rendering operation on the canvas based on the pixel information of the plurality of first pixels through the JavaScript process to obtain a first screenshot image corresponding to the first screenshot area, wherein the first screenshot image includes at least one first element.

[0015] This application also provides a computer device, which includes a processor and a memory. The memory stores at least one piece of program code, which is loaded and executed by the processor to enable the computer device to implement any of the above-described methods for acquiring screenshot images.

[0016] This application also provides a computer-readable storage medium storing at least one piece of program code, which is loaded and executed by a processor to enable a computer to implement any of the above-described methods for acquiring screenshot images.

[0017] This application also provides a computer program or computer program product, which stores at least one computer instruction. The at least one computer instruction is loaded and executed by a processor to enable the computer to implement any of the above-described methods for acquiring screenshot images.

[0018] Brief description of the attached figures

[0019] Figure 1 is a schematic diagram of a computer system provided in an embodiment of this application;

[0020] Figure 2 is a flowchart of a method for obtaining a screenshot image provided in an embodiment of this application;

[0021] Figure 3 is a schematic diagram of a first element provided in an embodiment of this application;

[0022] Figure 4 is a schematic diagram of a page provided in an embodiment of this application;

[0023] Figure 5 is a schematic diagram of a first screenshot image corresponding to a first screenshot area provided in an embodiment of this application;

[0024] Figure 6 is a flowchart of a method for obtaining a screenshot image provided in an embodiment of this application;

[0025] Figure 7 is a flowchart of a method for obtaining a screenshot image provided in an embodiment of this application;

[0026] Figure 8 is a schematic diagram of the structure of a screenshot image acquisition device provided in an embodiment of this application;

[0027] Figure 9 is a schematic diagram of the structure of a terminal device provided in an embodiment of this application;

[0028] Figure 10 is a schematic diagram of the structure of a server provided in an embodiment of this application. Detailed Implementation

[0029] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0030] It should be noted that the terms "first," "second," etc., used in this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such terms can be used interchangeably where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0031] Some methods for capturing screenshots involve using JavaScript to obtain element information for each element within the screenshot area; then, the canvas API is called to draw a canvas, and the image is rendered based on the element information to obtain the screenshot image. However, when the screenshot area contains a large number of elements, the limited performance of the canvas itself leads to a long rendering time, which in turn results in a long time required to capture the screenshot image, leading to low efficiency in image capture.

[0032] To address the aforementioned issues, this application provides a method for acquiring screenshot images, which solves the problem that the time required to acquire screenshot images in the above methods is long, resulting in low efficiency in acquiring screenshot images.

[0033] Figure 1 is a schematic diagram of a computer system provided in an embodiment of this application. As shown in Figure 1, the computer system includes a terminal device 101 and a server 102. The terminal device 101 is used to execute the screenshot image acquisition method provided in the embodiment of this application, or the terminal device 101 and the server 102 interact to implement the screenshot image acquisition method provided in the embodiment of this application.

[0034] The terminal device 101 can be any electronic product capable of human-computer interaction with a user through one or more methods such as a keyboard, touchpad, touchscreen, remote control, voice interaction, or handwriting device. Examples include PCs (Personal Computers), mobile phones, smartphones, PDAs (Personal Digital Assistants), wearable devices, PPCs (Pocket PCs), tablets, smart car systems, smart TVs, smart speakers, and in-vehicle terminals. The server 102 can be a single server, a server cluster consisting of multiple servers, or a cloud computing service center; this embodiment does not limit the specific server type. The terminal device 101 and the server 102 are connected via a wired or wireless network.

[0035] In this embodiment, the terminal device 101 has an application installed and running that can display web pages. This application runs a JavaScript process and a WebAssembly process. JavaScript is a high-level, interpreted programming language widely used in web development, primarily to enhance the interactivity and dynamism of web pages. As one of the core technologies for web (World Wide Web) development, JavaScript works in conjunction with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML defines the content structure of web pages, CSS handles styles and layout, and JavaScript controls the behavior and interaction of web pages. Due to its cross-platform compatibility and high adaptability, JavaScript has become one of the most popular and widely used scripting languages.

[0036] WebAssembly (WASM) is a virtual instruction set architecture. Its overall architecture includes core ISA definitions, binary encoding, program semantics definition and execution, and application programming interfaces (APIs) for different embedded environments (such as the web). Its initial goal was to compile program code written in languages ​​such as C / C++, ensuring security and near-native application speeds for better performance on web platforms. WebAssembly is a technology that translates high-performance code written in another programming language into a web-readable format.

[0037] Terminal device 101 displays page 103, on which a screenshot control 104 is displayed. In response to a trigger operation on the screenshot control 104, the JavaScript process obtains element information of at least one first element included in the first screenshot area of ​​page 103. The first screenshot area is the area corresponding to the screenshot control. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element. The JavaScript process sends the element information of at least one first element to the WebAssembly process. The WebAssembly process processes the element information of at least one first element to obtain pixel information of multiple first pixels corresponding to at least one first element in the canvas, so as to realize the drawing of the canvas. The pixel information of each first pixel includes the position information and color information of the first pixel. The WebAssembly process sends the pixel information of at least one first pixel to the JavaScript process. The JavaScript process performs a rendering operation on the canvas according to the pixel information of multiple first pixels corresponding to at least one first element in the canvas, to obtain the first screenshot image 105 corresponding to the first screenshot area.

[0038] Those skilled in the art should understand that the terminal device 101 and server 102 described above are merely illustrative examples. Other existing or future terminal devices and servers that are applicable to this application should also be included within the scope of protection of this application, and are hereby incorporated by reference.

[0039] This application provides a method for acquiring screenshot images. This method can be applied to the implementation environment shown in FIG1. ​​Taking the flowchart of the screenshot image acquisition method provided by this application embodiment shown in FIG2 as an example, this method can be executed by the terminal device 101 in FIG1. ​​As shown in FIG2, the method includes the following steps 201 to 203.

[0040] In step 201, the element information of at least one first element included in the first screenshot area of ​​the page is obtained through the JavaScript process. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0041] In an exemplary embodiment of this application, the style information of each first element includes at least one of the following: position information, size information, RGB (red-green-blue) value of the background color, border style, shadow information, and font style of the included content. The font style of the included content of the first element includes the font format, font size, and RGB value of the font color of the included content. The border style of the first element includes the RGB value of the border color and the line style of the border. The position and size information of the first element are determined based on the shape of the first element. If the shape of the first element is circular, then the position information of the first element is the position information of the center of the circle, and the size information of the first element is the radius of the first element. If the shape of the first element is rectangular, then the position information of the first element is the position information of any point of the first element, and the size information of the first element is the width and height of the first element. Any point of the first element can be its top-left vertex, top-right vertex, bottom-left vertex, bottom-right vertex, or center point; this embodiment does not limit this. The content information of the first element refers to the content included in the first element. The hierarchy information of the first element refers to the level in which the first element resides.

[0042] Figure 3 is a schematic diagram of a first element provided in an embodiment of this application. In Figure 3 (1), the shape of the first element is a rectangle, and the style information of the first element includes the position information (x1, y1), the width of the first element, the height of the first element, the RGB value of the background color of the first element (255, 255, 255), the RGB value of the border color of the first element (0, 0, 0), the line style of the border of the first element (solid line), the shadow information of the first element (no shadow), the font format of the content included in the first element (New Roman font), the font size (14 points) and the RGB value of the font color (0, 0, 0), the content information (XX) of the first element, and the layer information of the first element is the third layer. In Figure 3(2), the first element is circular in shape. The style information of the first element includes the position information (x2, y2), the radius (R) of the first element, the RGB value of the background color of the first element (127, 127, 127), the RGB value of the border color of the first element (0, 0, 0), the line style of the border of the first element (solid line), the shadow information of the first element (no shadow), the font format of the content included in the first element (new Roman font), the font size (14) and the RGB value of the font color (0, 0, 0), the content information (AA) of the first element, and the level information of the first element is the fourth level.

[0043] It should be noted that the element information of the first element may also include other content, and this application embodiment does not limit this.

[0044] In one possible implementation, the terminal device runs an application capable of displaying a page. This application can be of any type, and the page can be of any type; this embodiment does not limit either approach. For example, the application is a browser, and the page is a webpage. The application runs a JavaScript process and a WebAssembly process. The JavaScript process is used to obtain element information of at least one first element included in the first screenshot area. The WebAssembly process is used to obtain pixel information (i.e., pixel information of each first element on the canvas) corresponding to each pixel point of each first element included in the first screenshot area, based on the element information of the at least one first element. When the application is running, the application's homepage is displayed. The homepage / non-homepage displays page information of the page to be screenshotted. The page information can be a link to the page or other information that uniquely identifies the page; this embodiment does not limit either approach. When a user wants to view the page, the user selects the page information, and the terminal device receives the viewing operation for the page and displays the page in response. In response to a screenshot operation on the page, JavaScript is used to obtain element information of at least one first element included in the first screenshot area of ​​the page, where the first screenshot area is the area corresponding to the screenshot operation.

[0045] The page information selected by the user can be selected by clicking the page, double-clicking the page, or through voice control. Users can also select the page information through other methods. This application embodiment does not limit the method of page selection. Figure 4 is a schematic diagram of a page provided in this application embodiment. This page is a webpage.

[0046] It should be noted that when a page contains a lot of content, the screen size of the terminal device is limited. Therefore, when displaying the page on the terminal device, all the content of the page cannot be displayed at once. Therefore, different contents of the page can be displayed on the terminal device by sliding scroll controls, so that all the contents of the page can be displayed on the terminal device, and thus the user can view all the contents of the page.

[0047] This application does not limit the screenshot operation for a page. In some embodiments, if the display duration of the page exceeds a second duration threshold, it is determined that a screenshot operation for the page has been received; or, if a screenshot control is displayed on the page, a screenshot operation for the page is determined to be received in response to a triggering operation of the screenshot control. This implementation provides multiple screenshot methods, allowing screenshots to be taken automatically after the page is displayed or after the screenshot control is triggered, making the screenshot method more flexible and diversifying the triggering conditions for obtaining the screenshot image.

[0048] The second duration threshold is set based on experience or adjusted according to the implementation environment; this embodiment does not limit this. For example, the second duration threshold is 3 seconds, meaning that a screenshot operation is automatically triggered when the page display time exceeds 3 seconds. As shown in Figure 4, 401 in the page represents the screenshot control.

[0049] In some embodiments, the first screenshot area is an area of ​​the page displayed on the terminal device, or the first screenshot area is a portion of the area of ​​the page displayed on the terminal device. That is, a screenshot image can be obtained based on the area of ​​the page displayed on the terminal device, or it can be obtained based on a portion of the area of ​​the page displayed on the terminal device. This method makes the selection of the first screenshot area more flexible, and consequently, makes the size of the screenshot image corresponding to the obtained first screenshot area more flexible.

[0050] In one possible implementation, the process of obtaining element information of at least one first element included in a first screenshot area of ​​a page via a JavaScript process in response to a screenshot operation on the page includes: determining a first screenshot area in the page in response to a screenshot operation on the page; further determining at least one first element included in the first screenshot area; and obtaining element information of at least one first element via a JavaScript process based on the element identifier of at least one first element. Here, the element identifier of each first element refers to an identifier that can uniquely represent the first element.

[0051] In some embodiments, when an application displays a page, it constructs the page's DOM (Document Object Model) tree, which stores element information for each element included in the page. The JavaScript process can traverse the page's DOM tree to obtain element information for at least one first element based on the element identifier of at least one first element included in the first screenshot area.

[0052] In some embodiments, the following program code is executed by a JavaScript process to obtain element information of at least one first element included in the first screenshot area of ​​the page. The language type of the following program code is JavaScript.

[0053] In step 202, the element information of at least one first element is processed by the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one element in the canvas. The pixel information of each first pixel includes the position information and color information of the first pixel.

[0054] In one possible implementation, after the JavaScript process obtains the element information of at least one first element, since the data format of the obtained element information of at least one first element does not support transmission, the JavaScript process cannot directly send the element information of at least one first element to the WebAssembly process. Therefore, the JavaScript process performs a serialization operation on the element information of at least one first element to obtain the serialized element information of each of the at least one first element. The data format of the serialized element information of each first element is a string. The JavaScript process then sends the serialized element information of each of the at least one first element to the WebAssembly process.

[0055] In this implementation, a serialization operation is performed on the element information of at least one first element to obtain the serialized element information of each first element. Since the data format of the serialized element information of each first element is a string format, and the string format information can be transmitted, that is, the string format information can be sent to the WebAssembly process, the serialized element information of each first element is sent to the WebAssembly process so that the element information of at least one first element can be transmitted to the WebAssembly process.

[0056] In one possible implementation, after the JavaScript process performs a serialization operation on the element information of at least one first element to obtain the serialized element information of each of the at least one first element, the total data volume of the serialized element information of each of the at least one first element is large, and the time required to send the serialized element information of each of the at least one first element to the WebAssembly process is long, resulting in low data transmission efficiency. Therefore, the JavaScript process can also perform a format conversion operation on the serialized element information of each of the at least one first element to obtain the format-converted element information of each of the at least one first element. The data volume of the format-converted element information of each first element is smaller than the data volume of the serialized element information of the first element. The JavaScript process then sends the format-converted element information of each of the at least one first element to the WebAssembly process so that the element information of at least one first element can be transmitted to the WebAssembly process.

[0057] The format of each first element after format conversion is uint8array. uint8array is a built-in object in JavaScript that represents an array of 8-bit unsigned integers. Each element occupies 8 bits (1 byte) of memory space in the array, and its value range is from 0 to 255.

[0058] In this implementation, a format conversion operation is performed on the serialized element information of at least one first element to obtain the format-converted element information of at least one first element. Since the total data volume of the format-converted element information of at least one first element is less than the total data volume of the serialized element information of at least one first element, sending the format-converted element information of at least one first element to the WebAssembly process can reduce the amount of data sent, save the time required to send the element information of at least one first element to the WebAssembly process, speed up the sending efficiency of the element information of at least one first element, and thus improve the efficiency of obtaining screenshot images.

[0059] In one possible implementation, after obtaining the serialized element information of at least one first element through the JavaScript process, the serialized element information of at least one first element can also be stored. Since the serialized element information of at least one first element is in string format, string format information occupies less memory, thus memory can be managed more effectively and memory usage can be reduced.

[0060] This application does not limit the method by which the JavaScript process sends at least one element information of each first element after its respective format conversion to the WebAssembly process. In some embodiments, the WebAssembly process can mark some functions as exported functions, and the JavaScript process can call the exported functions to send at least one element information of each first element after its respective format conversion to the WebAssembly process, thereby sending at least one element information of each first element after its respective format conversion to the WebAssembly process, so that the WebAssembly process can obtain at least one element information of each first element after its respective format conversion.

[0061] In some embodiments, the JavaScript process can access and modify shared memory to write at least one first element's format-converted element information into shared memory, and the WebAssembly process can read at least one first element's format-converted element information from shared memory. Thus, the JavaScript process can send at least one first element's format-converted element information to the WebAssembly process, so that the WebAssembly process can obtain at least one first element's format-converted element information.

[0062] In some embodiments, after the JavaScript process sends at least one first element's format-converted element information to the WebAssembly process, the WebAssembly process receives at least one first element's format-converted element information; the WebAssembly process performs a deformatting operation on the at least one first element's format-converted element information to obtain at least one first element's serialized element information; and the WebAssembly process performs a deserializing operation on the at least one first element's serialized element information to obtain at least one first element's individual element information.

[0063] In this implementation, the WebAssembly process performs deformatting and deserialization operations on the element information of at least one first element after its format conversion, so as to obtain the element information of at least one first element. This allows the WebAssembly process to obtain the element information of at least one first element, which facilitates subsequent processing of the element information of at least one first element to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas. Each first element corresponds to at least one first pixel in the canvas.

[0064] In one possible implementation, after obtaining element information of at least one first element through the WebAssembly process, the WebAssembly process processes the element information of at least one first element to obtain pixel information of multiple first pixels corresponding to at least one first element in the canvas. The pixel information of each first pixel includes the position information and color information of the first pixel. In some embodiments, the WebAssembly process runs the following program code to process the element information of at least one first element to obtain pixel information of multiple first pixels corresponding to at least one first element in the canvas. The language type of the following program code is Rust (a computer programming language). In some embodiments, the language of the program code run by the WebAssembly process can also be other languages ​​that can be compiled into WebAssembly and run, such as high-level programming languages ​​such as C (a computer programming language), C++ (a computer programming language), and Go (a computer programming language). The method provided in this application embodiment allows developers to use multiple programming languages ​​to write screenshot program code, enabling the use of the features and libraries of these programming languages ​​to implement complex image processing algorithms. Moreover, the following program code can maintain consistent performance in different environments, making the program code highly portable. In addition, the program code runs in a sandbox environment, which provides a certain degree of security for obtaining screenshots and reduces the risk of directly manipulating memory.

[0065] In step 203, a JavaScript process is used to perform a rendering operation on the canvas based on the pixel information of multiple first pixels corresponding to at least one first element in the canvas, to obtain a first screenshot image corresponding to the first screenshot area. The first screenshot image includes at least one first element.

[0066] In one possible implementation, after obtaining the pixel information of at least one first element corresponding to multiple first pixels in the canvas through the WebAssembly process in step 202 above, the pixel information of multiple first pixels is sent to the JavaScript process through the WebAssembly process. Then, the JavaScript process performs a rendering operation on the canvas based on the pixel information of multiple first pixels to obtain a first screenshot image corresponding to the first screenshot area. The first screenshot image includes at least one first element.

[0067] In some embodiments, this application does not limit the method of sending pixel information of multiple first pixels to the JavaScript process via the WebAssembly process. In some embodiments, after obtaining pixel information of multiple first pixels through the WebAssembly process, the WebAssembly process writes the pixel information of multiple first pixels into shared memory by accessing and modifying shared memory. The JavaScript process can also access and modify shared memory, so the JavaScript process can read the pixel information of multiple first pixels from shared memory by accessing shared memory, thereby obtaining the pixel information of multiple first pixels.

[0068] In some embodiments, the WebAssembly process can also encapsulate the pixel information of multiple first pixels in an array or structure and return it to the JavaScript process through an exported function, so that the JavaScript process can obtain the pixel information of multiple first pixels.

[0069] After the JavaScript process obtains the pixel information of multiple first pixels, it performs a rendering operation on the canvas based on the pixel information of the multiple first pixels to obtain the first screenshot image corresponding to the first screenshot area. Figure 5 is a schematic diagram of a first screenshot image corresponding to the first screenshot area provided in an embodiment of this application.

[0070] In one possible implementation, after processing the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one element in the canvas, the WebAssembly process can further perform a transformation operation on at least one of the color and position information of the pixel information of the multiple first pixels according to a preset image style, to obtain the transformed pixel information of the multiple first pixels. Then, through the JavaScript process, a rendering operation is performed on the canvas based on the transformed pixel information of the multiple first pixels to obtain a second screenshot image corresponding to the first screenshot area. The second screenshot image satisfies the preset image style; that is, the image style of the second screenshot image is the preset image style. For example, if the preset image style is grayscale, then the image style of the second screenshot image is grayscale.

[0071] In this implementation, after obtaining the pixel information of multiple first pixels corresponding to at least one element in the canvas, a transformation operation can be performed on at least one of the color and position information in the pixel information of each first pixel according to a preset image style, to obtain the transformed pixel information of each first pixel. Since the transformed pixel information of each first pixel satisfies the preset image style, the canvas is rendered according to the transformed pixel information of each first pixel, and the resulting second screenshot image is an image that satisfies the preset image style. This method can change the image style of the obtained screenshot image, resulting in better quality and effect.

[0072] In some embodiments, after processing the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one element in the canvas, the WebAssembly process can further determine a reference pixel among the multiple first pixels based on a reference size; and the JavaScript process can then perform a rendering operation on the canvas based on the pixel information of the reference pixel to obtain a third screenshot image corresponding to the first screenshot area, wherein the size of the third screenshot image is the reference size. The third screenshot image is the first screenshot image after being resized.

[0073] The reference size is set based on experience or adjusted according to the implementation environment, and this application embodiment does not limit it. For example, if the reference size is 30*30, then the size of the obtained third screenshot image is 30*30.

[0074] In this implementation, after obtaining pixel information of multiple first pixels corresponding to at least one element in the canvas through the WebAssembly process, a reference pixel can be determined among the multiple first pixels based on the reference size of the desired screenshot image. Then, the JavaScript process performs a rendering operation on the canvas based on the pixel information of the reference pixel to obtain a third screenshot image with the reference size. This method allows for modification of the obtained screenshot image's size, resulting in better quality and effect.

[0075] In one possible implementation, the JavaScript process can also obtain element information of at least one second element included in the second screenshot area of ​​the page. The element information of each second element includes at least one of the style information or content information of the second element and the hierarchy information of the second element. The WebAssembly process determines the elements in the second elements that are different from the first element as third elements. The WebAssembly process processes the element information of each third element to obtain the pixel information of multiple third pixels corresponding to each third element in the canvas. The pixel information of each third pixel includes the position information and color information of the third pixel. The JavaScript process performs modification operations on the first screenshot image according to the pixel information of each third pixel to obtain the fourth screenshot image corresponding to the second screenshot area.

[0076] In this implementation, when it is necessary to obtain the screenshot image corresponding to the second screenshot area on the page, the difference element (i.e., the third element) between the second element included in the second screenshot area and the first element included in the first screenshot area can be determined. Based on the difference element, the first screenshot image corresponding to the first screenshot area is modified to obtain the fourth screenshot image corresponding to the second screenshot area. This method avoids the drawing and rendering operations of the screenshot image corresponding to the overlapping area of ​​the first and second screenshot areas, which speeds up the acquisition of the screenshot image corresponding to the second screenshot area, saves the time required to acquire the screenshot image corresponding to the second screenshot area, and improves the acquisition efficiency of the screenshot image corresponding to the second screenshot area.

[0077] The second screenshot area differs from the first screenshot area, and there is at least one difference between the second element included in the second screenshot area and the first element included in the first screenshot area. The process of obtaining element information of at least one second element included in the second screenshot area of ​​the page through a JavaScript process is similar to the process of obtaining element information of at least one first element included in the first screenshot area of ​​the page through a JavaScript process described above, and will not be repeated here.

[0078] After obtaining the element information of each third element through the JavaScript process, the process of sending the element information of each third element to the WebAssembly process through the JavaScript process is similar to the process of sending the element information of at least one first element to the WebAssembly process through the JavaScript process, and will not be described again in this embodiment. The process of processing the element information of each third element through the WebAssembly process to obtain the pixel information of multiple third pixels corresponding to each third element in the canvas is similar to the process of processing the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas, and will not be described again in this embodiment.

[0079] In one possible implementation, before determining the element in the second element that differs from the first element as the third element through the WebAssembly process, it is also necessary to determine the time difference between the acquisition time of the element information of at least one first element and the acquisition time of the element information of at least one second element. If the time difference is less than a first time threshold, the WebAssembly process determines the element in the second element that differs from the first element based on the element information of at least one second element and the element information of at least one first element, and this element is then designated as the third element. In one example, the element in the second element that differs from the first element can be determined based on the element identifier of at least one first element and the element identifier of at least one second element.

[0080] In this implementation, the time difference between the acquisition times of the element information of the elements included in the two screenshot areas is determined. If the time difference is small, the difference element (i.e., the third element) between the second element included in the second screenshot area and the first element included in the first screenshot area is determined. Based on the element information of the difference element, the first screenshot image corresponding to the first screenshot area is modified to obtain the fourth screenshot image corresponding to the second screenshot area. The reason for determining the time difference between the acquisition times of the element information of the elements included in the two screenshot areas is that when the time difference is small, the overlap area between the two screenshot areas will be relatively large, resulting in many identical elements. In this case, using the method provided in this application to modify the first screenshot image corresponding to the first screenshot area to obtain the fourth screenshot image corresponding to the second screenshot area can significantly improve the acquisition efficiency of the fourth screenshot image corresponding to the second screenshot area. When the time difference between the acquisition times of the element information of the elements included in the two screenshot areas is large, the overlapping area of ​​the two screenshot areas will be small or even non-existent. Therefore, there will be few or no identical elements. In this case, using the method of modifying the first screenshot image corresponding to the first screenshot area provided in the embodiments of this application to obtain the fourth screenshot image corresponding to the second screenshot area cannot effectively improve the acquisition efficiency of the fourth screenshot image corresponding to the second screenshot area. Therefore, it is unnecessary to use the method provided in the embodiments of this application to obtain the fourth screenshot image corresponding to the second screenshot.

[0081] In one possible implementation, the screenshot process can be moved to the server. After obtaining element information of at least one first element included in the first screenshot area through a JavaScript process, the element information of at least one first element is sent to the server. The server's rendering engine then retrieves the first screenshot image corresponding to the first screenshot area based on the element information of at least one first element. This method can utilize the server's computing power and avoid client-side performance bottlenecks. However, because it requires sending element information of at least one first element to the server and receiving the first screenshot image returned by the server, it may increase network latency and bandwidth consumption.

[0082] The rendering engine can be either Puppeteer or headless Chrome. Puppeteer is a Node.js library developed and maintained by Google. It provides a high-level API to control either Chrome or Chromium browsers, communicating with them via the DevTools protocol. With Puppeteer, developers can simulate various user actions in the browser, enabling functions such as automated webpage testing, webpage screenshots, PDF (Portable Document Format) generation, and data scraping. Headless Chrome is a headless version of the Chrome browser, capable of performing various browser operations without displaying a graphical user interface (GUI).

[0083] In one possible implementation, after obtaining element information of at least one first element included in the first screenshot area through the JavaScript process, this element information can be sent to Web Workers (an important feature introduced in HTML5 that allows the creation of background threads independent of the main thread in a webpage, executing JavaScript code without blocking the main thread, thereby improving webpage performance and responsiveness). The Web Workers then generate the first screenshot image corresponding to the first screenshot area based on the element information of at least one first element. This avoids blocking the JavaScript process, thus improving its performance. This solution can improve JavaScript process performance without introducing a WebAssembly process.

[0084] In one possible implementation, as browser technology has evolved, many browsers provide native screenshot APIs (such as HTMLCanvasElement.toBlob(), and HTML5). <canvas>The element provides a method that can directly convert a canvas into an image. The native screenshot API usually has better performance and compatibility.

[0085] The above method, when acquiring a screenshot image, obtains element information of at least one first element included in the first screenshot area through a JavaScript process. Then, it processes this element information using a WebAssembly process to obtain pixel information of multiple first pixels corresponding to the first element in the canvas. Finally, the JavaScript process renders the canvas based on this pixel information to obtain the first screenshot image corresponding to the first screenshot area. Because the WebAssembly process has high performance and strong computing power, using it to obtain pixel information of multiple first pixels saves time, thus saving time required to acquire the first screenshot image and improving the efficiency of first screenshot image acquisition.

[0086] Furthermore, obtaining the first screenshot image through the JavaScript process and the WebAssembly process can reduce the burden on the JavaScript process, avoid blocking the JavaScript process, and thus improve the performance of the JavaScript process. This also prevents the application from lag or crashing during the screenshot acquisition process, thereby improving the user's screenshot experience.

[0087] Furthermore, after obtaining pixel information from multiple first pixels through the WebAssembly process, the WebAssembly process can transform at least one of the color and position information of the pixel information of the multiple first pixels according to a preset image style, to obtain the transformed pixel information of each of the multiple first pixels. Then, the JavaScript process renders the canvas based on the transformed pixel information of each of the multiple first pixels to generate a second screenshot image that meets the preset image style, resulting in a better effect and quality for the generated second screenshot image. Alternatively, a reference pixel can be determined among the multiple first pixels according to a reference size. The JavaScript process can then render the canvas based on the pixel information of the reference pixel to generate a third screenshot image with the reference size, resulting in an even better quality and effect for the generated third screenshot image.

[0088] Furthermore, after obtaining the first screenshot image corresponding to the first screenshot area, the first screenshot image can be modified based on the difference element (i.e., the third element) between the second element included in the second screenshot area and the first element included in the first screenshot area to obtain the fourth screenshot image corresponding to the second screenshot area. This improves the efficiency of obtaining the screenshot image corresponding to the second screenshot area, avoids resource consumption when obtaining the screenshot image corresponding to the second screenshot area, and prevents the application from lagging or crashing due to screenshotting, thereby improving the user's screenshotting experience.

[0089] Figure 6 is a flowchart of a method for obtaining a screenshot image provided in an embodiment of this application. As shown in Figure 6, the method includes the following steps 601 to 605.

[0090] Step 601: Obtain element information of at least one first element included in the first screenshot area through the JavaScript process.

[0091] The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0092] In one possible implementation, the process of obtaining element information of at least one first element included in the first screenshot area through the JavaScript process has been described in step 201 above. Please refer to the relevant content of step 201 above for details, and it will not be repeated here.

[0093] Step 602: Send at least one element information of the first element to the WebAssembly process via the JavaScript process.

[0094] In one possible implementation, the process of sending element information of at least one first element to the WebAssembly process via the JavaScript process has been described in step 202 above, and will not be repeated here.

[0095] Step 603: Process the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas.

[0096] The pixel information of each first pixel includes the position information and color information of that first pixel.

[0097] In one possible implementation, the process of processing the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas has been described in step 202 above. Please refer to the relevant content of step 202 above for details, and it will not be repeated here.

[0098] Step 604: Send pixel information of multiple first pixels to the JavaScript process via WebAssembly.

[0099] In one possible implementation, the process of sending pixel information of multiple first pixels to the JavaScript process via WebAssembly has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0100] Step 605: Using the JavaScript process, perform a rendering operation on the canvas based on the pixel information of multiple first pixels to obtain the first screenshot image corresponding to the first screenshot area.

[0101] In one possible implementation, the process of performing a rendering operation on the canvas based on the pixel information of multiple first pixels through a JavaScript process to obtain the first screenshot image corresponding to the first screenshot area has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0102] Figure 7 is a flowchart of a method for obtaining a screenshot image provided in an embodiment of this application. As shown in Figure 7, the method includes the following steps 701 to 720.

[0103] Step 701: Obtain element information of at least one first element included in the first screenshot area through the JavaScript process.

[0104] The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0105] In one possible implementation, the process of obtaining element information of at least one first element included in the first screenshot area through the JavaScript process has been described in step 201 above. Please refer to the relevant content of step 201 above for details, and it will not be repeated here.

[0106] Step 702: Perform serialization operation on the element information of at least one first element through the JavaScript process to obtain the serialized element information of each of the at least one first element.

[0107] In one possible implementation, the process of performing a serialization operation on the element information of at least one first element through a JavaScript process to obtain the serialized element information of at least one first element has been described in step 202 above. For details, please refer to the relevant content of step 202 above, and it will not be repeated here.

[0108] Step 703: Perform format conversion operations on the serialized element information of at least one first element through the JavaScript process to obtain the format-converted element information of at least one first element.

[0109] In one possible implementation, the process of performing format conversion operations on the serialized element information of at least one first element by the JavaScript process to obtain the format-converted element information of at least one first element has been described in step 202 above. Please refer to the relevant content of step 202 above for details, and it will not be repeated here.

[0110] Step 704: Send at least one first element's formatted information to the WebAssembly process via the JavaScript process.

[0111] In one possible implementation, the process of sending at least one first element's format-converted element information to the WebAssembly process via the JavaScript process has been described in step 202 above, and will not be repeated here.

[0112] Step 705: Perform a deformatting operation on the element information of at least one first element after its format conversion through the WebAssembly process to obtain the serialized element information of at least one first element.

[0113] In one possible implementation, the process of performing a deformatting operation on the element information of at least one first element after its format conversion by the WebAssembly process to obtain the serialized element information of at least one first element has been described in step 202 above. For details, please refer to the relevant content of step 202 above, and it will not be repeated here.

[0114] Step 706: Perform deserialization operations on the serialized element information of each first element through the WebAssembly process to obtain the element information of at least one first element.

[0115] In one possible implementation, the process of performing deserialization operations on the serialized element information of at least one first element through the WebAssembly process to obtain the element information of at least one first element has been described in step 202 above. Please refer to the relevant content of step 202 above for details, and it will not be repeated here.

[0116] Step 707: Process the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas.

[0117] The pixel information of each first pixel includes the position information and color information of that first pixel.

[0118] In one possible implementation, the process of processing the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas has been described in step 202 above. Please refer to the relevant content of step 202 above for details, and it will not be repeated here.

[0119] Step 708: Send pixel information of multiple first pixels to the JavaScript process via WebAssembly.

[0120] In one possible implementation, the process of sending pixel information of multiple first pixels to the JavaScript process via WebAssembly has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0121] Step 709: Using the JavaScript process, perform a rendering operation on the canvas based on the pixel information of multiple first pixels to obtain the first screenshot image corresponding to the first screenshot area.

[0122] In one possible implementation, the process of performing a rendering operation on the canvas based on the pixel information of multiple first pixels through a JavaScript process to obtain the first screenshot image corresponding to the first screenshot area has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0123] Step 710: Obtain element information of at least one second element included in the second screenshot area of ​​the page through the JavaScript process.

[0124] The element information of each second element includes at least one of the style information or content information of the second element and the hierarchy information of the second element.

[0125] In one possible implementation, the process of obtaining element information of at least one second element included in the second screenshot area of ​​the page through the JavaScript process has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0126] Step 711: Perform serialization operation on the element information of at least one second element through the JavaScript process to obtain the serialized element information of each of the at least one second element.

[0127] In one possible implementation, the process of performing a serialization operation on the element information of at least one second element through a JavaScript process to obtain the serialized element information of each of the at least one second element has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0128] Step 712: Perform format conversion operations on the serialized element information of at least one second element through the JavaScript process to obtain the format-converted element information of at least one second element.

[0129] In one possible implementation, the process of performing format conversion operations on the serialized element information of at least one second element by the JavaScript process to obtain the format-converted element information of each second element has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0130] Step 713: Send at least one second element's formatted information to the WebAssembly process via the JavaScript process.

[0131] In one possible implementation, the process of sending at least one second element's format-converted element information to the WebAssembly process via the JavaScript process has been described in step 203 above, and will not be repeated here.

[0132] Step 714: Perform a deformatting operation on the element information of at least one second element after its format conversion through the WebAssembly process to obtain the serialized element information of at least one second element.

[0133] In one possible implementation, the process of performing a deformatting operation on the formatted element information of at least one second element through the WebAssembly process to obtain the serialized element information of each of the at least one second element has been described in step 203 above. For details, please refer to the relevant content of step 203 above, and it will not be repeated here.

[0134] Step 715: Perform deserialization operations on the serialized element information of at least one second element through the WebAssembly process to obtain the element information of at least one second element.

[0135] In one possible implementation, the process of performing deserialization operations on the serialized element information of at least one second element through the WebAssembly process to obtain the element information of each of the at least one second element has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0136] Step 716: Determine the time difference between the acquisition time of the element information of at least one first element and the acquisition time of the element information of at least one second element.

[0137] In one possible implementation, the process of determining the time difference between the acquisition time of the element information of at least one first element and the acquisition time of the element information of at least one second element has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0138] Step 717: If the time difference is less than the first time threshold, the WebAssembly process determines the element in the second element that is different from the first element, based on the element information of at least one second element and the element information of at least one first element, and uses it as the third element.

[0139] In one possible implementation, when the time difference is less than a first time threshold, the WebAssembly process determines the element in the second element that is different from the first element based on the element information of at least one second element and the element information of at least one first element, and uses it as the third element. This process has been described in step 203 above, and will not be repeated here.

[0140] Step 718: Process the element information of each third element through the WebAssembly process to obtain the pixel information of multiple third pixels corresponding to each third element in the canvas.

[0141] The pixel information for each third pixel includes its position and color information.

[0142] In one possible implementation, the process of processing the element information of each third element through the WebAssembly process to obtain the pixel information of multiple third pixels corresponding to each third element in the canvas has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0143] Step 719: Send pixel information of multiple third pixels to the JavaScript process via the WebAssembly process.

[0144] In one possible implementation, the process of sending pixel information of multiple third pixels to the JavaScript process via the WebAssembly process has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0145] Step 720: Modify the first screenshot image using JavaScript based on the pixel information of multiple third pixels to obtain the fourth screenshot image corresponding to the second screenshot area.

[0146] In one possible implementation, the process of modifying the first screenshot image based on the pixel information of multiple third pixels by a JavaScript process to obtain the fourth screenshot image corresponding to the second screenshot area has been described in step 203 above. Please refer to the relevant content of step 203 above for details, and it will not be repeated here.

[0147] Figure 8 shows a schematic diagram of a screenshot image acquisition device provided in an embodiment of this application. As shown in Figure 8, the device includes:

[0148] The acquisition module 801 is used to acquire element information of at least one first element included in the first screenshot area of ​​the page through the JavaScript process. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element.

[0149] The processing module 802 is used to process the element information of at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to at least one first element in the canvas, wherein the pixel information of each first pixel includes the position information and color information of the first pixel.

[0150] The rendering module 803 is used to perform rendering operations on the canvas based on the pixel information of multiple first pixels through the JavaScript process to obtain the first screenshot image corresponding to the first screenshot area. The first screenshot image includes at least one first element.

[0151] It should be understood that the above-described apparatus is only illustrated by the division of the functional modules described above when implementing its functions. In practical applications, the functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0152] Figure 9 shows a structural block diagram of a terminal device 900 provided in an exemplary embodiment of this application. The terminal device 900 can be any electronic device product capable of human-computer interaction with a user through one or more methods such as a keyboard, touchpad, remote control, voice interaction, or handwriting device. Examples include PCs (Personal Computers), mobile phones, smartphones, PDAs (Personal Digital Assistants), wearable devices, PPCs (Pocket PCs), tablet computers, smart car systems, smart TVs, smart speakers, and smartwatches.

[0153] Typically, terminal device 900 includes a processor 901 and a memory 902.

[0154] Processor 901 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 901 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 901 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 901 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the screen. In some embodiments, processor 901 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0155] The memory 902 may include one or more computer-readable storage media, which may be non-transitory. The memory 902 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 902 is used to store at least one instruction, which is executed by the processor 901 to implement the screenshot image acquisition method provided in the method embodiments of this application.

[0156] In some embodiments, the terminal device 900 may further include a peripheral device interface 903 and at least one peripheral device. The processor 901, memory 902, and peripheral device interface 903 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 903 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of the following: a radio frequency circuit 904, a display screen 905, a camera assembly 906, an audio circuit 907, and a power supply 908.

[0157] Peripheral device interface 903 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 901 and memory 902. In some embodiments, processor 901, memory 902 and peripheral device interface 903 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 901, memory 902 and peripheral device interface 903 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0158] The radio frequency (RF) circuit 904 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 904 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 904 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. In some embodiments, the RF circuit 904 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 904 can communicate with other terminal devices through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 904 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0159] Display screen 905 is used to display a UI (User Interface). This UI may include graphics, text, icons, videos, and any combination thereof. When display screen 905 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 901 for processing. In this case, display screen 905 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 905, disposed on the front panel of terminal device 900; in other embodiments, there may be at least two display screens 905, disposed on different surfaces of terminal device 900 or in a folded design; in other embodiments, display screen 905 may be a flexible display screen, disposed on a curved or folded surface of terminal device 900. Furthermore, display screen 905 may be configured as a non-rectangular irregular shape, i.e., a non-rectangular screen. Display screen 905 may be made of materials such as LCD (Liquid Crystal Display) or OLED (Organic Light-Emitting Diode).

[0160] The camera assembly 906 is used to acquire images or videos. In some embodiments, the camera assembly 906 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal device 900, and the rear-facing camera is located on the back of the terminal device 900. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 906 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash is a combination of a warm light flash and a cool light flash, which can be used for light compensation at different color temperatures.

[0161] The audio circuit 907 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting them into electrical signals that are input to the processor 901 for processing, or to the radio frequency circuit 904 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each positioned at a different location on the terminal device 900. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 901 or the radio frequency circuit 904 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 907 may also include a headphone jack.

[0162] Power supply 908 is used to supply power to the various components in terminal device 900. Power supply 908 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 908 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, while a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0163] In some embodiments, the terminal device 900 further includes one or more sensors 909. The one or more sensors 909 include, but are not limited to, an accelerometer 910, a gyroscope 911, a pressure sensor 912, an optical sensor 913, and a proximity sensor 914.

[0164] Accelerometer 910 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by terminal device 900. For example, accelerometer 910 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 901 can control display screen 905 to display the user interface in either a landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 910. Accelerometer 910 can also be used for games or for acquiring user motion data.

[0165] The gyroscope sensor 911 can detect the orientation and rotation angle of the terminal device 900. The gyroscope sensor 911, in conjunction with the accelerometer sensor 910, can collect the user's 3D movements on the terminal device 900. Based on the data collected by the gyroscope sensor 911, the processor 901 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0166] The pressure sensor 912 can be disposed on the side bezel of the terminal device 900 and / or on the lower layer of the display screen 905. When the pressure sensor 912 is disposed on the side bezel of the terminal device 900, it can detect the user's grip signal on the terminal device 900, and the processor 901 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor 912. When the pressure sensor 912 is disposed on the lower layer of the display screen 905, the processor 901 can control the operable controls on the UI interface based on the user's pressure operation on the display screen 905. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0167] An optical sensor 913 is used to collect ambient light intensity. In one embodiment, the processor 901 can control the display brightness of the display screen 905 based on the ambient light intensity collected by the optical sensor 913. Specifically, when the ambient light intensity is high, the display brightness of the display screen 905 is increased; when the ambient light intensity is low, the display brightness of the display screen 905 is decreased. In another embodiment, the processor 901 can also dynamically adjust the shooting parameters of the camera assembly 906 based on the ambient light intensity collected by the optical sensor 913.

[0168] The proximity sensor 914, also known as a distance sensor, is typically located on the front panel of the terminal device 900. The proximity sensor 914 is used to detect the distance between the user and the front of the terminal device 900. In one embodiment, when the proximity sensor 914 detects that the distance between the user and the front of the terminal device 900 is gradually decreasing, the processor 901 controls the display screen 905 to switch from a screen-on state to a screen-off state; when the proximity sensor 914 detects that the distance between the user and the front of the terminal device 900 is gradually increasing, the processor 901 controls the display screen 905 to switch from a screen-off state to a screen-on state.

[0169] Those skilled in the art will understand that the structure shown in FIG9 does not constitute a limitation on the terminal device 900, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0170] Figure 10 is a schematic diagram of the server structure provided in an embodiment of this application. The server 1000 can vary considerably due to different configurations or performance. It may include one or more Central Processing Units (CPUs) 1001 and one or more memories 1002. The one or more memories 1002 store at least one line of program code, which is loaded and executed by the one or more processors 1001 to implement the screenshot image acquisition method provided in the above-described method embodiments. Of course, the server 1000 may also have wired or wireless network interfaces, a keyboard, and input / output interfaces for input and output. The server 1000 may also include other components for implementing device functions, which will not be elaborated here.

[0171] In an exemplary embodiment, a computer-readable storage medium is also provided, which stores at least one piece of program code that is loaded and executed by a processor to enable a computer to implement any of the above-described methods for acquiring screenshot images.

[0172] In some embodiments, the computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a compact disc read-only memory (CD-ROM), magnetic tape, floppy disk, and optical data storage device, etc.

[0173] In an exemplary embodiment, a computer program or computer program product is also provided, which stores at least one computer instruction, which is loaded and executed by a processor to enable the computer to implement any of the above-described methods for acquiring screenshot images.

[0174] It should be noted that all information (including but not limited to user device information, user personal information, etc.), data (including but not limited to data used for analysis, stored data, displayed data, etc.), and signals involved in this application have been authorized by the user or fully authorized by all parties, and the collection, use, and processing of related data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. For example, the element information, pixel information, and other information involved in this application were obtained with full authorization.

[0175] It should be understood that "multiple" as used in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0176] The above description is merely an exemplary embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the principles of this application should be included within the protection scope of this application.< / canvas>

Claims

1. A method for obtaining a screenshot image, wherein, The method includes: The JavaScript process obtains the element information of at least one first element included in the first screenshot area of ​​the page. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element. The element information of the at least one first element is processed by the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one first element in the canvas, wherein the pixel information of each first pixel includes the position information and color information of the first pixel; The JavaScript process performs a rendering operation on the canvas based on the pixel information of the plurality of first pixels to obtain a first screenshot image corresponding to the first screenshot area, wherein the first screenshot image includes at least one first element.

2. The method according to claim 1, wherein, After obtaining element information of at least one first element included in the first screenshot area of ​​the page through the JavaScript process, the method further includes: The JavaScript process performs a serialization operation on the element information of the at least one first element to obtain the serialized element information of each of the at least one first element. The data format of the serialized element information of each first element is a string format. The JavaScript process sends the serialized element information of each of the at least one first element to the WebAssembly process.

3. The method according to claim 1, wherein, After obtaining element information of at least one first element included in the first screenshot area of ​​the page through the JavaScript process, the method further includes: The JavaScript process performs a serialization operation on the element information of the at least one first element to obtain the serialized element information of each of the at least one first element. The data format of the serialized element information of each first element is a string format. The JavaScript process performs a format conversion operation on the serialized element information of each of the at least one first element to obtain the format-converted element information of each of the at least one first element. The data size of the format-converted element information of each first element is smaller than the data size of the serialized element information of the first element. The JavaScript process sends the formatted element information of each of the at least one first element to the WebAssembly process.

4. The method according to claim 3, wherein, Before processing the element information of the at least one first element through the WebAssembly process to obtain the pixel information of the at least one first element corresponding to multiple first pixels in the canvas, the method further includes: The WebAssembly process receives the element information of each of the at least one first element after its respective format conversion. The WebAssembly process performs a deformatting operation on the element information of each of the at least one first element after its format conversion, to obtain the serialized element information of each of the at least one first element. The WebAssembly process performs a deserialization operation on the serialized element information of the at least one first element to obtain the element information of the at least one first element.

5. The method according to any one of claims 1 to 4, wherein, After processing the element information of the at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one first element in the canvas, the method further includes: The WebAssembly process performs a transformation operation on at least one of the color information and position information in the pixel information of the plurality of first pixels according to a preset image style, thereby obtaining the transformed pixel information of the plurality of first pixels. The JavaScript process performs a rendering operation on the canvas based on the pixel information after the transformation of the plurality of first pixels, and obtains a second screenshot image corresponding to the first screenshot area. The second screenshot image satisfies the preset image style.

6. The method according to any one of claims 1 to 4, wherein, After processing the element information of the at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one first element in the canvas, the method further includes: The WebAssembly process determines a reference pixel among the plurality of first pixels based on a reference size. The JavaScript process performs a rendering operation on the canvas based on the pixel information of the reference pixel to obtain a third screenshot image corresponding to the first screenshot area, and the size of the third screenshot image is the reference size.

7. The method according to any one of claims 1 to 6, wherein, The method further includes: The JavaScript process obtains element information of at least one second element included in the second screenshot area of ​​the page. The element information of each second element includes at least one of the style information or content information of the second element and the hierarchy information of the second element. The WebAssembly process determines the element in the second element that is different from the first element, and uses it as the third element. The WebAssembly process determines the pixel information of multiple third pixels corresponding to each third element in the canvas based on the element information of each third element. The pixel information of each third pixel includes the position information and color information of the third pixel. The JavaScript process modifies the first screenshot image based on the pixel information of multiple third pixels corresponding to each third element in the canvas, thereby obtaining the fourth screenshot image corresponding to the second screenshot area.

8. The method according to claim 7, wherein, Before determining the element in the second element that is different from the first element through the WebAssembly process as the third element, the method further includes: Determine the time difference between the acquisition time of the element information of the at least one first element and the acquisition time of the element information of the at least one second element; The step of determining, through the WebAssembly process, an element in the second element that differs from the first element, as the third element, includes: If the time difference is less than a first time threshold, the WebAssembly process determines, based on the element information of the at least one first element and the element information of the at least one second element, an element that is different from the first element and is designated as the third element.

9. The method according to any one of claims 1 to 8, wherein, The method further includes: In response to a view operation on the page, the page is displayed; The step of obtaining element information of at least one first element included in the first screenshot area of ​​the page includes: In response to a screenshot operation on the page, element information of at least one first element included in the first screenshot area of ​​the page is obtained through a JavaScript process, wherein the first screenshot area is the area corresponding to the screenshot operation.

10. The method according to claim 9, wherein, After displaying the page in response to a viewing operation, the method further includes: If the display duration of the page exceeds a second duration threshold, it is determined that a screenshot operation for the page has been received; or, The page displays a screenshot control, and in response to a trigger operation on the screenshot control, it is determined that a screenshot operation on the page has been received.

11. A device for acquiring screenshot images, characterized in that, The device includes: The acquisition module is used to acquire element information of at least one first element included in the first screenshot area of ​​the page through the JavaScript process. The element information of each first element includes at least one of the style information or content information of the first element and the hierarchy information of the first element. The processing module is used to process the element information of the at least one first element through the WebAssembly process to obtain the pixel information of multiple first pixels corresponding to the at least one first element in the canvas, wherein the pixel information of each first pixel includes the position information and color information of the first pixel. The rendering module is used to perform a rendering operation on the canvas based on the pixel information of the plurality of first pixels through the JavaScript process to obtain a first screenshot image corresponding to the first screenshot area, wherein the first screenshot image includes at least one first element.

12. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one line of program code, the at least one line of program code being loaded and executed by the processor to enable the computer device to implement the method for acquiring screenshots as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one piece of program code, which is loaded and executed by a processor to enable the computer to implement the method for acquiring screenshots as described in any one of claims 1 to 10.

14. A computer program product, characterized in that, The computer program product stores at least one computer instruction, which is loaded and executed by a processor to enable the computer to implement the method for acquiring screenshots as described in any one of claims 1 to 10.

Images