Methods, apparatuses, devices, and media for generating an image of a page

Abstract

Methods, apparatuses, devices, and media for generating an image of a page are provided. In one method, a current page presented in an application is duplicated to generate a copy page. Environmental data associated with the current page from a user of the application is received. The copy page is updated based on the environmental data. An image of the current page is generated based on rendering data of the updated copy page. With example implementations of the present disclosure, a long page image including environmental data can be generated at a client device without requiring manual user intervention.

Description

Technical Field

[0001] The exemplary implementations of this disclosure generally relate to page management of applications, and more particularly to methods, apparatus, devices, and computer-readable storage media for generating images of pages. Background Technology

[0002] With the development of mobile devices and network technology, a variety of web applications with diverse functions have been developed. Mobile clients can support an increasing number of online activities, leading to numerous application scenarios involving page sharing. Users may want to generate and share images of application pages. However, the screen of the client device running the application may not display the complete page, and users may add environmental data such as markers and highlights to the page environment. This means that directly calling the operating system's screenshot function cannot meet user needs. Therefore, a more convenient and efficient way to generate page images is desired. Summary of the Invention

[0003] In a first aspect of this disclosure, a method for generating an image of a page is provided. In this method, a copy of the current page presented in an application is copied to generate a duplicate page. Environmental data associated with the current page from a user of the application is received. The duplicate page is updated based on the environmental data. An image of the current page is generated based on the rendering data of the updated duplicate page.

[0004] In a second aspect of this disclosure, an apparatus for generating an image of a page is provided. The apparatus includes: a copying module configured to copy a current page presented in an application to generate a copy page; a receiving module configured to receive environmental data associated with the current page from a user of the application; an updating module configured to update the copy page based on the environmental data; and a generating module configured to generate an image of the current page based on rendering data of the updated copy page.

[0005] In a third aspect of this disclosure, an electronic device is provided. The electronic device includes: at least one processing unit; and at least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to a first aspect of this disclosure when executed by the at least one processing unit.

[0006] In a fourth aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, causes the processor to implement the method according to a first aspect of this disclosure.

[0007] It should be understood that the content described in this content section is not intended to limit the key or essential features of the implementation of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0008] In the following detailed description, the above and other features, advantages, and aspects of the various implementations of this disclosure will become more apparent, taken in conjunction with the accompanying drawings. In the accompanying drawings, the same or similar reference numerals denote the same or similar elements, wherein:

[0009] Figure 1 A block diagram of an application environment according to an exemplary implementation of this disclosure is shown;

[0010] Figure 2 A block diagram is shown for generating images for a page according to some implementations of this disclosure;

[0011] Figure 3 A block diagram illustrating the interaction process according to some implementations of this disclosure is shown;

[0012] Figure 4 A block diagram is shown illustrating a process for initiating the generation of a page image according to some implementations of this disclosure;

[0013] Figure 5 A block diagram showing a pending generation of a page image according to some implementations of this disclosure is shown;

[0014] Figure 6 A block diagram illustrating a process executed at the front end of an application according to some implementations of this disclosure;

[0015] Figure 7 A block diagram is shown for generating images for a page according to some implementations of this disclosure;

[0016] Figure 8 A flowchart is shown of a method for generating an image for a page according to some implementations of this disclosure;

[0017] Figure 9 A block diagram of an apparatus for generating an image for a page according to some implementations of this disclosure is shown; and

[0018] Figure 10 A block diagram of a device capable of implementing various implementations of the present disclosure is shown. Detailed Implementation

[0019] Implementations of this disclosure will now be described in more detail with reference to the accompanying drawings. While some implementations of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the implementations set forth herein. Rather, these implementations are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and implementations of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0020] In the description of the implementation methods disclosed herein, the term "comprising" and similar terms should be understood as open inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one implementation" or "the implementation" should be understood as "at least one implementation". The term "some implementations" should be understood as "at least some implementations". Other explicit and implicit definitions may also be included below. As used herein, the term "model" can represent the relationships between various data. For example, the aforementioned relationships can be obtained based on various currently known and / or future-developed technical solutions.

[0021] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0022] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure through appropriate means in accordance with relevant laws and regulations, and user authorization should be obtained.

