Page display method, device, electronic device and computer-readable storage medium

Abstract

The embodiments of the present application disclose a page display method, device, electronic device, and computer-readable storage medium. The method includes: responding to a screenshot operation on a first display area of ​​a display interface, capturing the page content selected in the first display area to obtain a captured image, wherein the first display area includes the browsed page content; generating a screenshot record corresponding to the captured image; and adding the screenshot record in a second display area of ​​the display interface. The above-mentioned page display method, device, electronic device, and computer-readable storage medium can record the page content through the screenshot operation and facilitate viewing.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page display method, device, electronic device and computer-readable storage medium. Background Art

[0002] When a user browses a page on an electronic device (such as a mobile phone, computer, etc.), the user will continuously scroll the page and view the content on the page. When the user needs to view the previously important content, the user needs to scroll the page back and forth and find the previous page content again. The user cannot record the page content, which is cumbersome. Summary of the invention

[0003] The embodiments of the present application disclose a page display method, device, electronic device and computer-readable storage medium, which can record page content through screenshot operations and facilitate viewing.

[0004] The present application embodiment discloses a page display method, including:

[0005] In response to a screenshot operation on a first display area of ​​a display interface, a page content selected in the first display area is captured to obtain a captured image, wherein the first display area includes the page content being browsed;

[0006] Generating a screenshot record corresponding to the captured image;

[0007] Add the screenshot record in the second display area of ​​the display interface.

[0008] The embodiment of the present application discloses a page display device, including:

[0009] A screenshot module, configured to respond to a screenshot operation on a first display area of ​​a display interface, capture a page content selected in the first display area, and obtain a captured image, wherein the first display area includes the page content being browsed;

[0010] A record generation module, used to generate a screenshot record corresponding to the captured image;

[0011] An adding module is used to add the screenshot record in the second display area of ​​the display interface.

[0012] An embodiment of the present application discloses an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the processor implements the method described above.

[0013] An embodiment of the present application discloses a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the method described above is implemented.

[0014] The page display method, device, electronic device and computer-readable storage medium disclosed in the embodiments of the present application respond to a screenshot operation on a first display area of ​​a display interface, capture the page content selected in the first display area, and obtain a captured image. The first display area includes the browsed page content, generates a screenshot record corresponding to the captured image, and adds the screenshot record in a second display area of ​​the display interface. The page content can be recorded by taking a screenshot, and the corresponding screenshot record is displayed in the same display interface as the browsed page content, so that users can view the captured image conveniently and the operation is simple. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0016] Figure 1 This is an application scenario diagram of a page display method in an embodiment;

[0017] Figure 2 A flowchart of a page display method in one embodiment;

[0018] Figure 3A A schematic diagram showing an interface in an embodiment;

[0019] Figure 3B A schematic diagram showing an interface in another embodiment;

[0020] Figure 4 A flowchart of generating a screenshot record according to a moving operation in one embodiment;

[0021] Figure 5 A schematic diagram of adding a screenshot record in the second display area in an embodiment;

[0022] Figure 6 A flowchart of a page display method in another embodiment;

[0023] Fig. 7A is a schematic diagram showing a captured image in one embodiment;

[0024] Figure 7B A schematic diagram showing a captured image in another embodiment;

[0025] Figure 7C A schematic diagram of deleting a screenshot record in one embodiment;

[0026] Figure 8It is a schematic diagram of controlling page content jump by screenshot recording in one embodiment;

[0027] Fig. 9 A schematic diagram of saving a screenshot in one embodiment;

[0028] Fig.10 is a block diagram of a page display device in an embodiment;

[0029] Fig.11 FIG. 4 is a structural block diagram of an electronic device in an embodiment. DETAILED DESCRIPTION

[0030] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0031] It should be noted that the terms "including" and "having" and any variations thereof in the embodiments of the present application and the accompanying drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device including a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products or devices.

[0032] It is understood that the terms "first", "second", etc. used in this application may be used herein to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish a first element from another element. For example, without departing from the scope of this application, a first display area may be referred to as a second display area, and similarly, a second display area may be referred to as a first display area. Both the first display area and the second display area are display areas, but they are not the same display area.

[0033] Figure 1 FIG. 1 is an application scenario diagram of a page display method in an embodiment. Figure 1 As shown, the terminal device 10 can establish a network connection with the server 20. The user can browse pages on the terminal device 10, and when the terminal device 10 enters the browsing page, it can send a page access request to the server 20. After receiving the page access request, the server 20 can send page resource data to the terminal device 10. The terminal device 10 can receive the page resource data and render the page content, and after the rendering is completed, the page content can be displayed on the display screen.

[0034] The display interface of the terminal device 10 displaying the browsed page may include a first display area and a second display area, wherein the first display area includes the browsed page content, and the second display area can be used to display the screenshot record. When the terminal device 10 detects a screenshot operation for the first display area, it can respond to the screenshot operation, capture the page content selected in the first display area, obtain a captured image, generate a screenshot record corresponding to the captured image, and add the screenshot record in the second display area.

[0035] like Figure 2 As shown, in one embodiment, a page display method is provided, which can be applied to electronic devices such as mobile phones, smart wearable devices, tablet computers, personal computers (PCs), etc., and the embodiments of this application are not limited. Among them, the operating system of the above-mentioned electronic devices may include but is not limited to the Android operating system, the IOS operating system, the Symbian operating system, the Windows operating system, etc., and the embodiments of this application are not limited. The method comprises the following steps:

[0036] Step 210, in response to a screenshot operation on the first display area of ​​the display interface, capture the page content selected in the first display area to obtain a captured image.

