Online document processing method and device, electronic equipment and medium

Abstract

The invention provides an online document processing method and device, electronic equipment, a computer readable storage medium and a computer program product, and relates to the field of computers, in particular to the technical field of webpage document processing, data transmission and front-end application. According to the implementation scheme, in response to a preview operation for a document, first slice lists corresponding to one or more pages in the document are obtained; and traversing the slices in the second slice list in sequence to execute the first operation, wherein the second slice list comprises all the slices arranged according to the preset preview sequence in the first slice list. The first operation comprises the step of drawing the current traversed slice in a corresponding canvas according to the position information of the current traversed slice; determining picture data corresponding to the current canvas to be stored in a list corresponding to the page of the slice; and rendering the picture data finally stored in the list to a display page used for previewing the document.

Description

Technical Field

[0001] The present disclosure relates to the field of computers, and in particular, to the fields of web document processing, data transmission, and front-end application technologies. Specifically, it relates to an online document processing method, apparatus, electronic device, computer-readable storage medium, and computer program product. Background Art

[0002] Loading, rendering, and downloading documents (such as PDF files) in a web page are common business requirements. For example, after shopping on an e-commerce platform, it is necessary to preview and download electronic invoices, and on educational websites, it is necessary to preview and download test papers, materials, etc. Generally, previewing a web document such as a PDF file through a browser can be achieved by introducing a third-party tool or converting the document into a picture for loading and other methods.

[0003] However, current methods all have certain limitations, which are likely to cause the browser to freeze and affect performance. Summary of the Invention

[0004] The present disclosure provides an online document processing method, apparatus, electronic device, computer-readable storage medium, and computer program product.

[0005] According to one aspect of the present disclosure, there is provided an online document processing method, including: in response to a preview operation on the document, obtaining a first slice list corresponding to each of one or more pages in the document, where the first slice list includes a plurality of slices obtained by performing a picture cutting operation on the corresponding page; sequentially traversing the slices in a second slice list to perform a first operation on the currently traversed slice, where the second slice list includes all the slices in the first slice lists corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order, where the first operation includes: determining the page corresponding to the currently traversed slice as a target page; obtaining a first list corresponding to the target page and a drawable canvas; according to the position information of the currently traversed slice in the target page, drawing the currently traversed slice at a corresponding position in the canvas; determining the picture data corresponding to the current canvas and storing the picture data in the first list; and obtaining the picture data finally stored in the first list to render the currently traversed slice into a display page for previewing the document based on the picture data.

[0006] According to another aspect of the present disclosure, there is provided an online document processing apparatus, including: an acquisition unit configured to, in response to a preview operation on the document, acquire a first slice list corresponding to each of one or more pages in the document, where the first slice list includes a plurality of slices obtained by performing a picture cutting operation on the corresponding page; a traversal unit configured to sequentially traverse the slices in a second slice list to perform a first operation on the currently traversed slice, where the second slice list includes all the slices in the first slice lists corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order, where the first operation includes: determining the page corresponding to the currently traversed slice as a target page; acquiring a first list corresponding to the target page and a drawable canvas; drawing the currently traversed slice at a corresponding position on the canvas according to the position information of the currently traversed slice in the target page; determining the picture data corresponding to the current canvas and storing the picture data in the first list; and acquiring the picture data last stored in the first list to render the currently traversed slice onto a display page for previewing the document based on the picture data.

[0007] According to another aspect of the present disclosure, there is provided an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor; the memory stores instructions executable by the at least one processor, and when the instructions are executed by the at least one processor, the at least one processor is enabled to execute the method described in the present disclosure.

[0008] According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions for causing a computer to execute the method described in the present disclosure.

[0009] According to another aspect of the present disclosure, there is provided a computer program product including a computer program, where the computer program implements the method described in the present disclosure when executed by a processor.

[0010] According to one or more embodiments of the present disclosure, the document pages are cut into a set of slices by picture cutting technology, effectively solving the problem of slow loading of large-size pictures during the online preview of documents; and during the traversal of the page slices, the slices are continuously drawn onto the corresponding canvas and rendered onto the display page, so that when the user clicks on the corresponding page picture during the preview, the entire page can still be displayed instead of a certain slice, thereby optimizing the loading experience.

[0011] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it used to limit the scope of the present disclosure. Other features of the present disclosure will become readily apparent from the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] The drawings exemplarily illustrate embodiments and form a part of the specification, and are used together with the written description of the specification to explain the exemplary embodiments of the embodiments. The illustrated embodiments are for illustrative purposes only and do not limit the scope of the claims. In all the drawings, the same reference numerals refer to similar but not necessarily identical elements.

[0013] Figure 1 A schematic diagram of an exemplary system in which various methods described herein can be implemented according to an embodiment of the present disclosure;

[0014] Figure 2 A flowchart of an online document processing method according to an embodiment of the present disclosure;

[0015] Figure 3 A schematic diagram of slicing a page into multiple slices according to an embodiment of the present disclosure;

[0016] Figures 4-7 A schematic diagram of a display page for realizing document preview according to an embodiment of the present disclosure;

[0017] Figure 8 A block diagram of the structure of an online document processing apparatus according to an embodiment of the present disclosure; and

[0018] Figure 9 A block diagram of the structure of an exemplary electronic device that can be used to implement the embodiments of the present disclosure. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0019] The following describes exemplary embodiments of the present disclosure with reference to the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope of the present disclosure. Similarly, for clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0020] In the present disclosure, unless otherwise specified, the terms "first", "second", etc. are used to describe various elements and are not intended to limit the positional relationship, temporal relationship or importance relationship of these elements. Such terms are only used to distinguish one element from another. In some examples, the first element and the second element may refer to the same instance of the element, and in certain cases, based on the context description, they may also refer to different instances.

[0021] In the description of the various examples in this disclosure, the terms used are for the purpose of describing specific examples only and are not intended to be limiting. Unless the context clearly indicates otherwise, if the number of elements is not specifically limited, the element can be one or more. In addition, the term "and / or" used in this disclosure covers any and all possible combinations of the listed items.

[0022] Embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

[0023] Figure 1 FIG. shows a schematic diagram of an exemplary system 100 in which the various methods and apparatuses described herein can be implemented according to an embodiment of the present disclosure. Referring Figure 1 to, the system 100 includes one or more client devices 101, 102, 103, 104, 105, and 106, a server 120, and one or more communication networks 110 that couple the one or more client devices to the server 120. The client devices 101, 102, 103, 104, 105, and 106 can be configured to execute one or more applications.

[0024] In an embodiment of the present disclosure, the server 120 can run one or more services or software applications that enable methods for online document processing to be executed.

[0025] In certain embodiments, the server 120 can also provide other services or software applications, which can include non-virtual environments and virtual environments. In certain embodiments, these services can be provided as web-based services or cloud services, for example, provided to users of the client devices 101, 102, 103, 104, 105, and / or 106 under a software as a service (SaaS) model.

