CSS Web Page Animation Compression Method, System, Device and Storage Medium

Abstract

The present invention provides a CSS web page animation compression method, system, device and storage medium. The method includes: performing video recognition on a first animation medium, and sequentially dividing the first animation medium into a plurality of video segments based on frame similarity, each segment containing a plurality of video frames; obtaining a standard video frame from each video segment, where the average value of the image similarity between the standard video frame and other video frames in the video segment is the highest; comparing the standard video frame with other video frames in the same video segment respectively to obtain a static region, a plurality of dynamic regions and image restoration information of the video segment; generating a media file jointly based on the static regions, the plurality of dynamic regions and the image restoration information of the video segments corresponding to all the video segments of the first animation medium, and the capacity of the media file is smaller than that of the first animation medium. The present invention can reduce the capacity of web page animations, save mobile traffic, speed up page refresh speed and improve user experience.

Description

Background Art

[0002] JavaScript (abbreviation "JS") is a lightweight, interpreted or just-in-time compiled programming language with function priority. Although it is well-known as a scripting language for developing web pages, it is also used in many non-browser environments. JavaScript is a prototype-based, multi-paradigm dynamic scripting language that supports object-oriented, imperative, declarative, and functional programming paradigms.

[0003] Current websites use JavaScript to generate embedded dynamic text in HTML pages to play high-definition animated backgrounds. However, due to the large traffic of the high-definition animated backgrounds themselves, when used on mobile devices, it will greatly increase the consumption of user traffic.

[0004] Therefore, the present invention provides a CSS web page animation compression method, system, device, and storage medium. Summary of the Invention

[0005] Aiming at the problems in the prior art, the purpose of the present invention is to provide a CSS web page animation compression method, system, device, and storage medium, which overcomes the difficulties of the prior art, can reduce the capacity of web page animations, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience.

[0006] An embodiment of the present invention provides a CSS web page animation compression method, including the following steps:

[0007] Perform video recognition on the first animation media, and based on the frame similarity, sequentially divide the first animation media into several video segments, each segment containing several video frames;

[0008] Obtain a standard video frame from each of the video segments, where the average value of the image similarity between the standard video frame and other video frames in the video segment is the highest;

[0009] Compare the standard video frame with other video frames in the same video segment respectively to obtain a static region, several dynamic regions, and the image restoration information of the video segment;

[0010] Based on the static regions, several dynamic regions, and the image restoration information of the video segments corresponding to all the video segments of the first animation media, jointly generate a media file, and the capacity of the media file is smaller than the capacity of the first animation media.

[0011] Preferably, the performing video recognition on the first animation media and sequentially dividing the first animation media into several video segments based on the frame similarity, each segment containing several video frames, includes:

[0012] The first animation medium is segmented into a plurality of video sub - paragraphs according to a preset number of video frames, and each video frame in the video sub - paragraphs retains the time stamp based on the playing time sequence of the first animation medium;

[0013] Determine whether the image similarity between the obtained video sub - paragraph and the adjacent video sub - paragraph in the subsequent time sequence is greater than a preset threshold;

[0014] If so, add the video sub - paragraph and the adjacent video sub - paragraph to the same video paragraph;

[0015] If not, end.

[0016] Preferably, the determination of whether the image similarity between the obtained video sub - paragraph and the adjacent video sub - paragraph in the subsequent time sequence is greater than a preset threshold includes

[0017] Obtain the image similarity between at least one tail frame of the video sub - paragraph and at least one tail frame of the adjacent video sub - paragraph in the subsequent time sequence, and determine whether the image similarity is greater than a preset threshold.

[0018] Preferably, obtaining a standard video frame from each of the video paragraphs, where the average value of the image similarity between the standard video frame and other video frames in the video paragraph is the highest, includes:

[0019] Obtain the image similarity between each video frame in the video paragraph and other video frames in the video paragraph;

[0020] Statistically calculate the average value of the image similarity between each video frame and other video frames;

[0021] Take the video frame with the highest average value as the standard video frame.

[0022] Preferably, when the standard video frame is respectively compared with other video frames in the same video paragraph to obtain a static area, a plurality of dynamic areas, and the image restoration information of the video paragraph, it includes:

[0023] The image restoration information records the planar relationship between each dynamic area and the static area and the time sequence relationship of the dynamic areas.

[0024] Preferably, the time sequence relationship is the time stamp of the video frame corresponding to the dynamic area in the first animation medium.