[0037] The display interface may refer to an interface used to display pages that users need to browse. The display interface may be a display interface of a website, and the display interface may be the same for different web pages in the website; the display interface may also be a display interface of a page, and the display interface between different pages may be different; the display interface may also be a display interface of an application, and the display interface is the same for each page in the same application, etc. As an implementation method, pages belonging to the same website / the same application and having the same layout structure may be used as the same display interface. When switching pages in the display interface, the layout in the display interface will not change, and fixed page content (such as the menu bar above the interface or the menu bar on the side, the copyright bar below, etc.) will not change.

[0038] In an embodiment of the present application, the display interface may include a first display area and a second display area, and the first display area may include the browsed page content. Optionally, the first display area may refer to an area for displaying the main content of the page, and the main content of the page may be used to describe the main information to be conveyed by the page. When the page is switched, the main content of the page will change, and usually the main content of the page occupies the largest space in the display interface. Optionally, the first display area may also refer to an area for displaying the main content of the page and the columns located around the main content of the page, that is, the first display area may be an area other than the second display area in the display interface.

[0039] The electronic device can detect the user's screenshot operation on the first display area. In some embodiments, a screenshot control (such as a screenshot button, a screenshot tool plug-in, etc.) may be provided in the display interface. When it is detected that the screenshot control is triggered, it can be determined that a screenshot operation is detected. In other embodiments, a screenshot shortcut key corresponding to the screenshot operation can also be pre-set. The screenshot shortcut key can be a physical key or a physical key combination on the electronic device (such as the HOME key + power key on a mobile phone, etc.), or a physical key or a physical key combination on an input device connected to the electronic device, such as the Ctrl key + P key combination on the keyboard connected to the electronic device, the left button + scroll wheel button of the mouse connected to the electronic device, or the Ctrl key on the keyboard connected to the electronic device + the left button of the mouse connected to the electronic device, etc., but not limited to this. The screenshot shortcut key can be set according to actual needs. When the electronic device detects that the screenshot shortcut key is triggered, it can be determined that a screenshot operation is detected.

[0040] In some embodiments, it is also possible to register a screenshot notification in the operating system. When a screenshot operation is detected in the operating system, a screenshot notification can be generated and sent to the application corresponding to the display interface. According to the screenshot notification, it can be determined that a screenshot operation has been detected. Optionally, the screenshot event in the display interface can also be monitored. Each time a screenshot operation is performed, a screenshot interface is called, and the screenshot event in the display interface can be monitored by calling the screenshot interface. When a screenshot event is monitored, it can be determined that a screenshot operation has been detected. It can be understood that there can be many ways to detect a screenshot operation, and it is not limited to the several ways described above.

[0041] When the electronic device detects a screenshot operation on the first display area of ​​the display interface, it can respond to the screenshot operation, obtain the page content selected by the user according to the screenshot operation, and capture the selected page content to generate a captured image. Optionally, a screenshot selection box can be displayed in the display interface, and the user can adjust the size and position of the screenshot selection box according to actual needs, and select the page content to be captured through the screenshot selection box. The size of the generated captured image can be consistent with the size of the screenshot selection box. Optionally, the size of the screenshot selection box can also be a fixed size. The user selects the page content to be captured by moving the screenshot selection box in the display interface, and generates a corresponding captured image. The size of the captured image generated each time is consistent. Optionally, the screenshot operation can also be a direct screenshot operation, that is, the content displayed on the entire screen of the electronic device is captured.

[0042] In some embodiments, since the main content of the page in the first display area is of great interest to the user, after obtaining the selected page content, the electronic device may determine the main content of the page included in the selected page content, and only capture the main content of the page to generate a captured image. The content that the user is less concerned about (such as fixed column content, floating advertising content, etc.) may be automatically removed from the selected page content, and only the main content of the page is retained, which can help the user better record the content of interest.

[0043] Step 220, generating a screenshot record corresponding to the captured image.

[0044] Screenshot records can be used to record the generated screenshot images. The screenshot records may be in the following forms, but are not limited to:

[0045] 1. The screenshot record can be a thumbnail corresponding to the captured image. A thumbnail of the captured image can be generated. Optionally, the captured image can be reduced to obtain the corresponding thumbnail, or pixels can be extracted from the captured image at the same pixel interval and a thumbnail can be generated based on the extracted pixels. The method of generating the thumbnail is not limited here.

[0046] 2. The screenshot record may be a record of information such as the screenshot time and screenshot position corresponding to the captured image, wherein the screenshot position refers to the page position of the captured image in the browsed page. When taking a screenshot, the screenshot time and the page position of the obtained captured image in the displayed page content may be recorded as the screenshot position, and a correspondence between the screenshot time, screenshot position and the captured image may be established. Optionally, the above-mentioned page position may include information such as the page number to which the captured page content belongs, the div module in the page, the number of rows in the page, etc., wherein the display interface may define the partitions or sections (division / section) in the page content through the div tag, so that the page content can be divided into multiple independent and different modules.

[0047] 3. The screenshot record may be a link address corresponding to the captured image. After obtaining the captured image, the electronic device may store the captured image, use the storage address as the link address, and establish a mapping relationship between the link address and the captured image.

[0048] It should be noted that the screenshot record may be in the form of any one or more combinations of the above-mentioned forms, and is not limited here.

[0049] Step 230: Add a screenshot record in the second display area of ​​the display interface.