[0026] In Figure 1 the configuration shown, the server 120 can include one or more components that implement the functions performed by the server 120. These components can include software components, hardware components, or a combination thereof that can be executed by one or more processors. Users operating the client devices 101, 102, 103, 104, 105, and / or 106 can in turn utilize one or more client applications to interact with the server 120 to utilize the services provided by these components. It should be understood that various different system configurations are possible, which can be different from the system 100. Therefore, Figure 1 is an example of a system for implementing the various methods described herein and is not intended to be limiting.

[0027] Users can use client devices 101, 102, 103, 104, 105, and / or 106 to preview documents. The client devices can provide an interface that enables the users of the client devices to interact with the client devices. The client devices can also output information to the users via this interface. Although Figure 1 only six client devices are depicted, those skilled in the art will be able to understand that the present disclosure can support any number of client devices.

[0028] Client devices 101, 102, 103, 104, 105, and / or 106 can include various types of computer devices, such as portable handheld devices, general-purpose computers (such as personal computers and laptop computers), workstation computers, wearable devices, smart screen devices, self-service terminal devices, service robots, gaming systems, thin clients, various messaging devices, sensors, or other sensing devices, etc. These computer devices can run various types and versions of software applications and operating systems, such as MICROSOFT Windows, APPLE iOS, UNIX-like operating systems, Linux or Linux-like operating systems (such as GOOGLE Chrome OS); or include various mobile operating systems, such as MICROSOFT WindowsMobile OS, iOS, Windows Phone, Android. Portable handheld devices can include cellular phones, smartphones, tablets, personal digital assistants (PDAs), etc. Wearable devices can include head-mounted displays (such as smart glasses) and other devices. Gaming systems can include various handheld gaming devices, Internet-enabled gaming devices, etc. The client devices are capable of executing various different applications, such as various Internet-related applications, communication applications (such as email applications), short message service (SMS) applications, and can use various communication protocols.

[0029] Network 110 can be any type of network well-known to those skilled in the art, which can support data communication using any one of a variety of available protocols (including but not limited to TCP / IP, SNA, IPX, etc.). By way of example only, one or more networks 110 can be a local area network (LAN), an Ethernet-based network, token ring, wide area network (WAN), the Internet, virtual network, virtual private network (VPN), intranet, extranet, blockchain network, public switched telephone network (PSTN), infrared network, wireless network (such as Bluetooth, WIFI), and / or any combination of these and / or other networks.

[0030] Server 120 may include one or more general-purpose computers, dedicated server computers (such as PC (Personal Computer) servers, UNIX servers, midrange servers), blade servers, mainframes, server clusters, or any other suitable arrangement and / or combination. Server 120 may include one or more virtual machines running a virtual operating system, or other computing architectures involving virtualization (such as one or more flexible pools of logical storage devices that can be virtualized to maintain virtual storage devices of the server). In various embodiments, server 120 may run one or more services or software applications that provide the functions described below.

[0031] The computing units in server 120 may run one or more operating systems including any of the above operating systems and any commercially available server operating systems. Server 120 may also run any one of a variety of additional server applications and / or middleware applications, including HTTP servers, FTP servers, CGI servers, JAVA servers, database servers, etc.

[0032] In some embodiments, server 120 may include one or more applications to analyze and merge data feeds and / or event updates received from users of client devices 101, 102, 103, 104, 105, and 106. Server 120 may also include one or more applications to display data feeds and / or real-time events via one or more display devices of client devices 101, 102, 103, 104, 105, and 106.

[0033] In some embodiments, server 120 may be a server of a distributed system, or a server incorporating blockchain. Server 120 may also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology. A cloud server is a host product in the cloud computing service system, which addresses the defects of high management difficulty and weak business scalability existing in traditional physical hosts and virtual private server (VPS, Virtual Private Server) services.

[0034] System 100 may also include one or more databases 130. In certain embodiments, these databases can be used to store data and other information. For example, one or more of the databases 130 can be used to store information such as slice files, source file data of documents, etc. The databases 130 can reside in various locations. For example, the database used by the server 120 can be local to the server 120, or can be remote from the server 120 and can communicate with the server 120 via a network-based or dedicated connection. The databases 130 can be of different types. In certain embodiments, the database used by the server 120 can be, for example, a relational database. One or more of these databases can store, update, and retrieve data to and from the database in response to commands.

[0035] In certain embodiments, one or more of the databases 130 can also be used by an application to store application data. The database used by the application can be a different type of database, such as a key-value store, an object store, or a conventional store supported by a file system.

[0036] Figure 1 System 100 can be configured and operated in various ways to enable the application of the various methods and apparatuses described in this disclosure.

[0037] In this disclosure, the spatial relative terms "horizontal" / "lateral" and "vertical" / "longitudinal" are used in conjunction with a display page. In such a context, the "horizontal direction" / "lateral direction" refers to the row direction of the display page, while the "vertical direction" / "longitudinal direction" refers to the column direction of the display page. Additionally, the spatial relative terms "upper", "lower", "left", "right" are also used in conjunction with the display page. "Upper", "lower", "left", "right" indicate the orientation on the image of the document (or equivalently, the display page) as observed from the perspective of the preview user when the document (e.g., a PDF file) is correctly oriented for preview reading relative to the preview user. Thus, the "up-down direction" basically corresponds to the column direction of the display page, the viewport, while the "left-right direction" basically corresponds to the row direction of the display page.

[0038] Generally, previewing a web document such as a PDF file through a browser can be achieved by methods such as introducing a third-party tool or converting the document into a picture for loading. For example, PDF.js is a tool launched by Mozilla that can convert a PDF file into an HTML5 page for display and is one of the most popular PDF loading tools at present. Generally, third-party tools belong to a black-box solution with relatively high limitations: in terms of functionality, it is difficult to troubleshoot and repair when unexpected situations such as security issues and white screens occur; in terms of performance, the volume of third-party tools is fixed, and it is difficult to optimize them when loading cache situations occur.

[0039] Currently, the method of converting a document into a picture for loading renders the PDF file into a picture format and combines picture loading optimization techniques, mainly including three types of solutions: reducing the number of HTTP requests, compressing the picture size, and preloading. However, the pictures converted from PDF files are generally large and may occupy the entire screen in some scenarios. Using traditional picture loading techniques has limited room for optimization, and the picture loading duration is at the second level, resulting in a poor user experience.

[0040] Therefore, according to the method of the present disclosure, an online document processing method is provided. Figure 2 A flowchart of an online document processing method according to an embodiment of the present disclosure is shown, as Figure 2 shown, the method 200 includes: in response to a preview operation on the document, obtaining a first slice list corresponding to each of one or more pages in the document, where the first slice list includes a plurality of slices obtained by performing a picture cutting operation on the corresponding page (step 210); sequentially traversing the slices in the second slice list to perform a first operation on the currently traversed slice, where the second slice list includes the slices in all the first slice lists corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order (step 220).