[0023] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0024] As an optional but non-restrictive implementation, in response to a user's active request, a prompt message can be sent to the user, for example, via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose whether to "agree" or "disagree" to provide personal information to the electronic device.

[0025] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0026] The term "in response to" as used herein refers to a state in which a corresponding event occurs or a condition is satisfied. It will be understood that the timing of subsequent actions performed in response to such event or condition is not necessarily strongly correlated with the time when the event occurs or the condition is met. For example, in some cases, subsequent actions may be performed immediately upon the occurrence of the event or the fulfillment of the condition; while in others, they may be performed some time after the occurrence of the event or the fulfillment of the condition.

[0027] Example Environment

[0028] Users can run various applications using mobile client devices, and in this case, they may want to capture and share images of application pages. See also Figure 1 Describe the application environment used to generate page images. Figure 1 A block diagram 100 of an application environment according to an exemplary implementation of this disclosure is shown. Figure 1 As shown, page 120 of the application can be displayed on client device 110, and the user may add environment data 122 to the environment of page 120. For example, the user can select the text "English name: earth" on page 120 and display the selected text in a highlighted manner. Another example is that the user can add input, selection boxes, annotations, hand-drawn marks, etc., on page 120. The user can also select an image on page 120, and so on. In this case, environment data 122 can represent the user-specific part of the page environment, such as parts that require special attention. When the page resolution is greater than the client device resolution, the user can use slider 130 to display more parts of the page.

[0029] While some applications already offer functionality for generating "long images" (e.g., image 140), these images do not include environmental data 122. To generate an image that includes environmental data 122, the user can use the operating system of the client device to perform a "screenshot" operation. However, this requires the user to manually move the slider 130 and generate multiple screenshots. Subsequently, the user must manually stitch these screenshots together to create a complete page image. Due to inaccuracies in user operation, overlaps or gaps may exist between the screenshots, severely affecting the final composite image. Furthermore, screenshots will include icons in the functional areas of the client device 110 (e.g., network signal, battery level, etc.), further impacting the composite image. Therefore, a more convenient and efficient method for generating page screenshots is desired.

[0030] Summary of generating page images

[0031] To at least partially address the shortcomings of the prior art, a method for generating images for a webpage is proposed according to an exemplary implementation of this disclosure. See also Figure 2 This describes a summary of an exemplary implementation according to the present disclosure. Figure 2 A block diagram 200 is shown illustrating an image for generating a page according to some implementations of this disclosure. For example... Figure 2 As shown, the current page 210 presented in the application can be copied to generate a copy page 220. The copy page 220 can be generated in the background environment of the application, that is, the copy page 220 is not presented in the application's interface.

[0032] The application can receive user environment data 122, such as interaction data and / or attribute data associated with the current page 210. For example, the user can perform operations such as selection, input, drawing, annotation, and highlighting on the current page 210 to add desired data to the current page 210. At this time, the copy page 220 can be updated based on the environment data 122, and then the image 240 of the current page 210 can be generated based on the rendering data 230 of the updated copy page. The generated image 240 can include the environment data 122', in other words, user-added data can be added to the image 240, thereby providing richer information in the generated image 240.

[0033] Using the exemplary implementation of this disclosure, images of a page can be automatically generated without manual user intervention. In this way, long images of the page can be generated, and user-desired data can be added to these long images to enrich the page content.

[0034] Detailed process of generating page images

[0035] An outline of generating page images has been described; see below. Figure 3 More details about generating the page image. Figure 3 A block diagram 300 illustrates an interaction process according to some implementations of this disclosure. For example... Figure 3 As shown, client 320 refers to the application's client program, which can be installed on client device 110. User 310 can interact with the application's client 320 to input data into the application and / or view data presented by the application. Frontend 330 refers to the front-end portion associated with the application, which can be implemented on client device 110. For example, frontend 330 can be implemented by a browser on client device 110 reading the page's code. According to an exemplary implementation of this disclosure, the following can be executed on the client device 110 running the application: Figure 3 The interactive process is shown.