[0050] The second display area can be used to display the generated screenshot records. The screenshot records displayed in the second display area can be one or more. After the screenshot record corresponding to the captured image is generated, the generated screenshot record can be added to the second display area. Optionally, the style and layout of the second display area can be set according to actual needs. For example, the second display area can be in a vertical style and can be displayed at the side of the first display area. The second display area can also be in a horizontal style and can be displayed at the top or bottom of the first display area, etc., but is not limited thereto.

[0051] In some embodiments, the electronic device may add the screenshot record to the second display area according to the first rule. Optionally, the first rule may include but is not limited to the following methods:

[0052] Method 1: Add the generated screenshot record to the end position in the second display area. The screenshot records in the second display area can be arranged in order from far to near according to the screenshot time. The end position can be determined according to the style of the second display area. If the second display area is in a vertical style, the end position can be the bottom of the second display area. If the second display area is in a horizontal style, the end position can be the rightmost end of the second display area, etc.

[0053] Method 2: Add the generated screenshot record to the top position in the second display area. The first screenshot record in the second display area is always the screenshot record corresponding to the latest captured image.

[0054] Method 3: The position where the screenshot record is added in the second display area can be determined based on the detected moving operation. After the electronic device takes a screenshot, the user can move the obtained screenshot image and move the screenshot image to the second display area. The electronic device can obtain the position where the screenshot image is moved to the second display area and add a corresponding screenshot record at the position.

[0055] The second display area may be displayed in the display interface all the time, or it may be displayed only when the trigger condition is met. In some embodiments, a screenshot record button may be provided in the display interface, and the second display area may be opened or closed through the screenshot record button. When the screenshot record button is triggered, the second display area may be displayed in the display interface, and after the screenshot operation is performed, the generated screenshot record is added to the second display area. If the second display area is closed, after obtaining the captured image, the screenshot record may not be generated directly, or the screenshot record may be cached after the screenshot record is generated, and the cached screenshot record may be displayed when the second display area is opened. In some embodiments, the second display area may also be displayed only when a screenshot operation is detected. If no screenshot operation has been detected after entering the display interface, the second display area may not be displayed to prevent the second display area from occupying unnecessary section area without a screenshot, thereby affecting the user's browsing.

[0056] Figure 3A FIG. 1 is a schematic diagram showing an interface in an embodiment. Figure 3A As shown, the electronic device displays a display interface 300 of a website, and the display interface 300 may include a first display area 310 and a second display area 320, wherein the first display area 310 may be used to display the main content of the web page. The user may perform a screenshot operation in the first display area 310, and after the electronic device obtains the captured image, it may generate a corresponding screenshot record and add it to the second display area 320. The second display area 320 may display screenshot records corresponding to N screenshot operations, wherein N may be a positive integer greater than or equal to 1. Optionally, the display interface 300 may also include a screenshot record button 330, which may be used to select to turn the second display area 320 on or off. The screenshot record button 330 may also be used to select to turn the screenshot record function on or off. Since the first display area 310 and the second display area 320 are displayed in the same display interface 300, the user can quickly view the previously captured image by viewing the screenshot record in the second display area 320, without having to switch to the folder where the captured image is saved to view it, which simplifies the operation process and improves convenience. It can be understood that Figure 3A Only one display style of the display interface is shown, which is only used to illustrate the embodiment of the present application. The layout and structure of the display interface can be adjusted according to actual needs and are not limited in the embodiment of the present application.

[0057] In an embodiment of the present application, in response to a screenshot operation on a first display area of ​​a display interface, the page content selected in the first display area is captured to obtain a captured image. The first display area includes the browsed page content. A screenshot record corresponding to the captured image is generated, and a screenshot record is added in a second display area of ​​the display interface. The page content can be recorded through the screenshot, and the corresponding screenshot record is displayed in the same display interface as the browsed page content, so that users can view the captured image conveniently and the operation is simple.

[0058] In some embodiments, the screenshot record corresponding to the captured image may be a thumbnail of the captured image. Optionally, the step of generating a screenshot record corresponding to the captured image may include: reducing the captured image according to a first ratio, and using the reduced captured image as the screenshot record.

[0059] The first ratio may be a ratio value set according to actual needs. After obtaining the captured image, the captured image may be reduced according to the same first ratio, and the reduced captured image may be added to the second display area as a screenshot record. For example, the captured image may be reduced according to a ratio of 1:3, or reduced according to a ratio of 1:4, etc. The scaled captured image must conform to the size of the second display area and be adapted to the second display area to ensure that the screenshot record can be displayed normally in the second display area.

[0060] In some embodiments, the value of the first ratio can also be adjusted according to the size of the captured image to ensure that the captured image can fit the size of the second display area after being reduced according to the first ratio. If the captured image is large, the first ratio can be smaller, and if the captured image is small, the first ratio can be larger, which is not limited here.

[0061] In some embodiments, the step of generating a screenshot record corresponding to the captured image may include: scaling the captured image into an image having a target image size, and using the image having the target image size as the screenshot record.

[0062] The target image size may refer to the size of the uniformly set screenshot record. The captured images may be scaled according to the same target image size to obtain the screenshot record, ensuring that the size of the screenshot record corresponding to each captured image is consistent, and the screenshot record can be neatly displayed while being able to fit the second display area, thereby improving the overall interface visual effect.

[0063] Optionally, the target image size can be determined according to the display parameters of the second display area. The display position, size, style and other display parameters of the second display area in the display interface can be pre-set fixed parameters, or can be adjusted according to the layout structure of the display interface. When entering the display interface, the style sheet and page content of the display interface can be obtained, the layout of the display interface can be determined according to the style sheet, and the page content displayed by each module in the layout can be determined. The display parameters of the second display area in the display interface can be adjusted according to the content displayed by each module so that the second display area does not block the main content of the page. For example, after determining that the area displaying the main content of the page in the display interface is the middle area, the display position of the second display area can be adjusted to the left or right position of the area displaying the main content of the page, the display style can be a vertical version style, and the size parameters of the second display area are set to ensure that the second display area blocks the area displaying the main content of the page.