[0025] Preferably, the static area is a local image area that remains unchanged throughout the video paragraph.

[0026] Preferably, the dynamic area is the area other than the static area in the picture of each video frame in each video paragraph.

[0027] Preferably, a media file is jointly generated based on the static regions, several dynamic regions, and the image restoration information of the video segments corresponding to all the video segments of the first animation media. The capacity of the media file is smaller than that of the first animation media. After that, it further includes:

[0028] Based on the image restoration information of the video segment, the static region is multiplexed and combined with different dynamic regions respectively to generate the video frame, and a second animation media is generated according to the video frame.

[0029] An embodiment of the present invention further provides a CSS web page animation compression system for implementing the above CSS web page animation compression method. The CSS web page animation compression system includes:

[0030] A video segment module that performs video recognition on the first animation media and divides the first animation media into several video segments in sequence based on the frame similarity. Each segment contains several video frames.

[0031] A standard video frame module that obtains a standard video frame from each of the video segments, and the average value of the image similarity between the standard video frame and other video frames in the video segment is the highest.

[0032] A restoration information module that performs image comparison between the standard video frame and other video frames in the same video segment respectively to obtain a static region, several dynamic regions, and the image restoration information of the video segment.

[0033] A media file module that jointly generates a media file based on the static regions, several dynamic regions, and the image restoration information of all the video segments corresponding to the first animation media. The capacity of the media file is smaller than that of the first animation media.

[0034] An embodiment of the present invention further provides a CSS web page animation compression device, including:

[0035] A processor;

[0036] A memory, in which executable instructions of the processor are stored;

[0037] Wherein, the processor is configured to execute the steps of the above CSS web page animation compression method by executing the executable instructions.

[0038] An embodiment of the present invention further provides a computer-readable storage medium for storing a program, and when the program is executed, the steps of the above CSS web page animation compression method are implemented.

[0039] The purpose of the present invention is to provide a CSS web page animation compression method, system, device and storage medium, which can reduce the capacity of web page animations, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience. Description of the Drawings

[0040] By reading the detailed description of the non-restrictive embodiments with reference to the following drawings, other features, purposes and advantages of the present invention will become more obvious.

[0041] Figure 1 It is a flowchart of the CSS web page animation compression method of the present invention.

[0042] Figures 2 to 6 It is a schematic diagram of the process steps of the CSS web page animation compression method of the present invention.

[0043] Figure 7 It is a schematic diagram of the modules of the CSS web page animation compression system of the present invention.

[0044] Figure 8 It is a schematic diagram of the structure of the CSS web page animation compression device of the present invention.

[0045] Figure 9 It is a schematic diagram of the structure of the computer-readable storage medium according to an embodiment of the present invention. Detailed Embodiments

[0046] The following uses specific specific examples to illustrate the implementation manners of the present application. Those skilled in the art can easily understand other advantages and effects of the present application from the content disclosed in the present application. The present application can also be implemented or applied through other different specific implementation manners. Various details in the present application can also be modified or changed according to different viewpoints and application systems without departing from the spirit of the present application. It should be noted that, without conflict, the embodiments and features in the embodiments of the present application can be combined with each other.

[0047] The following takes the drawings as a reference and details the embodiments of the present application so that those skilled in the technical field to which the present application belongs can easily implement it. The present application can be embodied in many different forms and is not limited to the embodiments described herein.

[0048] In the description of the present application, the descriptions referring to terms such as "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. mean that the specific features, structures, materials or characteristics represented in connection with the embodiment or example are included in at least one embodiment or example of the present application. Moreover, the specific features, structures, materials or characteristics represented can be combined in a suitable manner in any one or more embodiments or examples. In addition, without contradiction, those skilled in the art can combine and combine the different embodiments or examples represented in the present application and the features of different embodiments or examples.

[0049] In addition, the terms "first" and "second" are only used for indicating purposes and cannot be construed as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" can explicitly or implicitly include at least one of such features. In the description of the present application, the meaning of "a plurality of" is two or more, unless otherwise specifically defined.

[0050] To clearly illustrate the present application, devices irrelevant to the description are omitted, and the same or similar components throughout the specification are given the same reference numerals.

[0051] Throughout the specification, when it is said that a certain device is "connected" to another device, this includes not only the case of "direct connection", but also the case of "indirect connection" with other elements placed therebetween. In addition, when it is said that a certain device "includes" a certain component, unless there is a particularly contrary record, it does not exclude other components, but means that other components can also be included.