[0036] The process of generating a page image can be initiated in various application environments. When a user wishes to share the current page as an image, they can invoke a method for generating a page image according to an exemplary implementation of this disclosure. Before invoking the page sharing function, user 310 can input various environmental data on the current page. Here, environmental data may include interaction data between the user and objects on the current page.

[0037] For example, user 310 can select text, images, and / or other page elements on the current page. User 310 can enter content in the text boxes on the current page. User 310 can draw new patterns based on the current page, such as adding colorful hand-drawn elements as a background to the current page, etc. User 310 can add annotations to the current page, highlight certain content, or obscure certain page content, etc. User 310 can use the slider 310 to adjust the presented page and add ambient data at different locations on the current page. Alternatively and / or additionally, the user can also directly invoke the function to generate a page image without adding any ambient data.

[0038] It will be understood that if the resolution of the current page is smaller than the resolution of the client device, the user can directly call the screenshot function of the client device's operating system to generate a page image. If the resolution of the current page is larger than the resolution of the client device, directly calling the screenshot function of the operating system cannot generate a long image of the page. Therefore, the technical solution of this disclosure is particularly suitable for situations where the resolution of the current page is larger than the resolution of the client device. In this case, the user can directly call the page image generation process according to an exemplary implementation of this disclosure, and directly generate a long image of the page without additional screenshot and stitching operations.

[0039] like Figure 4 As shown, user 310 can invoke the page-sharing function 341 when they wish to share the current page. At this time, a page image can be generated and then shared. Specifically, a share button can be displayed on the currently rendered page, and the user can choose the sharing method in a pop-up interface. See also... Figure 4 Describe more details about enabling this generation feature. Figure 4 A block diagram 400 is shown for initiating a process for generating a page image according to some implementations of this disclosure.

[0040] like Figure 4As shown, button 410 can be presented in the application on client device 110. When the user clicks button 410, link sharing 412 and image sharing 414 functions can be presented. In response to detecting a sharing action from the user to share the current page as an image, a method for generating a page image is executed. Return Figure 3 Users can call the 342 image sharing function; specifically, when the user presses... Figure 4 When sharing images in the image sharing section 414, the process of generating a page image can be initiated.

[0041] According to an exemplary implementation of this disclosure, the current page can be copied to generate a copy page (343). Specifically, in generating the copy page, the current page can be copied in the application's background environment. Specifically, a hidden page can be created in the background environment; for example, a WebView can be created at client location 320, and this WebView can be made invisible by calling webview.setVisibility. In this case, the WebView is hidden and not presented to the user, thus not interfering with the normal presentation of the application interface.

[0042] According to one exemplary implementation of this disclosure, a waiting page can be presented in the application during image generation. For example... Figure 3 As shown, client 320 can present the 343' waiting page to the user. See also Figure 5 Describe more details of the waiting page. Figure 5 A block diagram 500 showing a pending generation of a page image according to some implementations of this disclosure is shown. For example... Figure 5 As shown, a waiting page 510 can be displayed to indicate that the sharing page is being generated. At this point, the process of the user entering environmental data can be paused before the page image is successfully generated, thereby preventing new environmental data from changing the page content and triggering a regeneration of the page image.

[0043] According to an exemplary implementation of this disclosure, to avoid potential time delays in generating a copy of the page, it can be determined whether the user intends to share the current page based on the user's historical actions. Assume that extensive historical data shows that user 310 typically shares a page immediately after inputting environmental data. In this case, it can be assumed that user 310 is highly likely to share the current page, and therefore a copy of the page can be generated immediately before the user invokes the image sharing function.

[0044] Alternatively and / or additionally, assuming a user's "screenshot" action is detected, a dialog box can pop up asking the user 310 whether they wish to generate a page image. In other words, if it is determined that the user's historical actions meet predetermined conditions, a copy of the page can be generated immediately upon completion of loading the current page. This avoids the potentially long wait time that might occur if a copy is generated only after the user clicks share.

[0045] According to one exemplary implementation of this disclosure, an image of the current page can be generated via the application's render cache. The current page (e.g., a template for a details page) and locally cached article content (e.g., content tagged with contextual data) can be reused. An updated copy of the page can be written to the application's render cache, and the application's front end can be used to generate render data based on the render cache.