[0064] For example, Figure 3A As shown, the second display area 320 is displayed on the left side of the first display area 310 , and the size of the screenshot record can be adjusted according to the width of the second display area 320 to ensure that the screenshot record is displayed normally in the second display area 320 . Figure 3B Another embodiment is a schematic diagram showing an interface. Figure 3B As shown, the first display area 310 for displaying the main content of the page in the display interface 300 covers the entire page, the display position of the second display area 340 can be adjusted to the lower side of the first display area 310, the display style can be horizontal, and the size of the screenshot record can be adjusted according to the height of the second display area 340. Figure 3A and Figure 3B In the screenshots, the sizes are different.

[0065] In the embodiment of the present application, the captured image can be reduced and a corresponding screenshot record can be generated, so that the screenshot record is adapted to the second display area and displayed normally in the second display area, which can improve the overall visual display effect of the display interface. The screenshot record is a thumbnail of the corresponding captured image, which can make the screenshot record more intuitively reflect the captured page content and help users improve the efficiency of viewing screenshots.

[0066] like Figure 4 As shown, in one embodiment, the step of generating a screenshot record corresponding to the captured image may include the following steps:

[0067] Step 402: when a moving operation for capturing an image is detected, a moving direction of the moving operation is obtained.

[0068] In some embodiments, after obtaining a captured image according to a screenshot operation, the electronic device may automatically generate a screenshot record corresponding to the captured image, and add the screenshot record to the second display area for display. In some embodiments, the electronic device may also generate a screenshot record according to the user's control operation, and then add the screenshot record to the second display area for display. Optionally, the control operation may be a touch operation performed by the user on the display screen, or a gesture operation of the user, or an operation performed through an input device (such as a stylus, a mouse, etc.), which is not limited here. The electronic device may monitor the operation performed by the user, and when it detects that the operation matches the preset operation, it generates a screenshot record corresponding to the captured image.

[0069] Step 404: if the moving direction is to move to the second display area in the display interface, a screenshot record corresponding to the captured image is generated.

[0070] In an embodiment of the present application, the above-mentioned preset operation may be a moving operation in which the moving direction is to move to the second display area. Taking the mouse as an example, after the user selects to capture an image by pressing the mouse, the captured image can be dragged in the direction of the second display area. The electronic device can monitor mouse events, and when a mouse press event (mousedown event) is detected, the mouse movement event (mousemove event) is monitored, and the mouse position coordinates corresponding to each monitored movement event are obtained. The captured image can move as the position of the mouse changes during movement. The electronic device can analyze the obtained multiple mouse position coordinates to obtain the moving direction of the mouse. When the mouse release event (mouseup event) is monitored, the monitoring of the movement event can be ended, and it can be determined whether the moving direction is to move to the second display area. If the moving direction is to move to the second display area, a screenshot record corresponding to the captured image can be generated.

[0071] In some embodiments, when the moving operation of the captured image is ended, the position of the captured image in the second display area when the moving operation is ended can be obtained, and a screenshot record corresponding to the captured image can be added at the position. The user can record the screenshot through a simple control operation, and can adjust the position of the screenshot record in the second display area according to needs. The operation is simple and fast, the operation efficiency is improved, and the different needs of users can be met.

[0072] Figure 5 FIG. 1 is a schematic diagram of adding a screenshot record in the second display area in an embodiment. Figure 5As shown, the user performs a screenshot operation in the first display area 310 of the display interface 300, and the electronic device can obtain a captured image 502 according to the screenshot operation, and the user can drag the captured image 502. When the electronic device detects that the captured image 502 moves in the direction of the second display area 320, a screenshot record n ​​corresponding to the captured image 502 can be generated, and the screenshot record n ​​can be added to the second display area 320. When generating the screenshot record n ​​corresponding to the captured image 502, the captured image 502 needs to be reduced. When the captured image 502 is moved to the second display area 320, the captured image 502 can be reduced to an image adapted to the second display area 320, thereby obtaining the screenshot record n. The captured image 502 can also be gradually reduced during the movement process. The closer the captured image 502 is to the second display area 320, the smaller the captured image 502 can be, until the captured image 502 is reduced to an image adapted to the second display area 320 when it is moved to the second display area 320, thereby obtaining the screenshot record n. Optionally, the position where the screenshot record n ​​is added in the second display area 320 may be the position where the user drags.

[0073] In the embodiment of the present application, the user can choose whether to add a screenshot record corresponding to the captured image in the second display area through operation according to actual needs. The operation is simple and fast, improves the operating efficiency, and can meet the different needs of users.

[0074] like Figure 6 As shown, in one embodiment, another page display method is provided, which can be applied to the above electronic device. The method may include the following steps:

[0075] Step 602, in response to a screenshot operation on the first display area of ​​the display interface, capture the page content selected in the first display area, obtain a captured image, and cache the captured image.

[0076] The description of step 602 may refer to the relevant description in the above embodiment, which will not be repeated here.

[0077] After the electronic device obtains the captured image, the captured image may be cached and temporarily stored. Optionally, the captured image may be cached in a memory or in a fixed area allocated on a disk, which is not limited here.

[0078] Step 604: Generate a screenshot record corresponding to the captured image.

[0079] Step 606: Add a screenshot record in the second display area of ​​the display interface.