[0052] When it is said that a certain device is "above" another device, this can be directly above the other device, but there can also be other devices therebetween. When it is said that a certain device is "directly" "above" another device, there are no other devices therebetween.

[0053] Although in some instances the terms first, second, etc. are used herein to denote various elements, these elements should not be limited by these terms. These terms are only used to distinguish one element from another. For example, a first interface and a second interface, etc. are indicated. Further, as used herein, the singular forms "a", "an" and "the" are also intended to include the plural forms unless the context clearly dictates otherwise. It should be further understood that the terms "comprising", "including" indicate the presence of the features, steps, operations, elements, components, items, kinds, and / or groups, but do not preclude the presence, occurrence or addition of one or more other features, steps, operations, elements, components, items, kinds, and / or groups. The terms "or" and "and / or" used herein are to be construed as inclusive, or meaning any one or any combination. Thus, "A, B or C" or "A, B and / or C" means "any of the following: A; B; C; A and B; A and C; B and C; A, B and C". The exception to this definition only occurs when the combination of elements, functions, steps or operations are mutually exclusive in some way.

[0054] The technical terms used herein are only used to refer to specific embodiments and are not intended to limit the present application. The singular forms used herein also include the plural forms as long as the statements do not clearly indicate the contrary meaning. The meaning of "including" used in the specification is to embody specific characteristics, regions, integers, steps, operations, elements and / or components, and does not exclude the existence or addition of other characteristics, regions, integers, steps, operations, elements and / or components.

[0055] Although not defined differently, including the technical terms and scientific terms used herein, all terms have the same meaning as generally understood by those skilled in the technical field to which the present application pertains. Terms defined in commonly used dictionaries are additionally interpreted to have meanings consistent with the relevant technical literature and the content currently presented. As long as they are not defined, they should not be over-interpreted as ideal or overly formulaic meanings.

[0056] Figure 1 is a flowchart of the CSS web page animation compression method of the present invention. As Figure 1 shown, an embodiment of the present invention provides a CSS web page animation compression method, including the following steps:

[0057] S110. Perform video recognition on a first animation medium, and sequentially divide the first animation medium into a plurality of video segments based on frame similarity, and each segment includes a plurality of video frames;

[0058] S120. Obtain a standard video frame from each video segment, and the average value of the image similarity between the standard video frame and other video frames in the video segment is the highest;

[0059] S130. Compare the standard video frame with other video frames in the same video segment respectively to obtain a static area, several dynamic areas and the image restoration information of the video segment;

[0060] S140. Based on the static areas, several dynamic areas and the image restoration information of the video segments corresponding to all the video segments of the first animation media, generate a media file jointly. The capacity of the media file is smaller than that of the first animation media. The media file can be in the HTML web page format, but is not limited thereto.

[0061] S150. Reuse the static area according to the image restoration information of the video segment and combine it with different dynamic areas respectively to generate video frames, and generate a second animation media according to the video frames.

[0062] In a preferred embodiment, step S110 includes:

[0063] Divide the first animation media into several video sub-segments according to the preset number of video frames. Each video frame in the video sub-segment retains the timestamp of the video frame based on the playing time sequence of the first animation media;

[0064] Judge whether the image similarity between the obtained video sub-segment and the adjacent video sub-segment in the subsequent time sequence is greater than a preset threshold,

[0065] If so, add the video sub-segment and the adjacent video sub-segment to the same video segment;

[0066] If not, end.

[0067] Preferably, judging whether the image similarity between the obtained video sub-segment and the adjacent video sub-segment in the subsequent time sequence is greater than a preset threshold includes

[0068] Obtain the image similarity between at least one tail frame of the video sub-segment and at least one tail frame of the adjacent video sub-segment in the subsequent time sequence, and judge whether the image similarity is greater than a preset threshold.

[0069] In a preferred embodiment, step S120 includes:

[0070] Obtain the image similarity between each video frame in the video segment and other video frames in the video segment;

[0071] Statistically calculate the average value of the image similarity between each video frame and other video frames;

[0072] Take the video frame with the highest average value as the standard video frame.

[0073] In a preferred embodiment, in step S130, the image restoration information records the planar relationship between each dynamic area and the static area and the time sequence relationship of the dynamic area.