[0041] Wherein, the first operation includes the following steps: determining the page corresponding to the currently traversed slice as the target page; obtaining the first list and the drawable canvas corresponding to the target page; according to the position information of the currently traversed slice in the target page, drawing the currently traversed slice at the corresponding position in the canvas; determining the picture data corresponding to the current canvas and storing the picture data in the first list; and obtaining the picture data finally stored in the first list, and rendering the currently traversed slice to the display page for previewing the document based on the picture data.

[0042] According to an embodiment of the present disclosure, the document page is cut into a set of slices through picture cutting technology, effectively solving the problem of slow loading of large-size pictures during the online preview of the document; and during the traversal of the page slices, the slices are continuously drawn into the corresponding canvas and rendered to the display page, so that when the user clicks on the picture of the corresponding page during the preview, the entire page can still be displayed instead of a certain slice, thereby optimizing the loading experience.

[0043] In the present disclosure, the document may include any suitable document that can be converted into a picture for loading and previewing, such as a PDF file, a word file, a web document, etc., which is not limited herein.

[0044] In some embodiments, in the preprocessing stage, the document to be processed can be first converted into images page by page to generate a list of original images. Then, perform an image cutting operation on each image in the list of original images to obtain a set of slice lists corresponding to each image, that is, the first slice list.

[0045] In the present disclosure, the image cutting operation can be implemented by any suitable method to cut an image into multiple small images (i.e., slices).

[0046] In some embodiments, it may include bottom-up and top-down image cutting operation methods. And the document pages can be cut according to at least one of the above methods.

[0047] In the above embodiments, the bottom-up image cutting operation method, that is, define the size of the sliced slices, such as 256*256 pixels, and cut the image of the page based on the defined slice size to obtain a slice list corresponding to the page including slices of the corresponding size. This method gradually constructs the image boundary and the overall image segmentation result from the pixel level upwards, which requires higher computational and time costs, but can obtain a more refined segmentation result. The data format of the bottom-up image cutting operation method can be as follows:

[0048]

[0049] In some examples, for a document including multiple pages, when using the bottom-up method to cut the pages, it can define the same or different slice sizes corresponding to the multiple pages, which is not limited here.

[0050] In the above embodiments, the top-down image cutting operation method, that is, define the cutting levels of the image. Among them, in each level of cutting, the image is cut into four small pieces by one cut up and down and one cut left and right. Then, in the next level of cutting, the four small pieces obtained from the previous level of cutting are respectively used as new images to be cut and cut into four small pieces again, so as to obtain sixteen slices, and so on for each level. This method starts from the whole image and gradually divides the outlines and boundaries of different images downwards. The segmentation speed is fast, but it is easily affected by factors such as noise, and the segmentation result may not be as refined as the bottom-up method. The data format of the top-down image cutting operation method can be as follows:

[0051]

[0052] Therefore, it is necessary to clarify which cutting scheme to adopt according to actual needs, and define the minimum slice size or the cutting levels.

[0053] In the process of cutting a document page into a set of slices through image cutting technology, in some examples, it is further possible to determine how many slices the page of the document needs to be cut into. Specifically, if a bottom-up image cutting operation method is adopted, the calculation formula is: the number of slices = (the width of the original page image / the width of the slice) × (the height of the original page image / the height of the slice). If a top-down image cutting operation method is adopted, the calculation formula is: the number of slices = 4 * the number of levels.

[0054] Therefore, by dividing the original page image into the corresponding number of slices, a two-dimensional array of slices can be output, and the data format is as follows:

[0055]

[0056]

[0057] According to some embodiments, the horizontal index of the slice on the whole image and the vertical index of the slice on the whole image can be used to indicate which slice the slice is in the horizontal direction and which slice the slice is in the vertical direction of the whole image respectively. For example, in an embodiment where the whole image is cut into 16 slices by a top-down image cutting operation method, as Figure 3 shown, the horizontal index of slice 301 is 2 and the vertical index is also 2, that is, (xIndex, yIndex) = (2, 2), to indicate that slice 301 is the slice in the second row and the second column after the whole image is cut.

[0058] In some embodiments, after the above-mentioned preprocessing operations, the results of the cut images are saved for subsequent document preview. In some examples, multiple slicing methods can be adopted, and the slice results obtained by the multiple slicing methods are stored to adapt to different-sized screens of preview devices, such as PC terminals and mobile terminals, so as to achieve the best loading effect.

[0059] In the present disclosure, a "display page" is an interface for a user to interact with a device. Through the display page, the user can browse information and perform operations. Exemplarily, the display page can be the web content that appears on the screen when a device such as a computer or a mobile phone is turned on. This page can be a search engine or other websites such as news websites and social media.

[0060] In some examples, the user can preview a PDF file through a browser web page in a search engine. Therefore, this browser web page can be the display page for previewing the document. Thus, the canvas corresponding to the corresponding page in the PDF file can be rendered into the web page for the user to preview.

[0061] In the present disclosure, a viewport refers to the user-visible part of a displayed page. In a browser, the viewport simply refers to the screen area where the browser displays the page content, such as the visible area where a web page is displayed on the screen.

[0062] In some embodiments, the preview operation for the document may include actions for initiating the preview operation of the document, such as clicking on a certain file in a web page, clicking on a preset area of the screen, or inputting preset characters, etc.

[0063] In some embodiments, in response to the preview operation for the document, a first slice list corresponding to each of one or more pages in the document is obtained. In response to the preview operation for the document, a request for obtaining the data corresponding to the document may be generated, and based on this request, the first slice list is obtained. At this time, the corresponding slice list generated through the preprocessing operation as described above can be obtained to improve the data transmission efficiency. In some examples, caching can be set through the HTTP response header to reduce unnecessary network requests.

[0064] In the embodiments described above where the slice results obtained by various slicing methods can be stored for adapting to different-sized screens of preview devices, the request generated based on this preview operation may include the screen information of the device, and based on this request, the slice results obtained by the slicing method corresponding to the screen information are obtained.

[0065] In the present disclosure, the slices in the second slice list described in step 220 are arranged in a preset preview order, where this preset preview order (the first preset preview order) can be determined based on the reading order of the document. For example, for a PDF file including multiple pages, usually the user previews and reads from the first page (i.e., the home page) to the last page in sequence. And for any page, when the text therein extends in the basic left-right direction (i.e., a landscape reading material) relative to the preview user, usually the preview user reads from the left to the right when reading each line. At this time, the preview order determined based on the reading order of the document can be: starting from the first page of the document, and for the slices in the first page, starting from the slice in the first row and first column (i.e., the upper left corner), and viewing them in sequence from left to right and from top to bottom. In Figure 3In the illustrated example, the preview order of the page can be: (xIndex, yIndex) = (1, 1)(1, 2)(1, 3)(1, 4)(2, 1)(2, 2)(2, 3)(2, 4)(3, 1)(3, 2)(3, 3)(3, 4)(4, 1)(4, 2)(4, 3)(4, 4). After all the slices in the first page are previewed, continue to preview the slices in the second page in the same order... until the last page of the document. Thus, the preview order of all the slices corresponding to all the pages to be previewed in the document is determined.