[0046] Specifically, if a hidden page has already been created, a clone node of the current page's root node can be added to the hidden page to generate a copy of the page. For example... Figure 3 As shown, the client can reuse the details page template of the current page (344). The front-end (330) can wait for the template (345) to execute. Specifically, it can access the WebView object that triggered the sharing action and clone the root node using the `document.cloneNode` function. This allows the client (320) to obtain the structural information of the current page at the moment the user triggers the "image sharing" function, thus ensuring that the content of the generated copy page is up-to-date. After obtaining the structural information of the root node, the structure can be cloned into the hidden WebView. At this point, the pre-rendered structure processing can be completed, and the client (320) can notify the front-end (330) to perform further processing and rendering.

[0047] After the template rendering is complete, frontend 330 can notify client 320 346 that the template has finished loading. At this point, after frontend 330 has rendered the page, client 320 can reuse local data 347 to update the copy page based on the environment data. By copying the root node of the current page to generate a copy, all nodes of the current page can be copied at once in a simpler and more efficient way, improving the efficiency of page image generation and reducing user waiting time. This method avoids re-requesting the dependent template and local data when rendering a hidden WebView, avoids instability caused by network requests, and achieves higher performance gains.

[0048] According to an exemplary implementation of this disclosure, the root node (top-level node) of the page can be cloned only during the first sharing. For subsequent sharing attempts, the container result from the first sharing is directly reused. Specifically, if another sharing action for the current page is detected, the copy page is updated based on changes in the current page. After the rendered result is created, if the user-visible interface changes, the client can be notified via broadcast. The client can then update the nodes corresponding to the hidden WebView, thus avoiding long waiting times for subsequent screenshot sharing and generating page images with minimal time delay.

[0049] At frontend 330, the pre-rendering step can be completed by reusing the details page template and local data. Then, frontend 330 can execute the formal rendering process and perform pre-validation. At this point, it can first determine whether the data in the rendering cache is valid. If the data in the rendering cache is determined to be valid, the application's frontend can be used to generate rendering data based on the valid data. Specifically, frontend 330 can read the data added to the rendering cache by client 320 (i.e., pre-rendered data) and verify the validity of the read data through basic validation.

[0050] According to an exemplary implementation of this disclosure, the pre-rendered HTML data can be inserted into innerHTML and checked for errors. If an error occurs, the front-end 330 can notify the client to prepare the correct data again; if no error occurs, the verification is successful and the page 348 can be rendered. In this way, the risk of subsequent rendering anomalies due to data errors can be reduced, thereby improving the reliability of the generated page image.

[0051] After the pre-rendered data passes validation, the front-end can ensure that the obtained data is usable and validated. At this point, further processing of the pre-rendered results can be performed. For example, dynamic objects in page 349 can be processed. It can be determined whether the validated valid data includes dynamic objects. Here, dynamic objects can include at least one of animated images and videos. Since the purpose of sharing is to share the image data of the page, the dynamic data in the page can be "downgraded" to static data (i.e., image data). Specifically, static objects can be extracted from dynamic objects and used to replace animated images.

[0052] For example, you can search for the tag "" on the page "and" <video>And confirm whether the page includes animated GIFs and / or videos. Regarding the use of the tag " "For the found image, you can verify if it is an animated image (e.g., check if the source file extension is "gif"). If it is determined that an animated image with the "gif" extension is included, it can be downgraded to a static image (e.g., JPG format). For example, you can obtain the first frame (or another location) of the animated image, thereby reducing the data stream while ensuring image quality. For using tags..." <video>"Regarding the found video, since videos are usually transmitted via streaming, only the first frame of the video can be captured, and only the first frame can be retained when generating the page image, thus avoiding downloading the entire video. In this way, the waiting time for generating the page image can be reduced."

[0053] Specifically, frontend 330 can add rendering data to innerHTML and append the corresponding nodes to the root node using an append-only method (e.g., by calling the appendChild function). At this point, the WebView will begin rendering the page. After successful rendering, the page will notify client 320 (e.g., using the onLoad event) that the page has been successfully rendered. After all page rendering is complete, frontend 330 can notify client 320 to take a screenshot.