[0074] In a preferred embodiment, the timing relationship is the timestamp of the video frame corresponding to the dynamic region in the first animation medium.

[0075] In a preferred embodiment, the static region is a local image region that remains unchanged throughout the video segment.

[0076] In a preferred embodiment, the dynamic region is the other region in the picture of each video frame in each video segment except for the static region.

[0077] The Cascading Style Sheets (CSS) in the present invention is a computer language used to represent the styles of files such as HTML (an application of the Standard Generalized Markup Language) or XML (a subset of the Standard Generalized Markup Language). CSS can not only statically decorate web pages, but also dynamically format various elements of web pages in conjunction with various scripting languages. CSS can precisely control the layout of element positions on web pages at the pixel level, support almost all font sizes and styles, and has the ability to edit web page objects and model styles. CSS is a language that defines style structures such as fonts, colors, positions, etc., and is used to describe the way of formatting and displaying information on web pages. CSS styles can be directly stored in HTML web pages or in separate style sheet files. In either case, the style sheet contains rules for applying styles to specified types of elements. When used externally, the style sheet rules are placed in an external style sheet document with the file extension _css.

[0078] Figures 2 to 6 It is a schematic diagram of the flow steps of the CSS web page animation compression method of the present invention. As shown in Figures 2 to 6 The specific implementation manners of the present invention are as follows:

[0079] Refer to Figure 2 , the first animation medium is segmented into several video sub - segments according to a preset number of video frames, and each video frame in the video sub - segment retains the timestamp of the video frame based on the playback timing of the first animation medium; obtain the image similarity between at least one tail frame of the video sub - segment and at least one tail frame of the adjacent video sub - segment with sequential timing backward, and determine whether the image similarity is greater than a preset threshold. If so, add the video sub - segment and the adjacent video sub - segment to the same video segment. In this embodiment, the first animation medium is segmented into multiple video segments P1, P2,... etc. through the above steps. Among them, video segment P1 includes video frames T1, T2, T3, T4, T5, T6. In this embodiment, the image similarity calculation method of the prior art is adopted, but it is not limited thereto.

[0080] Obtain the image similarity between each video frame in video segment P1 and other video frames in the video segment. For example: calculate the similarity between video frame T1 and video frames T2, T3, T4, T5, T6 respectively, and so on. Then, count the average value of the image similarity between each video frame and other video frames. The video frame with the highest average value is used as the standard video frame. In this embodiment, the average value of the image similarity between video frame T1 and other video frames is the highest, so video frame T1 is used as the standard video frame. In this embodiment, the existing technology for calculating image similarity is adopted, but it is not limited thereto.

[0081] Reference Figures 3 to 5 , compare the standard video frame T1 with other video frames (video frames T2, T3, T4, T5, T6) in the same video segment to obtain a static region 10, several dynamic regions (11, 12, 13, etc.) and the image restoration information of the video segment. The image restoration information records the planar relationship between each dynamic region and the static region and the timing relationship of the dynamic regions. The timing relationship is the timestamp of the video frame corresponding to the dynamic region in the first animation media. The static region is a local image region that remains unchanged throughout the video segment. The dynamic region is the other region in the picture of each video frame in each video segment except the static region. Among them, among Figures 4 to 6 Shows the distribution of the static region and dynamic regions of the standard video frame T1, video frame T2, and video frame T3 after image comparison. Obtain the static region S1 and dynamic region W1 from the standard video frame T1, obtain the dynamic region W2 from the video frame T2, obtain the dynamic region W3 from the video frame T3...

[0082] Generate a media file jointly based on the static regions, several dynamic regions, and the image restoration information of the video segment corresponding to all video segments of the first animation media. The capacity of the media file is smaller than that of the first animation media. Taking video segment P1 as an example, only one static region S1 and six dynamic regions W1, W2, W3, W4, W5, W6 need to be stored, and it is no longer necessary to store the full picture of all video frames, greatly saving the capacity.

[0083] Reference Figure 6, Finally, based on the image restoration information of the video segment, the static region can be reused and combined with different dynamic regions respectively to generate video frames, and a second animation medium can be generated according to the video frames. Each frame in the second animation medium is formed by combining the reused static region and the dynamic region. For example: in the video segment corresponding to video segment P1 of the second animation medium, video frame T1 is formed by combining static region S1 and dynamic region W1. Video frame T2 is formed by combining static region S1 and dynamic region W2. Video frame T3 is formed by combining static region S1 and dynamic region W3. Video frame T4 is formed by combining static region S1 and dynamic region W4. Video frame T5 is formed by combining static region S1 and dynamic region W5. Video frame T6 is formed by combining static region S1 and dynamic region W6. Since the static region S1 is reused in multiple video frames of the video segment, the capacity of the second animation medium is smaller than that of the first animation medium, so that the storage space capacity can be saved and the page refresh speed can be optimized.