[0080] Steps 602 to 604 may refer to the relevant description in the above embodiment and will not be described in detail here.

[0081] In one embodiment, the second display area may display the screenshot records corresponding to one or more screenshot operations according to the display rules. Optionally, the display rules may include but are not limited to the following rules:

[0082] 1. Display the screenshot records generated in the first time period. The second display area can be used to display the screenshot records generated in the first time period. The first time period can be set according to actual needs. For example, the screenshot records generated in the last 30 minutes can be displayed in the second display area, and the screenshot records generated in the last 25 minutes can also be displayed in the second display area, but it is not limited thereto.

[0083] 2. Display a fixed number of screenshot records. The second display area can be used to display the first number of the most recently generated screenshot records. The first number can be set according to actual needs. For example, the five most recently generated screenshot records, or the six most recently generated screenshot records, etc. can be displayed in the display area. If the number of generated screenshot records is less than or equal to the first number, only all generated screenshot records can be displayed. If the number of generated screenshot records is greater than the first number, the first number of screenshot records with the closest screenshot time to the current moment can be displayed, and the remaining screenshot records can be hidden, or the remaining screenshot records can be directly deleted.

[0084] 3. Display all screenshot records generated by entering the display interface this time. If the display interface is a website interface, all screenshot records generated by entering the display interface this time may refer to all screenshot records generated by visiting the website this time; if the display interface is an application interface, all screenshot records generated by entering the display interface this time may refer to all screenshot records generated by using the application this time, etc. When a change in the display interface is detected, such as switching to another website or closing the application, etc., the screenshot records in the second display area may be cleared.

[0085] In an embodiment of the present application, the second display area can display the screenshot records corresponding to one or more screenshot operations according to the display rules, which can ensure that the screenshot records displayed in the second display area are real-time and will not take up too many resources, thus meeting user needs.

[0086] In one embodiment, the user can select a screenshot record displayed in the second display area and view the captured image corresponding to the selected screenshot record. As a specific implementation, after the generated screenshot record is added to the second display area, the label of the screenshot record in the second display area can be obtained. Optionally, the label can be a div label, and the content in the label can be used to describe the display style and display content of the screenshot record in the second display area. The layer corresponding to the captured image corresponding to the screenshot record can be added to the label, and the display style of the layer can be set according to the captured image. The display style of the layer may include the size of the layer, the display position of the layer, and the conditions for triggering display. Optionally, the size of the layer can be set to be the same as the size of the captured image; the display position of the layer can be at a fixed position relative to the screenshot record, such as the left side, right side, top side, etc. of the screenshot record; the condition for triggering display can be clicking on the screenshot record, or detecting that the cursor is hovering over the screenshot record, etc., but is not limited thereto.

[0087] The electronic device may monitor a first viewing operation on the screenshot record in the second display area, and the first viewing operation may be an operation that meets the conditions for triggering display, such as an operation of clicking on the screenshot record, or an operation of hovering a cursor over the screenshot record, etc. When a first viewing operation on any screenshot record in the second display area is detected, the display style of the layer corresponding to the screenshot record selected by the first viewing operation may be obtained, and the captured image may be rendered in the layer according to the display style, so that the captured image is displayed according to the display style.

[0088] Fig. 7A FIG. 1 is a schematic diagram showing a captured image in one embodiment. Fig. 7A As shown, one or more screenshot records may be displayed in the second display area 340. When the user hovers the mouse over the screenshot record 2, the first viewing operation for the screenshot record 2 may be detected, and the screenshot image 702 (i.e., the screenshot image 2) corresponding to the screenshot record 2 may be rendered in the layer according to the display style of the layer included in the label of the screenshot record 2. The layer may be superimposed on the first display area 310 and / or the second display area 340, so that the screenshot image 702 is superimposed and displayed on the first display area 310 and / or the second display area 340.

[0089] As another specific implementation, the electronic device may monitor a second viewing operation for the screenshot record of the second display area. The second viewing operation may be the same as the first viewing operation described above, for example, both are operations of clicking on the screenshot record, or may be different, for example, the first viewing operation is hovering the cursor over the screenshot record, the second viewing operation is clicking on the screenshot record, or the second viewing operation is to trigger a drop-down menu by right-clicking the mouse, and select the operation of viewing the screenshot in the drop-down menu, etc., which is not limited here. When a second viewing operation for any screenshot record of the second display area is detected, a display component may be created, and the display component may include but is not limited to a display window, a display frame, etc. The captured image corresponding to the screenshot record selected by the second viewing operation may be obtained, and the captured image may be rendered in the display component, and the display component may be suspended and displayed in the display interface. Optionally, the position of the display component in the display interface where it is suspended may be set according to actual needs, for example, it may be suspended and displayed above the first display area, it may be suspended and displayed in the menu bar position in the display interface, etc., but is not limited thereto.

[0090] Figure 7B FIG. 1 is a schematic diagram showing a captured image in another embodiment. Figure 7B As shown, one or more screenshot records may be displayed in the second display area 320. When the user clicks on the screenshot record n, a second viewing operation for the screenshot record n ​​may be detected, and a display component 704 may be created, which is a display window. The captured image n corresponding to the screenshot record n ​​may be rendered in the display component 704. The display component 704 may be displayed suspended above the first display area 310. Optionally, the size of the display component 704 may be a set fixed size, or may be adjusted according to the size of the rendered captured image, which is not limited here.

[0091] In an embodiment of the present application, the screenshots corresponding to the screenshot records in the second display area can be viewed in different ways, which can help users quickly view the screenshots without opening another folder to search, and can simplify the operation of viewing the screenshots to improve viewing efficiency.