[0054] According to an exemplary implementation of this disclosure, client 320 can receive a notification from frontend 330 and generate an image of the page after a rendering completion event. Specifically, in order to generate images using rendering data, one or more split-screen images can be generated using the rendering data according to the resolution of the client device running the application. Here, the resolution of each split-screen image is the same as the resolution of the client device, and two consecutive split-screen images can be continuous.

[0055] See already Figure 3 The actions of front-end 330 during the interaction are described below. Figure 6 Describe the specific process of frontend 330 execution. Figure 6 A block diagram 600 illustrates a process executed at the front end of an application according to some implementations of this disclosure. For example... Figure 6 As shown, at box 610, data can be read from the rendering cache. At box 620, the read data can be verified as valid. If the read data is valid, the process proceeds to box 630 and the rendering process is executed. If the read data is invalid, the process proceeds to box 622 to notify the client to rewrite the data to the rendering cache.

[0056] The rendering process at box 630 can include two parts: at box 632, the header of the page can be loaded first; and at box 634, the content of the page can be loaded. If it is determined that the page includes dynamic images such as GIFs and / or videos, then at boxes 636 and 638, a degradation process can be performed for GIFs and videos respectively, downgrading the dynamic objects to static images. Rendering can be performed at box 640. If rendering is successful, the process can proceed to box 650 to notify the client to take a screenshot. If rendering fails, the process proceeds to box 642 and an error is reported. At this point, the front-end execution process ends.

[0057] return Figure 3 After the page has been successfully rendered, client 320 can generate a long image of page 351. During the process of generating the long image for the current WebView, after frontend 330 has completed page rendering, client 320 can slide the page and take screenshots based on the client device's resolution. Furthermore, these screenshots can be stitched together. Since the copy page is a hidden WebView, it is invisible during the screenshot sliding process.

[0058] Assuming the client device's resolution is W*H (width*height) and the page length is L, then a portion of the page with a height of H can be cropped each time. In this case, the number of split-screen images is... ( (For rounding up) For example, in the first screenshot, the portion with a height between 0 and H-1 can be captured; in the second screenshot, the portion with a height between H and 2H-1 can be captured, and so on, until each screenshot includes the entire page. Then, N split-screen images can be stitched together to generate the final image.

[0059] At this point, client 320 can present a preview of screenshot 352 to user 310. For example, it can present the user with... Figure 2 The preview shown in image 240 includes not only the content of the current page 210 but also environmental data 122' associated with the user. The user can confirm whether image 240 meets their needs, and if so, can share image 240 based on an address specified by the user. For example, image 240 can be shared via messaging applications, social networking applications, email applications, and other methods. This improves user communication efficiency and thus increases the speed of information sharing.

[0060] It will be understood that, although the above description of the specific process for generating a page image uses only user interaction data with the current page as an example of contextual data, alternatively and / or additionally, contextual data may include user attribute data. Here, attribute data may include data on any aspect related to the user, such as, but not limited to, the user's identifier, nickname, avatar, etc. See also Figure 7 More examples of generating page images with user attribute data are provided.

[0061] Figure 7 A block diagram 700 is shown illustrating an image for generating a page according to some implementations of this disclosure. For example... Figure 7 As shown, an online concert application can be presented on client device 110. To achieve a more realistic performance effect, a unique admission ticket can be generated for each online concert viewer. At this point, the user can input their personal attribute data, such as their audience nickname, on page 720. Then, image 730 can be generated using the method described above. The generated admission ticket can include the viewer's nickname, ticket number, and a unique verification QR code, etc. In this way, richer information can be embedded in the generated page image, thus meeting the customization needs of various users.

[0062] Alternatively and / or additionally, the page image generated herein may also include other information. For example, detailed information about participating in the activity may be provided (e.g., a QR code for accessing the details). Specifically, data on users who shared the activity information may be embedded in the QR code to track the sources from which new users obtained the activity information, and so on.

[0063] Among the large number of users of the application, different users have their own needs when sharing pages. In the context of this disclosure, considering the real-time nature and long page characteristics, a technical solution for generating page images as described above is proposed. This technical solution allows users to highlight and extract content from the application's pages in real time, and also allows the generation of long page images with their own attributes.