[0084] The CSS web page animation compression method of the present invention can reduce the capacity of the web page animation, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience.

[0085] The animation in CSS will proceed continuously from start to finish for the specified duration. steps() is part of the animation timing function. It can control the gradual movement of the animation. The best example showing the working principle of steps() would be the second hand of a analog clock. The second hand of the clock does not move continuously but is divided into multiple phases. Therefore, it can be replicated with CSS animation and steps(). Leaving aside the repetitive compatibility code, an animation can be implemented with about 10 lines of code.

[0086] The technical solution of the present invention uses the animation:steps() function. steps() is a timing function that allows an animation or transition to be segmented rather than transitioning continuously from one state to another. This function has two parameters - the first parameter is a positive value that specifies the number of segments into which the animation is desired to be divided. The present invention uses animation in css3 to replace JavaScript. Generally, it is very difficult to achieve this effect with css and js except by using canvas, but using canvas definitely requires a large amount of code to implement and it can't be completed in less than half a day.

[0087] The following is the code for this animation:

[0088]

[0089]

[0090] step-start is equivalent to steps(1, start). The animation is divided into 1 step. When the animation is executed, the part at the starting left endpoint is the start.

[0091] step-end is equivalent to steps(1, end): The animation is divided into one step. When the animation is executed, the ending endpoint is used as the start, and the default value is end.

[0092] CSS animation part:

[0093]

[0094] The position of the sprite image is controlled through background-position. For example, at 0s, the default first action is displayed. Then, after 100ms, the background-position instantaneously changes in the X-axis direction, and the second action is displayed. Then, after another 100ms, the third image is shown. And so on. By taking advantage of the visual persistence of the human eye, an animation effect is formed. Using this as a starting point, more complex animations such as countdowns, character walking and jumping can be created. Therefore, the present invention can dispense with repetitive compatibility code, and an animation can be implemented with about 10 lines of code.

[0095] Figure 7 It is a module schematic diagram of the CSS web page animation compression system of the present invention. As Figure 7 shown, an embodiment of the present invention further provides a CSS web page animation compression system for implementing the above CSS web page animation compression method. The CSS web page animation compression system includes:

[0096] A video segment module 51 that performs video recognition on the first animation medium and divides the first animation medium into several video segments in chronological order based on frame similarity. Each segment contains several video frames;

[0097] A standard video frame module 52 that obtains standard video frames from each video segment. The average value of the image similarity between the standard video frames and other video frames in the video segment is the highest;

[0098] A restoration information module 53 that compares the standard video frames with other video frames in the same video segment respectively to obtain a static area, several dynamic areas, and the image restoration information of the video segment;

[0099] A media file module 54 that jointly generates a media file based on the static areas, several dynamic areas, and the image restoration information of the video segments corresponding to all the video segments of the first animation medium. The capacity of the media file is smaller than the capacity of the first animation medium.

[0100] The video generation module 55 multiplexes the static regions based on the image restoration information of the video segments and combines them with different dynamic regions respectively to generate video frames, and generates a second animated media according to the video frames.

[0101] In a preferred embodiment, the video segment module 51 divides the first animated media into several video sub - segments according to a preset number of video frames, and each video frame in the video sub - segment retains the timestamp based on the playback timing of the first animated media; it determines whether the image similarity between the video sub - segment and the adjacent video sub - segment with a sequentially backward timing is greater than a preset threshold. If so, the video sub - segment and the adjacent video sub - segment are added to the same video segment; if not, it ends.

[0102] In a preferred embodiment, the standard video frame module 52 obtains the image similarity between each video frame in the video segment and other video frames in the video segment; calculates the average value of the image similarities of each video frame with other video frames; and takes the video frame with the highest average value as the standard video frame.

[0103] In a preferred embodiment, the image restoration information in the restoration information module 53 records the planar relationship between each dynamic region and the static region and the timing relationship of the dynamic regions.