[0092] In some embodiments, the user may also delete the screenshot record displayed in the second display area. When the electronic device detects a deletion operation for any screenshot record in the second display area, the screenshot record corresponding to the deletion operation may be deleted from the second display area. Furthermore, the captured image corresponding to the deleted screenshot record may also be deleted from the cache at the same time. Figure 7C FIG. 1 is a schematic diagram of deleting a screenshot record in an embodiment. Figure 7CAs shown, one or more screenshot records may be displayed in the second display area 320. When the user moves the cursor to the screenshot record 1, a delete control 706 may be displayed at the corner of the screenshot record 1, and the user may click the delete control 706 to delete the screenshot record 1 from the second display area 320.

[0093] In some embodiments, the user can perform a jump operation on the screenshot record displayed in the second display area to control the page content displayed in the first display area to jump to the page position corresponding to the screenshot record. After the electronic device obtains the captured image according to the screenshot operation and generates a screenshot record corresponding to the captured image, the page position corresponding to the captured image in the first display area can be obtained. The page position may include information such as the page number to which the captured page content belongs, the div module in the page, and the number of rows in the page. A corresponding relationship between the generated screenshot record and the page position can be established.

[0094] When a jump operation is detected for any screenshot record in the second display area, the first display area can be controlled to jump to the page position corresponding to the screenshot record selected by the jump operation according to the above correspondence. The page position corresponding to the screenshot record selected by the jump operation can be obtained according to the established correspondence, and the page content corresponding to the page position can be controlled to be displayed in the first display area. Optionally, the jump operation can be a pre-set operation, such as a long press operation, a double-click operation, etc., which is not limited here.

[0095] Figure 8 FIG. 1 is a schematic diagram of controlling page content jump by recording screenshots in one embodiment. Figure 8 As shown, (a) shows the interface currently browsed by the user, and the first display area 310 in the display interface 300 displays the web page 3 currently browsed. When the user double-clicks the screenshot record 2, the electronic device detects the jump operation for the screenshot record 2, and can obtain the page position corresponding to the screenshot record 2 as the web page 2, and can control the first display area 310 to jump. The interface after the jump can be shown as (b), and the first display area 310 switches from the page content of the web page 3 to the page content of the web page 1. The screenshot record can directly jump to the corresponding page position, which can help the user quickly and accurately find the corresponding page content, and the user does not need to search repeatedly, thereby improving the simplicity of operation.

[0096] In one embodiment, if no screenshot operation is detected for the first display area within the second time period, the second display area can be hidden. Optionally, the second time period can be set as needed, such as 10 minutes, 8 minutes, 7 minutes, etc. There can be many ways to hide, for example, the display of the second display area can be directly canceled, or the display style of the second display area can be changed, its transparency can be set to 100% (that is, completely transparent), or the second display area can be hidden on the corresponding side of the display interface, etc., but not limited to this. When an operation that triggers the display of the second display area is detected, the hidden second display area can be displayed again. For example, when a screenshot operation is detected, the second display area is triggered to display, or when the cursor is detected to move to the side where the second display area is hidden, the second display area is triggered to display, etc.

[0097] Step 608 , in response to the save operation on the second display area, the captured images corresponding to the screenshot records contained in the second display area are stored in the target path.

[0098] In an embodiment of the present application, the user may also choose to save the captured image corresponding to the screenshot record in the second display area. When the electronic device detects a save operation for the second display area, it may respond to the save operation and store the captured images corresponding to each screenshot record contained in the second display area in the target path. Optionally, the save operation may be a pre-set operation, such as long pressing the background area of ​​the second display area (referring to the area in the second display area other than the screenshot record) and other operations. A save button may also be set in the second display area, and when the save button is triggered, it may be determined that a save operation has been detected. The save operation may also be detected by voice recognition or the like, which is not limited here. By hiding the second display area, the impact of the second display area on the display interface when it is useless may be reduced, thereby improving the visual display effect of the display interface.

[0099] Fig. 9 FIG. 1 is a schematic diagram of saving a screenshot in an embodiment. Fig. 9 As shown, the second display area 320 may be provided with a save button 322. When the save button 322 is clicked, the captured image corresponding to the screenshot record displayed in the second display area 320 may be stored in a target path. The target path may be a path of a pre-established folder. Different websites or different applications may correspond to different folders, or they may be directly stored in the same folder.

[0100] Step 610: If no save operation is detected when exiting the display interface, the cached captured image is deleted.

[0101] Exiting the display interface may refer to exiting the current website or exiting the current application, etc. If no save operation is detected after entering the display interface this time, the cached captured images can be directly deleted when exiting to save storage space. Optionally, the user can also select only the captured images corresponding to one or more screenshot records in the second display area for storage.

[0102] In an embodiment of the present application, various operations such as viewing, jumping, deleting, and saving can be performed on the screenshot records displayed in the second display area. The operation is simple, which improves the interactivity of the second display area. The corresponding screenshots can be quickly viewed through the screenshot records, which improves viewing efficiency and meets the different needs of users.

[0103] like Fig.10 As shown, in one embodiment, a page display device 1000 is provided, which can be applied to the above electronic device. The page display device 1000 can include a screenshot module 1010, a record generation module 1020 and an adding module 1030.

[0104] The screenshot module 1010 is used to respond to a screenshot operation on the first display area of ​​the display interface, capture the page content selected in the first display area, and obtain a captured image. The first display area includes the browsed page content.

[0105] The record generation module 1020 is used to generate a screenshot record corresponding to the captured image.