[0066] In the present disclosure, all the first slice lists corresponding to one or more pages of the document can be equivalently regarded as a second slice list together for the convenience of subsequent description. Alternatively, the second slice list can be obtained by merging all the first slice lists corresponding to one or more pages of the document. The slices in the second slice list are arranged in a preset preview order.

[0067] In some embodiments, the second slice list may include all the slices in all the first slice lists. It may include some slices in all the first slice lists, such as filtering out some blank slices to save subsequent loading and rendering time. Of course, the slices in the first slice list may also be a slice list formed after filtering out blank slices, which is not limited herein.

[0068] It can be understood that for the case where the text lines extend in the basic up-down direction with respect to the reader (i.e., a portrait reading material), the corresponding preview order can also be determined based on the reading order based on the above example.

[0069] According to some embodiments, the method according to the present disclosure may further include: obtaining first size information of the target page and second size information of the canvas; determining third size information of the currently traversed slice; and determining a scaling ratio based on the first size information and the second size information. Drawing the slice at the corresponding position on the canvas according to the position information of the currently traversed slice in the corresponding page includes: drawing the slice at the corresponding position on the canvas according to the third size information, the scaling ratio, and the position information of the slice in the corresponding page.

[0070] Typically, when dealing with the task of drawing page content onto a canvas, the size and position information of the page, the canvas, and the page content (e.g., slices) need to be considered. Thus, in some examples, the first size information of the target page can be obtained, which generally includes the width and height of the page (e.g., in pixels). These information can be obtained by parsing the HTML / CSS of the page or using specific APIs. The second size information of the canvas is obtained, which also includes the width and height of the canvas. The size of the canvas may be specified by the user or automatically determined according to the resolution of the display device. Calculate the scaling ratio based on the size information of the page and the canvas: The scaling ratio is usually to ensure that the page content can appropriately fit the canvas size. The ratio of the page width to the canvas width, or the ratio of the page height to the canvas height can be used (depending on which ratio is more suitable for maintaining the aspect ratio of the content). For example, if the page width is 1000 pixels and the canvas width is 500 pixels, the horizontal scaling ratio is 0.5.

[0071] For the multiple slices into which the page content may be divided, each slice has its own size information (width and height). During the traversal process, record the width and height of the current slice. Draw the slice according to the slice size, scaling ratio, and position information, using the calculated scaling ratio to adjust the size of the slice. Determine the drawing position of the slice on the canvas according to the position information of the slice in the original page (e.g., the coordinates of the upper left corner). For example, an appropriate drawing API (such as the Canvas API) can be used to draw the slice onto the canvas.

[0072] In some embodiments, obtaining the first list corresponding to the target page and the drawable canvas includes: for the target page, determining whether there is a corresponding first list and canvas currently; if it is determined that there is no corresponding first list and canvas for the target page, first generate an empty first list and a drawable canvas corresponding to the target page, for use in rendering each slice in the target page onto the display page.

[0073] In some embodiments, the slices can be merged into one picture through the Canvas technology of the JavaScript language and rendered in the web page. Exemplarily, the first slice list corresponding to each page can be obtained in sequence, using the first slice list corresponding to each page as the input for the Canvas splicing process, so as to determine the first list and canvas corresponding to each page respectively.

[0074] Specifically, for example, the slices corresponding to the first page in the second slice list can be traversed first. For example, all the slices belonging to the first page can be obtained, denoted as originList, as the input for the Canvas splicing process. Then, for this first page, an empty list resList and a Canvas drawing board are created. resList is used to store the list of the dynamically rendered image src. In the Canvas splicing process, first, the first slice in originList is obtained, and based on the position information of this slice (e.g., URL), a new image object (i.e., an image object) is created. Further, for example, through the onload callback function, the slice can be drawn at the corresponding position on the corresponding drawing board based on the position and size information of this slice. For example, through the canvas.toDataURL method, the above-mentioned drawing board can be converted into image data and stored in resList at the end. The last image data in resList is obtained, and a label is created and rendered into the web page. After traversing all the slices belonging to the first page, all the slices belonging to the second page are further obtained to be used as the new input for the Canvas splicing process. This continues until all pages have been loaded and rendered.

[0075] Figure 4 shows a schematic diagram of a display page for implementing document preview according to an embodiment of the present disclosure. As Figure 4 shown, in the viewport 401 of the display page, the page 402 of the currently previewed document can be seen. In the previous process, the page 402 was sliced into 16 sections as Figure 3 shown. And, Figure 4 the grids including "╳" in it indicate that the slices in this area have been currently rendered into the display page, while the blank grids indicate that the slices in this area have not been currently rendered into the display page. Although the rendering operation of all the slices in the page 402 has not been currently implemented, when it is detected that the user selects this page (such as clicking on the area of this page on the screen), the user can still see the complete picture of this page.

[0076] According to some embodiments, traversing the slices in the second slice list in sequence includes: for the previous slice rendered into the display page, determining whether the slice is currently outside the lower boundary of the viewport of the display page and whether the distance between the slice and the lower boundary is greater than a first preset value, where the outside of the lower boundary of the viewport is the area outside the viewport; in response to determining that the slice is not currently outside the lower boundary of the viewport, or determining that the slice is currently outside the lower boundary of the viewport but the distance between the slice and the lower boundary is not greater than the first preset value, continuing to traverse the slices in the second slice list to perform the first operation.

[0077] According to some embodiments, traversing the slices in the second slice list in sequence further includes: in response to determining that the slice is currently outside the lower border of the viewport and the distance from the lower border of the viewport is greater than the first preset value, pausing the traversal of the slices in the second slice list.

[0078] Figures 5-6 FIG. 1 shows a schematic diagram of a display page for implementing document preview according to an embodiment of the present disclosure. For example, if a user Figure 4 Slide down on the basis shown to continue previewing the document. After completing the loading and rendering of the slices in page 402, continue loading and rendering the slices in page 403. Currently, it can be seen that the third row of slices 404 in page 403 has been rendered, where the dotted line represents the slice area that has been rendered but is outside the viewport and cannot be seen by the user. Figure 5 As shown, it can be determined that the slice 404 is outside the lower boundary of the viewport 401 of the display page, that is, the lower area of ​​the viewport. And further, it is determined whether the distance between the slice 404 and the lower boundary of the viewport 401 is greater than a first preset value, and it can be determined whether the distance a1 between the upper boundary of the slice 404 and the lower boundary of the viewport 401 is greater than the first preset value.

[0079] Continue to refer Figure 5 If it is determined that the distance a1 between the upper boundary of the slice 404 and the lower boundary of the viewport 401 is greater than the first preset value, the traversal of the remaining slices in the second slice list is paused.

[0080] refer to Figure 6 If a downward sliding operation of the user for further previewing the document is detected, it is determined that the distance a2 between the upper boundary of the slice 404 and the lower boundary of the viewport 401 is not greater than the first preset value, and the remaining slices in the second slice list are traversed to perform the first operation. If a downward sliding operation of the user for further previewing the document is not detected at this time, it can be determined that at least the first slice in the next row of slices of the slice 404 can be continuously loaded.