[0104] In a preferred embodiment, the timing relationship is the timestamp of the video frame corresponding to the dynamic region in the first animated media.

[0105] In a preferred embodiment, the static region is a local image region that remains unchanged throughout the video segment.

[0106] In a preferred embodiment, the dynamic region is the other region in the picture of each video frame in each video segment except for the static region.

[0107] The CSS web page animation compression system of the present invention can reduce the capacity of web page animations, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience.

[0108] The embodiment of the present invention also provides a CSS web page animation compression device, including a processor and a memory, in which executable instructions of the processor are stored. Among them, the processor is configured to execute the steps of the CSS web page animation compression method by executing the executable instructions.

[0109] As shown above, the CSS web page animation compression system of the present invention can reduce the capacity of web page animations, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience.

[0110] Those skilled in the art can understand that various aspects of the present invention can be implemented as a system, a method, or a program product. Therefore, various aspects of the present invention can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software aspects, which can be collectively referred to as "circuit", "module", or "platform" here.

[0111] Figure 8 is a schematic structural diagram of the CSS web page animation compression device of the present invention. The following will refer to Figure 8 to describe the electronic device 600 according to this embodiment of the present invention. Figure 8 The displayed electronic device 600 is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0112] As Figure 8 shown, the electronic device 600 is presented in the form of a general-purpose computing device. The components of the electronic device 600 may include but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different platform components (including the storage unit 620 and the processing unit 610), a display unit 640, etc.

[0113] Among them, the storage unit stores program code, and the program code can be executed by the processing unit 610, so that the processing unit 610 executes the steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription transfer processing method part of this specification. For example, the processing unit 610 can execute the steps as Figure 1 shown in.

[0114] The storage unit 620 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 6201 and / or a cache storage unit 6202, and may further include a read-only storage unit (ROM) 6203.

[0115] The storage unit 620 may also include a program / utilities 6204 having a set (at least one) of program modules 6205. Such program modules 6205 include but are not limited to: an operating system, one or more application programs, other program modules, and program data. The implementation of a network environment may be included in each or some combination of these examples.

[0116] The bus 630 may represent one or more of several types of bus structures, including a storage unit bus or a storage unit controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any one of multiple bus structures.

[0117] The electronic device 600 may also communicate with one or more external devices 700 (such as a keyboard, a pointing device, a Bluetooth device, etc.), and may also communicate with one or more devices that enable a user to interact with the electronic device 600, and / or communicate with any device (such as a router, a modem, etc.) that enables the electronic device 600 to communicate with one or more other computing devices. Such communication may be performed through the input / output (I / O) interface 650. Moreover, the electronic device 600 may also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through the network adapter 660. The network adapter 660 may communicate with other modules of the electronic device 600 through the bus 630. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, etc.

[0118] An embodiment of the present invention also provides a computer-readable storage medium for storing a program, and the steps of the CSS web page animation compression method are implemented when the program is executed. In some possible implementation manners, various aspects of the present invention may also be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription transfer processing method section of this specification.

[0119] As shown above, the CSS web page animation compression system of the embodiment of the present invention can reduce the capacity of the web page animation, save the mobile traffic of users, speed up the page refresh speed, and improve the user experience.

[0120] Figure 9 is a schematic structural diagram of the computer-readable storage medium of the present invention. Refer to Figure 9 As shown, a program product 800 for implementing the above method according to an embodiment of the present invention is described. It may be a portable compact disc read-only memory (CD-ROM) and includes program code, and may run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto. In this document, the readable storage medium may be any tangible medium that contains or stores a program, and the program may be used by or in combination with an instruction execution system, apparatus, or device.

[0121] The program product may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable 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 disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0122] The computer-readable storage medium may include a data signal propagated in a baseband or as part of a carrier wave, in which the readable program code is carried. Such a propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable storage medium may also be any readable medium other than the readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination of the above.

[0123] The program code for performing the operations of the present invention may be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also including conventional procedural programming languages such as the "C" language or similar programming languages. The program code may be executed entirely on the user's computing device, partially on the user's device, executed as a stand-alone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (for example, by using an Internet service provider to connect through the Internet).

[0124] In summary, the object of the present invention is to provide a CSS web page animation compression method, system, device, and storage medium, which can reduce the capacity of web page animations, save the user's mobile traffic, speed up the page refresh speed, and improve the user experience.