[0106] The adding module 1030 is used to add a screenshot record in the second display area of ​​the display interface.

[0107] In an embodiment of the present application, in response to a screenshot operation on a first display area of ​​a display interface, the page content selected in the first display area is captured to obtain a captured image. The first display area includes the browsed page content. A screenshot record corresponding to the captured image is generated, and a screenshot record is added in a second display area of ​​the display interface. The page content can be recorded through the screenshot, and the corresponding screenshot record is displayed in the same display interface as the browsed page content, so that users can view the captured image conveniently and the operation is simple.

[0108] In one embodiment, the record generating module 1020 is further configured to reduce the captured image according to a first ratio, and record the reduced captured image as a screenshot.

[0109] In one embodiment, the record generating module 1020 is further used to scale the captured image into an image having a target image size, and record the image having the target image size as a screenshot.

[0110] In the embodiment of the present application, the captured image can be reduced and a corresponding screenshot record can be generated, so that the screenshot record is adapted to the second display area and displayed normally in the second display area, which can improve the overall visual display effect of the display interface. The screenshot record is a thumbnail of the corresponding captured image, which can make the screenshot record more intuitively reflect the captured page content and help users improve the efficiency of viewing screenshots.

[0111] In one embodiment, the record generation module 1020 is further used to obtain the moving direction of the moving operation when a moving operation for the captured image is detected, and if the moving direction is to move to the second display area in the display interface, generate a screenshot record corresponding to the captured image.

[0112] In the embodiment of the present application, the user can choose whether to add a screenshot record corresponding to the captured image in the second display area through operation according to actual needs. The operation is simple and fast, improves the operating efficiency, and can meet the different needs of users.

[0113] In one embodiment, the second display area is used to display the screenshot records generated within the first time period; or the second display area is used to display the first number of screenshot records generated most recently; or the second display area is used to display all screenshot records generated during this entry into the display interface.

[0114] In an embodiment of the present application, the second display area can display the screenshot records corresponding to one or more screenshot operations according to the display rules, which can ensure that the screenshot records displayed in the second display area are real-time and will not take up too many resources, thus meeting user needs.

[0115] In one embodiment, the page display device 1000 includes not only the screenshot module 1010 , the record generation module 1020 and the adding module 1030 , but also a label acquisition module, a layer adding module and a first rendering module.

[0116] The tag acquisition module is used to acquire the tag of the screenshot record in the second display area.

[0117] The layer adding module is used to add the layer corresponding to the captured image in the label and set the display style of the layer according to the captured image.

[0118] The first rendering module is used to render the captured image in a layer according to a display style when a first viewing operation on the screenshot record is detected.

[0119] In one embodiment, the page display device 1000 further includes a creation module and a second rendering module.

[0120] The creation module is used to create a display component when a second viewing operation on the screenshot record is detected.

[0121] The second rendering module is used to render the captured image in the display component and suspend the display component in the display interface.

[0122] In one embodiment, the page display device 1000 further includes a hiding module, which is used to hide the second display area if no screenshot operation on the first display area is detected within the second time period.

[0123] In one embodiment, the page display device 1000 further includes a deletion module, which is used to delete the screenshot record corresponding to the deletion operation from the second display area when a deletion operation is detected for any screenshot record in the second display area.

[0124] In one embodiment, the page display device 1000 further includes a relationship building module and a jump module.

[0125] The relationship establishing module is used to obtain the page position corresponding to the screenshot image in the first display area and establish a corresponding relationship between the screenshot record and the page position after the record generating module 1020 generates the screenshot record corresponding to the screenshot image.

[0126] The jump module is used to control the first display area to jump to the page position corresponding to the screenshot record according to the corresponding relationship when a jump operation for the screenshot record is detected.

[0127] In one embodiment, the page display device 1000 further includes a cache module and a storage module.

[0128] The cache module is used to cache the captured images.

[0129] The saving module is used to respond to the saving operation on the second display area and store the captured images corresponding to the screenshot records contained in the second display area in the target path.

[0130] The cache module is also used to delete the cached captured image if no save operation is detected when exiting the display interface.

[0131] In an embodiment of the present application, various operations such as viewing, jumping, deleting, and saving can be performed on the screenshot records displayed in the second display area. The operation is simple, which improves the interactivity of the second display area. The corresponding screenshots can be quickly viewed through the screenshot records, which improves viewing efficiency and meets the different needs of users.

[0132] Fig.11 FIG. 1 is a block diagram of an electronic device in an embodiment. The electronic device may be a mobile phone, a tablet computer, a smart wearable device, etc. Fig.11As shown, the electronic device 1100 may include one or more of the following components: a processor 1110, and a memory 1120 coupled to the processor 1110, wherein the memory 1120 may store one or more applications, the one or more applications may be configured to be executed by one or more processors 1110, and the one or more programs are configured to execute the methods described in the above embodiments.

[0133] The processor 1110 may include one or more processing cores. The processor 1110 uses various interfaces and lines to connect various parts of the entire electronic device 1100, and executes various functions and processes data of the electronic device 1100 by running or executing instructions, programs, code sets or instruction sets stored in the memory 1120, and calling data stored in the memory 1120. Optionally, the processor 1110 can be implemented in at least one hardware form of digital signal processing (DSP), field-programmable gate array (FPGA), and programmable logic array (PLA). The processor 1110 can integrate one or a combination of a central processing unit (CPU), a graphics processing unit (GPU), and a modem. Among them, the CPU mainly processes the operating system, user interface, and application programs; the GPU is responsible for rendering and drawing display content; and the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 1110, but may be implemented separately through a communication chip.