[0081] In some embodiments, the distance between the slice and the lower border of the viewport can be determined based on: the difference between the distance between the upper border of the slice and the upper border of the viewport and the distance between the upper and lower borders of the viewport. For example, the distance between the upper border of the slice rendered to the display page and the upper border of the viewport can be obtained by the getBoundingClientRect().top method; the distance between the upper and lower borders of the viewport (i.e., the screen height) can be obtained by the window.innerHeight method. Figure 5, in order to determine the distance a1 between the upper boundary of the slice 404 and the lower boundary of the viewport 401, the difference between the distance h2 from the upper boundary of the slice to the upper boundary of the viewport and the distance h2 between the upper and lower boundaries of the viewport can be obtained for determination.

[0082] In the above embodiment, the first preset value can be a positive value. Through this embodiment, it is ensured that the slices corresponding to the current preview position displayed in the viewport can all be loaded, improving the preview experience; at the same time, it can avoid overloading the slices at positions that the user may not need to preview, saving computing resources.

[0083] In some examples, the first preset value can be equal to the corresponding slice height. Setting the first preset value to be equal to the slice height can ensure that the next row of slices can be loaded in advance, avoiding the situation where the loading starts only when the user swipes and a short-term white screen appears, further improving the preview experience.

[0084] According to some embodiments, sequentially traversing the slices in the second slice list includes: in response to determining that the slice is currently outside the lower boundary of the viewport and the distance from the lower boundary of the viewport is greater than the first preset value, and determining that the slice is the last slice in its slice row after being rendered to the display page, pausing the traversal of the slices in the second slice list; in response to determining that the slice is currently outside the lower boundary of the viewport and the distance from the lower boundary of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row after being rendered to the display page, continuing to traverse the slices in the second slice list to perform the first operation.

[0085] In the above embodiment, continue to refer to Figure 5 or Figure 6 , only when it is determined that the slice 404 is the last slice in the current row, the above step of determining whether the slice is outside the lower boundary of the viewport is performed. In this way, a complete row of slices has been loaded each time the above determination operation is performed.

[0086] In the above embodiment, the "last slice" is determined based on the preset preview order for traversing the slices. Further, it can be determined whether it is the last slice in the current row based on the vertical index of the slice on the entire image.

[0087] During the loop traversal, it is necessary to cache the slice data. As described above, when previewing a PDF file through a browser web page, all slice data will be cached in the browser memory. If the number of slices is large, it will cause the memory to be full and the web page to crash. Taking the V8 engine of the Chrome browser as an example, its heap memory limit is shown in Table 1.

[0088] System Physical memory Maximum heap memory limit 64-bit >16G 4G 64-bit <＝16G 2G 32-bit / 1G

[0089] Table 1

[0090] Thus, according to some embodiments, the method according to the present disclosure may further include: determining whether the memory occupied by all the slices rendered to the display page in the second slice list exceeds a preset memory limit; and in response to determining that the preset memory limit is exceeded, performing a memory cleaning operation on one or more slices rendered to the display page based on the preview operation.

[0091] To ensure the stability of the web page, when loading new slices, it can be determined whether the cached data has exceeded the memory limit. If so, a memory cleaning operation can be performed on one or more slices rendered to the display page based on the preview operation.

[0092] In the present disclosure, after the user starts a preview operation for a document, the preview operation can be continuously monitored. For example, information such as the corresponding preview position and sliding direction can be obtained. In some examples, a memory cleaning operation can be performed on one or more slices that are the farthest from the current preview position. It can be understood that before the memory cleaning operation is performed, one or more slices that are the farthest from the current preview position are the slices that are traversed and rendered first in the preset preview order. Thus, the impact of the memory limit on the user's preview can be minimized.

[0093] For example, in the embodiment of slice synthesis and rendering implemented by the Canvas technology of the JavaScript language described above, a FIFO (First In First Out) strategy can be adopted, pointing the earliest created picture object (i.e., the image object) to null to dereference it, and removing the corresponding tag in the web page structure, and leveraging the garbage collection mechanism of the search engine to clean up the memory occupied by the historical slices to achieve a better loading experience.

[0094] According to some embodiments, it is determined whether the memory occupied by all the slices rendered to the display page exceeds the preset memory limit based on the following operations: determining a second preset value, where the second preset value is a positive integer and the memory occupied by the number of slices equal to the second preset value does not exceed the preset memory limit; and in response to determining that the number of all the slices rendered to the display page is greater than the second preset value, determining that the memory occupied by all the slices rendered to the display page exceeds the preset memory limit.

[0095] As described above, to prevent the memory from being filled up, when loading a new slice, it is necessary to determine whether the cached data has exceeded the memory limit. However, it is usually not easy to detect the memory of the browser in real time, which consumes a large amount of computing resources. Therefore, in the above embodiments, by setting an upper limit on the number of cacheable slices, it is only necessary to control the number of rendered slices not to exceed this upper limit, thus greatly saving the computing consumption.

[0096] According to some embodiments, traversing the slices in the second slice list in sequence to perform a first operation on the currently traversed slice includes: after performing a memory cleaning operation, in response to the preview operation, determining at least one slice to be traversed in the second slice list and the corresponding traversal order based on the sliding direction corresponding to the preview operation, where the traversal order matches the sliding direction; traversing at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice.

[0097] It can be understood that after performing the memory cleaning operation, the original traversal operation on the second slice list has stopped. At this time, based on the sliding direction corresponding to the preview operation again, at least one slice to be traversed and its corresponding traversal order are determined in the second slice list.

[0098] In some examples, after the user starts a preview operation on the document, the preview operation can be continuously monitored to obtain the corresponding preview position information and sliding direction information. Based on the sliding direction corresponding to the preview operation, at least one slice to be traversed in the second slice list and the corresponding traversal order can be determined.

[0099] For example, if the second slice list includes 1 to 200 slices, and after rendering the 50th slice, the memory occupied by the 1st slice is cleared by a memory cleaning operation before rendering the 51st slice. At this time, if it is detected that the user swipes down, it can be determined that the slices to be traversed at this time are the 51st to 200th slices, and their traversal order matches the current sliding direction, that is, from top to bottom, which can be 51, 52,..., 200 (consistent with the original preset preview order). Further, if continuing to traverse down until the 120th slice, since at most 50 slices can be saved, the currently rendered ones are 71 - 120 at this time. At this time, if the user starts to swipe up, by monitoring this preview operation, the corresponding preview position information and sliding direction information can be continuously obtained. If the user continuously swipes up, when swiping to the corresponding preview position, it can be determined that the slices to be traversed at this time are the 1st to 70th slices, and their traversal order matches the current sliding direction, that is, from bottom to top, which can be 70, 69, 68,..., 1.

[0100] Thus, in some embodiments, the traversal order is further determined based on a corresponding preset preview order (second preset preview order). For example, the corresponding preset preview order (second preset preview order) may be the original preset preview order of the slices in the second slice list (i.e., the first preset preview order). Thus, traversal can be performed in an order opposite to or the same as the first preset preview order according to an upward or downward slide.