[0064] Compared to methods that generate page images on the server side and transmit them to the client, generating a long page image including environmental data on the client device avoids the network resource and time overhead associated with data transmission. Furthermore, compared to calling the screenshot function of the operating system on the client device, it reduces the workload of manual operation for the user. Using the exemplary implementation of this disclosure, the user does not need to perform any manual screenshot and stitching operations; instead, the process of generating the page image can be triggered immediately after invoking the image sharing function. Moreover, the process of generating the page image is executed in the background environment of the client and does not affect the user's experience of using the application.

[0065] Example process

[0066] Figure 8 A flowchart of a method 800 for generating an image of a page according to some implementations of this disclosure is shown. At box 810, the current page presented in the application is copied to generate a copy page. At box 820, environmental data associated with the current page from the user of the application is received. At box 830, the copy page is updated based on the environmental data. At box 840, an image of the current page is generated based on the rendering data of the updated copy page.

[0067] According to one exemplary implementation of this disclosure, generating a copy page includes: copying the current page in the background environment of the application to generate a copy page.

[0068] According to one exemplary implementation of this disclosure, copying the current page in a background environment to generate a copy page includes: generating a hidden page in the background environment of the application; and adding a clone node of the root node of the current page to the hidden page to generate a copy page.

[0069] According to one exemplary implementation of this disclosure, generating an image of the current page includes: writing an updated copy of the page to the application's rendering cache; generating rendering data based on the rendering cache using a frontend associated with the application; and generating an image based on the rendering data.

[0070] According to an exemplary implementation of this disclosure, generating rendering data based on the rendering cache includes at least one of the following: in response to determining that the data in the rendering cache is valid data, generating rendering data based on the valid data using the front end; in response to determining that the data in the rendering cache is valid data, rewriting an updated copy of the page to the application's rendering cache.

[0071] According to an exemplary implementation of this disclosure, the method further includes: in response to determining that valid data includes dynamic objects, extracting static objects from the dynamic objects, wherein the dynamic objects include at least one of dynamic images and videos, and the static objects include static images; and replacing the dynamic images with the static objects.

[0072] According to an exemplary implementation of this disclosure, generating an image based on rendering data includes: in response to determining that rendering data has been generated, generating at least one split-screen image of the rendering data according to the resolution of the client device running the application; and stitching the at least one split-screen image together to generate an image.

[0073] According to one exemplary implementation of this disclosure, the environmental data includes at least one of the following: interaction data between the user and page objects in the current page; and the user's attribute data.

[0074] According to one exemplary implementation of this disclosure, it further includes: presenting a waiting page in the application during image generation; and presenting a preview of the image in response to determining that the image has been generated.

[0075] According to one exemplary implementation of this disclosure, the method is executed on a client device running the application, where the resolution of the current page is greater than that of the client device, and the image is a long image.

[0076] According to an exemplary implementation of this disclosure, it further includes: in response to detecting a sharing action from a user for sharing the current page, executing a method; and sharing an image based on an address specified by the user.

[0077] According to one exemplary implementation of this disclosure, it further includes: in response to detecting another sharing action for sharing the current page, updating the copy page based on changes in the current page.

[0078] According to an exemplary implementation of this disclosure, it further includes: in response to determining that the user's historical actions meet predetermined conditions, generating a copy page upon completion of loading the current page.

[0079] Example devices and equipment

[0080] Figure 9 A block diagram of an apparatus 900 for generating an image of a page according to some implementations of the present disclosure is shown. The apparatus 900 includes: a copying module 910 configured to copy the current page presented in an application to generate a copy page; a receiving module 920 configured to receive environmental data associated with the current page from a user of the application; an updating module 930 configured to update the copy page based on the environmental data; and a generating module 940 configured to generate an image of the current page based on rendering data of the updated copy page.

[0081] According to one exemplary implementation of this disclosure, the copy module 910 includes a background copy module configured to copy the current page in the background environment of the application to generate a copy page.

[0082] According to an exemplary implementation of this disclosure, the background copy module includes: a creation module configured to create a hidden page in the background environment of the application; and an addition module configured to add a clone node of the root node of the current page to the hidden page to generate a copy page.