[0134] The memory 1120 may include a random access memory (RAM) or a read-only memory (ROM). The memory 1120 may be used to store instructions, programs, codes, code sets or instruction sets. The memory 1120 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for implementing at least one function (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the above-mentioned various method embodiments, etc. The data storage area may also store data created by the electronic device 1100 during use, etc.

[0135] It can be understood that the electronic device 1100 may include more or fewer structural elements than those in the above structural block diagram, for example, including a power supply, input buttons, cameras, speakers, screens, RF (Radio Frequency) circuits, Wi-Fi (Wireless Fidelity) modules, Bluetooth modules, sensors, etc., and no limitation is made here.

[0136] An embodiment of the present application discloses a computer-readable storage medium storing a computer program, wherein the computer program implements the methods described in the above embodiments when executed by a processor.

[0137] An embodiment of the present application discloses a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program can be executed by a processor to implement the methods described in the above embodiments.

[0138] A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program can be stored in a non-volatile computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The storage medium can be a disk, an optical disk, a read-only memory (ROM), etc.

[0139] As used herein, any reference to memory, storage, database, or other medium may include nonvolatile and / or volatile memory. Suitable nonvolatile memory may include ROM, Programmable ROM (PROM), Erasable PROM (EPROM), Electrically Erasable PROM (EEPROM), or Flash memory. Volatile memory may include random access memory (RAM), which is used as an external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), memory bus direct RAM (RDRAM), and direct memory bus dynamic RAM (DRDRAM).

[0140] It should be understood that the "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. Those skilled in the art should also be aware that the embodiments described in the specification are all optional embodiments, and the actions and modules involved are not necessarily required for the present application.

[0141] In the various embodiments of the present application, it should be understood that the size of the serial numbers of the above-mentioned processes does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0142] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0143] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0144] If the above-mentioned integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-accessible memory. Based on this understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product, which is stored in a memory and includes several requests for a computer device (which can be a personal computer, a server or a network device, etc., specifically a processor in a computer device) to perform some or all of the steps of the above-mentioned methods of various embodiments of the present application.

[0145] The above is a detailed introduction to a page display method, device, electronic device, and computer-readable storage medium disclosed in the embodiments of the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. At the same time, for those of ordinary skill in the art, according to the idea of ​​the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A page display method, characterized in that: include: In response to a screenshot operation on a first display area of ​​a display interface, a page content selected in the first display area is captured to obtain a captured image, wherein the first display area includes the page content being browsed; Generating a screenshot record corresponding to the captured image; Adding the screenshot record in the second display area of ​​the display interface; Obtaining a label of the screenshot recorded in the second display area; Adding a layer corresponding to the captured image in the tag, and setting a display style of the layer according to the captured image; When a first viewing operation on the screenshot record is detected, the screenshot image is rendered in the layer according to the display style.

2. The method according to claim 1, characterized in that The generating a screenshot record corresponding to the captured image includes: The captured image is reduced according to a first ratio, and the reduced captured image is recorded as a screenshot.

3. The method according to claim 1, characterized in that The generating a screenshot record corresponding to the captured image includes: The captured image is scaled to an image having a target image size, and the image having the target image size is recorded as a screenshot.

4. The method according to claim 1, characterized in that: The generating a screenshot record corresponding to the captured image includes: When a moving operation on the captured image is detected, obtaining a moving direction of the moving operation; If the moving direction is moving toward the second display area in the display interface, a screenshot record corresponding to the captured image is generated.

5. The method according to any one of claims 1 to 4, characterized in that: The second display area is used to display the screenshot records generated within the first time period; or The second display area is used to display the latest generated first number of screenshot records; or The second display area is used to display all screenshot records generated when entering the display interface this time.

6. The method according to any one of claims 1 to 4, characterized in that: After adding the screenshot record, the method further includes: When a second viewing operation on the screenshot record is detected, creating a display component; The captured image is rendered in the display component, and the display component is suspended and displayed in the display interface.

7. The method according to claim 1, characterized in that The method further comprises: If no screenshot operation on the first display area is detected within a second time period, the second display area is hidden.

8. The method according to any one of claims 1 to 4, characterized in that: After generating the screenshot record corresponding to the captured image, the method further includes: Acquire a page position corresponding to the captured image in the first display area; Establishing a corresponding relationship between the screenshot record and the page position; After adding the screenshot record, the method further includes: When a jump operation for the screenshot record is detected, the first display area is controlled to jump to a page position corresponding to the screenshot record according to the corresponding relationship.

9. The method according to claim 1, characterized in that: After obtaining the captured image, the method further includes: caching the captured image; After adding the screenshot record, the method further includes: In response to a save operation on the second display area, storing the captured images corresponding to the respective screenshot records contained in the second display area in a target path; If the saving operation is not detected when exiting the display interface, the cached captured image is deleted.

10. A page display device, characterized in that: include: A screenshot module, configured to respond to a screenshot operation on a first display area of ​​a display interface, capture a page content selected in the first display area, and obtain a captured image, wherein the first display area includes the page content being browsed; A record generation module, used to generate a screenshot record corresponding to the captured image; An adding module, used for adding the screenshot record in the second display area of ​​the display interface; A label acquisition module, used to acquire the label of the screenshot recorded in the second display area; A layer adding module, used for adding a layer corresponding to the captured image in the label, and setting a display style of the layer according to the captured image; The first rendering module is used to render the captured image in the layer according to the display style when a first viewing operation on the screenshot record is detected.

11. An electronic device, characterized in that: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the processor implements the method according to any one of claims 1 to 9.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

Images