[0101] In some embodiments, the second preset preview order may be determined based on the current reading order of the document. Referring to what is described above regarding the first preset preview order, it will not be elaborated here. By way of example, when sliding downwards, the current reading order of the document is similar to the reading order described above; when sliding upwards, the document can be viewed in sequence from bottom to top and then from top to bottom.

[0102] According to some embodiments, the method according to the present disclosure may further include: determining a current first index and a second index, where the first index is used to indicate the first slice rendered to the display page in the preset preview order, and the second index is used to indicate the last slice rendered to the display page in the preset preview order.

[0103] Thus, according to some embodiments, traversing at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice may include: in response to determining that the sliding direction is an upward slide, performing a memory cleaning operation on the last slice indicated by the current second index, and adjusting the second index so that it is used to indicate the new last slice; performing the first operation on the currently traversed slice, and adjusting the first index so that it is used to indicate the new first slice.

[0104] According to some embodiments, traversing at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice may include: in response to determining that the sliding direction is a downward slide, performing a second operation, where the second operation includes: performing a memory cleaning operation on the first slice indicated by the current first index, and adjusting the first index so that it is used to indicate the new first slice; performing the first operation on the currently traversed slice, and adjusting the second index so that it is used to indicate the new last slice.

[0105] That is to say, the range of slices currently rendered on the display page can be recorded by setting the first index and the second index.

[0106] In some examples, the first index and the second index can be set for the elements in the resList. For example, in response to triggering a memory cleaning operation, the variables startIndex and endIndex are used to record the slice range that has been currently rendered on the display page in the resList respectively. For example, in response to triggering a memory cleaning operation, startIndex and endIndex are set, and the initial value of endIndex is set to the slice to be currently rendered, while the initial value of startIndex is set to: the value of endIndex minus the second preset value.

[0107] In the above embodiment, by setting the first index and the second index, it is convenient to determine the slices to be traversed based on the user preview operation subsequently, and to implement the memory cleaning operation in a timely manner to achieve a better loading experience.

[0108] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the sliding direction is downward sliding, for the slice indicated by the current second index, determining whether the slice is currently outside the lower boundary of the viewport of the displayed page and the distance between the slice and the lower boundary is greater than a first preset value, where the outside of the lower boundary of the viewport is the area outside the viewport; in response to determining that the slice is not currently outside the lower boundary of the viewport, or determining that the slice is currently outside the lower boundary of the viewport but the distance between the slice and the lower boundary of the viewport is not greater than the first preset value, continue to traverse the at least one slice to be traversed.

[0109] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the slice is currently outside the lower boundary of the viewport and the distance between the slice and the lower boundary of the viewport is greater than the first preset value, pause traversing the at least one slice to be traversed.

[0110] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the slice is currently outside the lower boundary of the viewport and the distance between the slice and the lower boundary of the viewport is greater than the first preset value, and determining that the slice is the last slice in its slice row, pause traversing the at least one slice to be traversed; in response to determining that the slice is currently outside the lower boundary of the viewport and the distance between the slice and the lower boundary of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row, continue to traverse the at least one slice to be traversed.

[0111] Here, similar to the above reference Figures 5-6 As described, by setting a first preset value, the preloading of the slice corresponding to the current preview position is ensured, which will not be elaborated here.

[0112] In some examples, based on the set first index (startIndex) and second index (endIndex), the rendering of the slice to be rendered and the memory cleaning of the slice to be cleared are implemented. When it is detected that the user swipes down and it is detected that the next slice needs to be rendered, if there is a slice at "endIndex + 1", then according to the position information (e.g., URL) of this slice, recreate a label and render it to the display page. Synchronously release the reference of the current startIndex and update it to: startIndex++, endIndex++.

[0113] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the sliding direction is upward sliding, for the slice indicated by the current first index, determining whether the slice is currently outside the upper boundary of the viewport of the display page and the distance between the slice and the upper boundary is greater than a first preset value, where the outside of the upper boundary of the viewport is the area outside the viewport; in response to determining that the slice is not currently outside the upper boundary of the viewport, or determining that the slice is currently outside the upper boundary of the viewport but the distance between the slice and the upper boundary of the viewport is not greater than the first preset value, continue to traverse the at least one slice to be traversed.

[0114] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the slice is currently outside the upper boundary of the viewport and the distance between the slice and the upper boundary of the viewport is greater than the first preset value, pause traversing the at least one slice to be traversed.

[0115] According to some embodiments, traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: in response to determining that the slice is currently outside the upper boundary of the viewport and the distance between the slice and the upper boundary of the viewport is greater than the first preset value, and determining that the slice is the last slice in its slice row, pause traversing the at least one slice to be traversed; in response to determining that the slice is currently outside the upper boundary of the viewport and the distance between the slice and the upper boundary of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row, continue to traverse the at least one slice to be traversed.

[0116] Figure 7 Shows a schematic diagram of a display page for implementing document preview according to an embodiment of the present disclosure. Similar to that described in the reference Figures 5-6 mentioned, during the upward sliding as shown in Figure 7 shown, by setting a first preset value, the preloading of the slices corresponding to the upper part of the viewport at the current preview position is ensured. Thus, it not only ensures that the slices corresponding to the current preview position displayed in the viewport can be loaded, improving the preview experience, but also avoids excessive loading of slices at positions that the user may not need to preview, saving computing resources.

[0117] In some examples, based on the set first index (startIndex) and second index (endIndex), the rendering of the slices to be rendered and the memory cleaning of the slices to be cleared are implemented. When it is detected that the user slides upward and it is detected that the previous slice needs to be rendered, if there is a "startIndex - 1" slice, then according to the position information (e.g., URL) of this slice, recreate a label and render it into the display page. Synchronously release the reference of the current endIndex, and update it to: startIndex--, endIndex--.

[0118] According to some embodiments, the method according to the present disclosure further includes: in response to a download request for the to-be-processed document, determining the device type of the device for generating the download request; and obtaining the source data of the to-be-processed document whose file type matches the device type, wherein the source data is used to be downloaded to the device that generates the download request.

[0119] In some examples, for different download scenarios, the document is stored as source data in multiple formats to adapt to the download requirements of different devices. Exemplarily, for a PDF file, the original PDF file is retained for downloading on Android devices; the original PDF file is compressed into a Zip archive for downloading on IOS devices.

[0120] In some examples, when implementing the above method through the JavaScript language, the device type of the user device can be identified through the navigator.userAgent method. Its data format can be as follows:

[0121] if( / iPhone|iPad|iPod / i.test(navigator.userAgent)){ / / IOS

[0122] }else if( / Android / i.test(navigator.userAgent)){ / / Android

[0123] }

[0124] Through the embodiments of the present disclosure, problems such as slow loading and space limitation in existing document preview can be effectively solved arbitrarily, and the download requirements of different devices can be adapted, improving the user experience during online preview and download by users.