[0083] According to an exemplary implementation of this disclosure, the generation module 940 includes: a writing module configured to write an updated copy of the page to the application's rendering cache; a rendering module configured to generate rendering data based on the rendering cache using a front-end associated with the application; and an image generation module configured to generate an image based on the rendering data.

[0084] According to an exemplary implementation of this disclosure, the rendering module includes: a first rendering module configured to generate rendering data based on the valid data using a front-end in response to determining that the data in the rendering cache is valid data; and a second rendering module configured to rewrite an updated copy of the page to the application's rendering cache in response to determining that the data in the rendering cache is valid data.

[0085] According to an exemplary implementation of this disclosure, the apparatus 900 further includes: an extraction module configured to extract a static object from the dynamic object in response to determining that valid data includes a dynamic object, the dynamic object including at least one of a dynamic image and a video, and the static object including a static image; and a replacement module configured to replace the dynamic image with the static object.

[0086] According to an exemplary implementation of this disclosure, the image generation module includes: a screenshot module configured to generate at least one split-screen image of the rendered data according to the resolution of the client device running the application, in response to determining that rendered data has been generated; and a stitching module configured to stitch the at least one split-screen image to generate an image.

[0087] According to one exemplary implementation of this disclosure, the environmental data includes at least one of the following: interaction data between the user and page objects in the current page; and the user's attribute data.

[0088] According to an exemplary implementation of this disclosure, the device 900 further includes: a waiting module configured to present a waiting page in an application during image generation; and a preview module configured to present a preview of the image in response to determining that the image has been generated.

[0089] According to one exemplary implementation of this disclosure, the device 900 is executed on a client device running an application, the resolution of the current page is greater than the resolution of the client device, and the image is a long image.

[0090] According to an exemplary implementation of this disclosure, the apparatus 900 further includes: an execution module configured to execute a method in response to detecting a sharing action from a user for sharing the current page; and a sharing module configured to share an image based on an address specified by the user.

[0091] According to an exemplary implementation of this disclosure, the apparatus 900 further includes: an update module configured to update a copy page based on changes in the current page in response to detecting another sharing action for sharing the current page.

[0092] According to an exemplary implementation of this disclosure, the apparatus 900 further includes: a preprocessing module configured to generate a copy page upon completion of loading the current page in response to determining that the user's historical actions meet predetermined conditions.

[0093] Figure 10 A block diagram of a device 1000 capable of implementing various implementations of the present disclosure is shown. It should be understood that... Figure 10 The computing device 1000 shown is merely exemplary and should not be construed as limiting the functionality and scope of the implementation described herein. Figure 10 The computing device 1000 shown can be used to implement the method described above.

[0094] like Figure 10 As shown, computing device 1000 is in the form of a general-purpose computing device. Components of computing device 1000 may include, but are not limited to, one or more processors or processing units 1010, memory 1020, storage device 1030, one or more communication units 1040, one or more input devices 1050, and one or more output devices 1060. Processing unit 1010 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 1020. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of computing device 1000.

[0095] Computing device 1000 typically includes multiple computer storage media. Such media can be any available media accessible to computing device 1000, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 1020 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 1030 can be removable or non-removable media and may include machine-readable media, such as flash drives, disks, or any other media capable of storing information and / or data (e.g., training data for training) and accessible within computing device 1000.

[0096] The computing device 1000 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not explicitly stated... Figure 10 As shown, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks can be provided. In these cases, each drive can be connected to a bus (not shown) via one or more data media interfaces. Memory 1020 may include computer program product 1025 having one or more program modules configured to perform various methods or actions of various implementations of this disclosure.

[0097] The communication unit 1040 enables communication with other computing devices via a communication medium. Additionally, the components of the computing device 1000 can function as a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, the computing device 1000 can operate in a networked environment using logical connections to one or more other servers, network personal computers (PCs), or another network node.

[0098] Input device 1050 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 1060 can be one or more output devices, such as a monitor, speaker, printer, etc. Computing device 1000 can also communicate with one or more external devices (not shown) via communication unit 1040 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with computing device 1000, or with any device (e.g., network card, modem, etc.) that enables computing device 1000 to communicate with one or more other computing devices. Such communication can be performed via input / output (I / O) interface (not shown).