[0125] The above content is a further detailed description of the present invention in combination with specific preferred embodiments. It cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention pertains, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, and all should be regarded as falling within the protection scope of the present invention.

Claims

1. A CSS web page animation compression method, characterized in that, Including the following steps: Performing video recognition on a first animation medium, and sequentially segmenting the first animation medium into a plurality of video segments based on frame similarity, each segment including a plurality of video frames; Obtaining a standard video frame from each of the video segments, the average value of the image similarity between the standard video frame and other video frames in the video segment being the highest; Performing image comparison between the standard video frame and other video frames in the same video segment respectively to obtain a static region, a plurality of dynamic regions, and image restoration information of the video segment, the image restoration information recording the planar relationship between each dynamic region and the static region and the temporal relationship of the dynamic region, the temporal relationship being the timestamp of the video frame corresponding to the dynamic region in the first animation medium, the static region being a local image region that remains unchanged in the video segment, and the dynamic region being the other region in the frame of each video frame in each video segment except the static region; Generating a media file jointly based on the static regions, a plurality of dynamic regions, and the image restoration information of the video segments corresponding to the first animation medium, the capacity of the media file being smaller than the capacity of the first animation medium; Reusing the static region based on the image restoration information of the video segment and respectively combining it with different dynamic regions to generate the video frames, and generating a second animation medium according to the video frames.

2. The CSS web page animation compression method according to claim 1, wherein, The performing video recognition on the first animation medium and sequentially segmenting the first animation medium into a plurality of video segments based on frame similarity, each segment including a plurality of video frames, includes: Segmenting the first animation medium into a plurality of video sub-segments according to a preset number of video frames, and each video frame in the video sub-segment retains the timestamp of the video frame based on the playback sequence of the first animation medium; Judging whether the image similarity between the obtained video sub-segment and the adjacent video sub-segment with sequentially backward time sequence is greater than a preset threshold; If so, adding the video sub-segment and the adjacent video sub-segment to the same video segment; If not, ending.

3. The CSS web page animation compression method according to claim 2, wherein, The judging whether the image similarity between the obtained video sub-segment and the adjacent video sub-segment with sequentially backward time sequence is greater than a preset threshold includes Obtaining the image similarity between at least one tail frame of the video sub-segment and at least one tail frame of the adjacent video sub-segment with sequentially backward time sequence, and judging whether the image similarity is greater than a preset threshold.

4. The CSS web page animation compression method according to claim 1, wherein The obtaining a standard video frame from each of the video segments, the average value of the image similarity between the standard video frame and other video frames in the video segment being the highest, includes: Obtaining the image similarity between each video frame in the video segment and other video frames in the video segment; Statistically calculating the average value of the image similarity between each video frame and other video frames; Taking the video frame with the highest average value as the standard video frame.

5. A CSS web animation compression system for implementing the CSS web animation compression method described in claim 1, characterized in that, Including: A video segment module, performing video recognition on a first animation medium, and sequentially segmenting the first animation medium into a plurality of video segments based on frame similarity, each segment including a plurality of video frames; A standard video frame module that obtains standard video frames from each of the video segments, where the average image similarity of the standard video frames to other video frames in the video segment is the highest; A restoration information module that compares the standard video frames with other video frames in the same video segment respectively to obtain a static region, a number of dynamic regions, and the image restoration information of the video segment. The image restoration information records the planar relationship between each dynamic region and the static region and the timing relationship of the dynamic regions. The timing relationship is the timestamp of the video frame corresponding to the dynamic region in the first animation media. The static region is a local image region that remains unchanged throughout the video segment, and the dynamic region is the other region in the picture of each video frame in each video segment except the static region; A media file module that jointly generates a media file based on the static regions, a number of dynamic regions, and the image restoration information of the video segments corresponding to all the video segments of the first animation media, and the capacity of the media file is smaller than the capacity of the first animation media; A video generation module that multiplexes the static region based on the image restoration information of the video segment and combines it with different dynamic regions respectively to generate the video frames, and generates a second animation media according to the video frames.

6. A CSS web page animation compression device, characterized in that, Comprising: A processor; A memory that stores executable instructions of the processor; Wherein, the processor is configured to execute the steps of the CSS web page animation compression method according to any one of claims 1 to 4 by executing the executable instructions.

7. A computer-readable storage medium for storing a program, characterized in that, When the program is executed by the processor, it implements the steps of the CSS web page animation compression method according to any one of claims 1 to 4.

Images