[0125] According to an embodiment of the present disclosure, as Figure 8 shown, an online document processing apparatus 800 is further provided, including: an obtaining unit 810 configured to obtain a first slice list corresponding to each of one or more pages in the document in response to a preview operation on the document, where the first slice list includes a plurality of slices obtained by performing a picture cutting operation on the corresponding page; a traversing unit 820 configured to sequentially traverse the slices in a second slice list to perform a first operation on the currently traversed slice, where the second slice list includes the slices in all the first slice lists corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order. The first operation includes: determining the page corresponding to the currently traversed slice as a target page; obtaining a first list corresponding to the target page and a drawable canvas; drawing the currently traversed slice at a corresponding position on the canvas according to the position information of the currently traversed slice in the target page; determining the picture data corresponding to the current canvas and storing the picture data in the first list; and obtaining the picture data finally stored in the first list to render the currently traversed slice onto a display page for previewing the document based on the picture data.

[0126] Here, the operations of the above respective units 810-820 of the online document processing apparatus 800 are respectively similar to the operations of steps 210-220 described above, and will not be elaborated herein.

[0127] In the technical solution of the present disclosure, the collection, storage, use, processing, transmission, provision, and disclosure of user personal information involved all comply with the provisions of relevant laws and regulations and do not violate public order and good customs.

[0128] According to an embodiment of the present disclosure, an electronic device, a readable storage medium, and a computer program product are further provided.

[0129] Refer to Figure 9, a block diagram of an electronic device 900 that can be a server or a client of the present disclosure will now be described. It is an example of a hardware device that can be applied to various aspects of the present disclosure. The electronic device is intended to represent various forms of digital electronic computer devices, such as, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, personal digital processors, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0130] As Figure 9 shown, the electronic device 900 includes a computing unit 901, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 902 or a computer program loaded from a storage unit 908 into a random access memory (RAM) 903. In the RAM 903, various programs and data required for the operation of the electronic device 900 can also be stored. The computing unit 901, the ROM 902, and the RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0131] Multiple components in the electronic device 900 are connected to the I / O interface 905, including: an input unit 906, an output unit 907, a storage unit 908, and a communication unit 909. The input unit 906 can be any type of device that can input information into the electronic device 900. The input unit 906 can receive input digital or character information, and generate key signal inputs related to the user settings and / or function controls of the electronic device, and can include, but are not limited to, a mouse, a keyboard, a touch screen, a trackpad, a trackball, a joystick, a microphone, and / or a remote control. The output unit 907 can be any type of device that can present information, and can include, but are not limited to, a display, a speaker, a video / audio output terminal, a vibrator, and / or a printer. The storage unit 908 can include, but are not limited to, magnetic disks, optical disks. The communication unit 909 allows the electronic device 900 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks, and can include, but are not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and / or a chipset, such as a Bluetooth device, an 802.11 device, a WiFi device, a WiMax device, a cellular communication device, and / or the like.

[0132] The computing unit 901 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 901 executes the various methods and processes described above, such as method 200. For example, in some embodiments, method 200 can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 908. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 900 via the ROM 902 and / or the communication unit 909. When the computer program is loaded into the RAM 903 and executed by the computing unit 901, one or more steps of the method 200 described above can be executed. Alternatively, in other embodiments, the computing unit 901 can be configured to execute method 200 in any other suitable manner (e.g., by means of firmware).

[0133] Various embodiments of the systems and techniques described above in this document can be implemented in digital electronic circuitry, integrated circuit systems, field-programmable gate arrays (FPGA), application-specific integrated circuits (ASIC), application-specific standard products (ASSP), systems-on-a-chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special-purpose or general-purpose programmable processor that receives data and instructions from a storage system, at least one input device, and at least one output device, and transmits the data and instructions to the storage system, the at least one input device, and the at least one output device.

[0134] The program code for implementing the methods of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to the processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when the program codes are executed by the processor or controller, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The program codes can be executed entirely on the machine, partially on the machine, as an independent software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0135] In the context of this disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0136] In order to provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, speech input, or tactile input).

[0137] The systems and techniques described herein can be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected to each other by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), the Internet, and a blockchain network.

[0138] A computer system may include a client and a server. The client and the server are generally far away from each other and usually interact through a communication network. The relationship between the client and the server is generated by computer programs running on the respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server incorporating a blockchain.

[0139] It should be understood that various forms of the processes shown above can be used, steps can be reordered, added or deleted. For example, the steps described in this disclosure can be executed in parallel, sequentially or in a different order, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this is not limited herein.

[0140] Although embodiments or examples of the present disclosure have been described with reference to the accompanying drawings, it should be understood that the above methods, systems and devices are merely exemplary embodiments or examples, and the scope of the present invention is not limited by these embodiments or examples, but is only defined by the authorized claims and their equivalent scope. Various elements in the embodiments or examples can be omitted or replaced by their equivalent elements. In addition, the steps can be executed in an order different from that described in the present disclosure. Further, the various elements in the embodiments or examples can be combined in various ways. Importantly, with the evolution of technology, many of the elements described herein can be replaced by equivalent elements that emerge after the present disclosure.

Claims

1. An online document processing method, comprising: In response to a preview operation on the document, obtaining a first slice list corresponding to one or more pages in the document, wherein the first slice list includes a plurality of slices obtained by performing an image cutting operation on the corresponding page; The slices in the second slice list are traversed in sequence to perform a first operation on the currently traversed slice, wherein the second slice list includes all slices in the first slice list corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order, wherein the first operation includes: Determine the page corresponding to the currently traversed slice as the target page; Obtaining a first list and a drawable canvas corresponding to the target page; According to the position information of the currently traversed slice in the target page, drawing the currently traversed slice at a corresponding position in the canvas; Determine the image data corresponding to the current canvas, and store the image data in the first list; and The last image data stored in the first list is obtained, so as to render the currently traversed slice into a display page for previewing the document based on the image data.

2. The method of claim 1, wherein: Sequentially traversing the slices in the second slice list includes: For a slice that was last rendered to the display page, determining whether the slice is currently outside a lower boundary of a viewport of the display page and whether a distance between the slice and the lower boundary is greater than a first preset value, wherein the outer side of the lower boundary of the viewport is an area outside the viewport; In response to determining that the slice is not currently outside the lower border of the viewport, or determining that the slice is currently outside the lower border of the viewport but the distance from the lower border of the viewport is not greater than the first preset value, continue to traverse the slices in the second slice list to perform the first operation.

3. The method of claim 2, wherein: Traversing the slices in the second slice list in sequence also includes: In response to determining that the slice is currently outside the lower border of the viewport and the distance from the lower border of the viewport is greater than the first preset value, traversing the slices in the second slice list is paused.

4. The method of claim 2, wherein: Traversing the slices in the second slice list in turn includes: In response to determining that the slice is currently outside the lower border of the viewport and the distance from the lower border of the viewport is greater than the first preset value, and determining that the slice is the last slice in its slice row after being rendered to the display page, pausing traversal of the slices in the second slice list; In response to determining that the slice is currently outside the lower border of the viewport and the distance from the lower border of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row after being rendered to the display page, continue to traverse the slices in the second slice list to perform the first operation.