[0099] According to exemplary implementations of this disclosure, a computer-readable storage medium is provided that stores computer-executable instructions thereon, wherein the computer-executable instructions are executed by a processor to implement the methods described above. According to exemplary implementations of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, which are executed by a processor to implement the methods described above. According to exemplary implementations of this disclosure, a computer program product is provided that stores a computer program thereon, which, when executed by a processor, implements the methods described above.

[0100] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatuses, devices, and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.

[0101] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.

[0102] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions that execute on the computer, other programmable data processing apparatus, or other device to perform the functions / actions specified in one or more boxes of a flowchart and / or block diagram.

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

[0104] Various implementations of this disclosure have been described above. These descriptions are exemplary and not exhaustive, nor are they limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the various implementations disclosed herein.< / video> < / video>

Claims

1. A method for generating an image for a page, comprising: Copy the current page presented in the application to generate a duplicate page, the application running on the client device, the current page having a resolution greater than that of the client device; Receive environmental data associated with the current page from the user of the application; The copy page is updated based on the environmental data, which includes the user's tags for the current page; as well as Generating an image of the current page based on the updated rendering data of the copy page includes: The template and local cache data of the current page are reused to write the updated copy page into the rendering cache of the application. The local cache data includes content marked with the environment data. The rendering data is generated based on the rendering cache using a front-end associated with the application; and The image is generated based on the rendered data, and the image is a long image.

2. The method of claim 1, wherein generating the copy page comprises: The current page is copied in the background environment of the application to generate a duplicate page.

3. The method according to claim 2, wherein copying the current page to generate a copy page in the background environment comprises: A hidden page is generated in the background environment of the application; as well as Add a clone node of the root node of the current page to the hidden page to generate the copy page.

4. The method of claim 1, wherein generating the rendering data based on the rendering cache comprises at least one of the following: In response to determining that the data in the rendering cache is valid data, the front end is used to generate the rendering data based on the valid data; In response to determining that the data in the rendering cache is valid, the updated copy of the page is rewritten to the application's rendering cache.

5. The method of claim 4, further comprising: In response to determining that the valid data includes dynamic objects, Extract static objects from the dynamic objects, wherein the dynamic objects include at least one of dynamic images and videos, and the static objects include static images; as well as The static object is used to replace the dynamic image.

6. The method of claim 1, wherein generating the image based on the rendering data comprises: In response to determining that the rendering data has been generated, At least one split-screen image of the rendered data is generated according to the resolution of the client device running the application; as well as The image is generated by stitching together at least one split-screen image.

7. The method of claim 1, wherein the environmental data further comprises: The user's attribute data.

8. The method of claim 1, further comprising: During the generation of the image, a waiting page is displayed in the application; as well as In response to determining that the image has been generated, a preview of the image is presented.

9. The method of claim 1, further comprising: In response to detecting a sharing action from the user for sharing the current page, the method is executed; as well as The image is shared based on the address specified by the user.

10. The method of claim 1, further comprising: In response to detecting another sharing action for sharing the current page, the copy page is updated based on the changes in the current page.

11. The method of claim 1, further comprising: In response to determining that the user's historical actions meet predetermined conditions, the copy page is generated upon completion of loading the current page.

12. An apparatus for generating an image of a page, comprising: The copy module is configured to copy the current page presented in the application to generate a copy page, the application running on the client device, the current page having a resolution greater than that of the client device; A receiving module is configured to receive environmental data associated with the current page from the user of the application; An update module is configured to update the copy page based on the environmental data, which includes the user's tags for the current page; as well as A generation module, configured to generate an image of the current page based on updated rendering data of the copy page, includes: The template and local cache data of the current page are reused to write the updated copy page into the rendering cache of the application. The local cache data includes content marked with the environment data. The rendering data is generated based on the rendering cache using a front-end associated with the application; and The image is generated based on the rendered data, and the image is a long image.

13. An electronic device, comprising: At least one processing unit; as well as At least one memory, coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, which, when executed by the at least one processing unit, cause the electronic device to perform the method according to any one of claims 1 to 11.

14. A computer-readable storage medium having a computer program stored thereon, the computer program causing the processor to implement the method according to any one of claims 1 to 11 when executed by a processor.

Images