5. The method of claim 1, further comprising: Determining whether the memory occupied by all the slices in the second slice list that have been rendered to the display page exceeds a preset memory limit; as well as In response to determining that the preset memory limit is exceeded, a memory cleanup operation is performed on one or more slices rendered into the display page based on the preview operation.

6. The method of claim 5, wherein: Determine whether the memory occupied by all slices rendered to the display page exceeds a preset memory limit based on the following operations: Determine a second preset value, wherein the second preset value is a positive integer, and the memory occupied by the slices of the second preset value does not exceed the preset memory limit; and In response to determining that the number of all slices rendered into the display page is greater than the second preset value, it is determined that the memory occupied by all slices rendered into the display page exceeds the preset memory limit.

7. The method according to claim 5 or 6, wherein: The slices in the second slice list are traversed in sequence to perform the first operation on the currently traversed slice, including: After performing the memory cleanup operation, in response to the preview operation, determining at least one slice to be traversed in the second slice list and a corresponding traversal order based on a sliding direction corresponding to the preview operation, wherein the traversal order matches the sliding direction; The at least one slice to be traversed is traversed in sequence based on the traversal order, so as to perform the first operation on the currently traversed slice.

8. The method of claim 7, further comprising: Determine a current first index and a second index, wherein the first index is used to indicate a first slice currently rendered to the display page and arranged in the preset preview order, and the second index is used to indicate a last slice currently rendered to the display page and arranged in the preset preview order, The step of sequentially traversing the at least one slice to be traversed based on the traversal order to perform the first operation on the currently traversed slice includes: In response to determining that the sliding direction is an upward sliding, performing a memory cleanup operation on the last slice currently indicated by the second index, and adjusting the second index to be used to indicate a new last slice; The first operation is performed on the currently traversed slice, and the first index is adjusted to indicate the new first slice.

9. The method of claim 7, further comprising: In response to determining that the memory cleanup operation has been performed, determining a current first index and a second index, wherein the first index is used to indicate a first slice that is currently rendered to the display page and arranged in the preset preview order, and the second index is used to indicate a last slice that is currently rendered to the display page and arranged in the preset preview order, The step of traversing the at least one slice to be traversed in sequence based on the traversal order to perform the first operation on the currently traversed slice includes: In response to determining that the sliding direction is sliding downward, performing a second operation, wherein the second operation includes: Performing a memory cleanup operation on the first slice currently indicated by the first index, and adjusting the first index to indicate a new first slice; The first operation is performed on the currently traversed slice, and the second index is adjusted to indicate the new last slice.

10. The method of claim 9, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the sliding direction is sliding downward, for the slice currently indicated by the second index, determining whether the slice is currently outside the lower boundary of the viewport of the display page and the distance between the slice and the lower boundary is greater than a first preset value, wherein the outer side of the lower boundary of the viewport is an area outside the viewport; In response to determining that the slice is not currently outside the lower border of the viewport, or determining that the slice is currently outside the lower border of the viewport but the distance from the lower border of the viewport is not greater than the first preset value, continue to traverse the at least one slice to be traversed.

11. The method of claim 10, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the slice is currently outside the lower boundary of the viewport and the distance from the lower boundary of the viewport is greater than the first preset value, traversing the at least one slice to be traversed is suspended.

12. The method of claim 10, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the slice is currently outside the lower boundary of the viewport and the distance from the lower boundary of the viewport is greater than the first preset value, and determining that the slice is the last slice in the slice row, pausing the traversal of the at least one slice to be traversed; In response to determining that the slice is currently outside the lower border of the viewport and the distance from the lower border of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row, continue to traverse the at least one slice to be traversed.

13. The method of claim 8, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the sliding direction is an upward sliding, for the slice currently indicated by the first index, determining whether the slice is currently outside the upper boundary of the viewport of the display page and the distance between the slice and the upper boundary is greater than a first preset value, wherein the outer side of the upper boundary of the viewport is an area outside the viewport; In response to determining that the slice is not currently outside the upper boundary of the viewport, or determining that the slice is currently outside the upper boundary of the viewport but the distance from the upper boundary of the viewport is not greater than the first preset value, continue to traverse the at least one slice to be traversed.

14. The method of claim 13, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the slice is currently outside the upper boundary of the viewport and the distance from the upper boundary of the viewport is greater than the first preset value, traversing the at least one slice to be traversed is suspended.

15. The method of claim 13, wherein: The at least one slice to be traversed is traversed sequentially based on the traversal order to perform the first operation on the currently traversed slice, including: In response to determining that the slice is currently outside the upper boundary of the viewport and the distance from the upper boundary of the viewport is greater than the first preset value, and determining that the slice is the last slice in the slice row, pausing the traversal of the at least one slice to be traversed; In response to determining that the slice is currently outside the upper boundary of the viewport and the distance from the upper boundary of the viewport is greater than the first preset value, and determining that the slice is not the last slice in its slice row, continue to traverse the at least one slice to be traversed.

16. The method of claim 1, further comprising: Obtaining first size information of the target page and second size information of the canvas; Determine the third size information of the currently traversed slice; as well as determining a scaling ratio based on the first size information and the second size information, And wherein, according to the position information of the currently traversed slice in the corresponding page, drawing the slice at the corresponding position in the canvas includes: drawing the slice at the corresponding position of the canvas according to the third size information, the scaling ratio and the position information of the slice in the corresponding page.

17. The method of claim 1, further comprising: In response to a download request for the document, determining a device type of a device used to generate the download request; as well as The source data of the document to be processed whose file type matches the device type is obtained, wherein the source data is used to be downloaded to the device that generates the download request.

18. An online document processing device, comprising: an acquisition unit, configured to acquire, in response to a preview operation on the document, a first slice list corresponding to each of one or more pages in the document, wherein the first slice list includes a plurality of slices obtained by performing an image segmentation operation on the corresponding page; The traversal unit is configured to traverse the slices in the second slice list in sequence to perform a first operation on the currently traversed slice, wherein the second slice list includes all slices in the first slice list corresponding to the one or more pages, and the slices in the second slice list are arranged in a preset preview order, wherein the first operation includes: Determine the page corresponding to the currently traversed slice as the target page; Obtaining a first list and a drawable canvas corresponding to the target page; According to the position information of the currently traversed slice in the target page, drawing the currently traversed slice at a corresponding position in the canvas; Determine the image data corresponding to the current canvas, and store the image data in the first list; and The last image data stored in the first list is obtained, so as to render the currently traversed slice into a display page for previewing the document based on the image data.

19. An electronic device comprising: at least one processor; as well as a memory communicatively coupled to the at least one processor; in The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 17.

20. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-17.

21. A computer program product comprising a computer program, wherein: When the computer program is executed by a processor, the method according to any one of claims 1 to 17 is implemented.

Images