Preview image generation method and device, storage medium and electronic device

Abstract

The present disclosure relates to the field of picture processing, in particular to a preview picture generation method, a preview picture generation device, a storage medium and an electronic device. The preview picture generation method comprises: creating a canvas with the same size as a to-be-loaded picture, and dividing the canvas into multiple sampling regions; determining a color mean value corresponding to each sampling region according to a color value of each pixel point of the to-be-loaded picture; and merging at least two sampling regions based on the color mean value corresponding to each sampling region, so as to generate a preview picture corresponding to the to-be-loaded picture according to the color mean value corresponding to each merged sampling region. The preview picture generation method can solve the problem of poor user experience when waiting for the picture to be completely loaded.

Description

Technical Field

[0001] This disclosure relates to the field of image processing, specifically to a preview image generation method, a preview image generation device, a storage medium, and an electronic device. Background Technology

[0002] With the rapid development of internet technology, more and more cool images are appearing on various apps and websites. The image sizes are getting larger and larger, the loading time is getting longer and longer, and users are waiting for longer and longer.

[0003] Currently, loading large images typically uses a loading state or a solid color background. The loading state cannot occupy the space originally required for the image, nor can it preview the image's general color distribution and skeleton, making it impossible to predict the image's content. Furthermore, the loaded image can easily create a large contrast with a solid color background, resulting in a poor user experience.

[0004] It should be noted that the information disclosed in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0005] The purpose of this disclosure is to provide a preview image generation method, preview image generation device, storage medium, and electronic device, aiming to solve the problem of poor user experience when waiting for an image to fully load.

[0006] Other features and advantages of this disclosure will become apparent from the following detailed description, or may be learned in part from practice of this disclosure.

[0007] According to one aspect of the present disclosure, a preview image generation method is provided, comprising: creating a canvas with the same size as an image to be loaded, and dividing the canvas into multiple sampling regions; determining the average color value corresponding to each sampling region based on the color value of each pixel of the image to be loaded; merging at least two sampling regions based on the average color value corresponding to each sampling region, so as to generate a preview image corresponding to the image to be loaded based on the average color value corresponding to each of the merged sampling regions.

[0008] According to a second aspect of the present disclosure, a preview image generation apparatus is provided, comprising: a canvas module for creating a canvas of the same size as an image to be loaded, and dividing the canvas into multiple sampling regions; an averaging module for determining the average color value corresponding to each sampling region based on the color value of each pixel of the image to be loaded; and a merging module for merging at least two sampling regions based on the average color value corresponding to each sampling region, so as to generate a preview image corresponding to the image to be loaded based on the average color value corresponding to each of the merged sampling regions.

[0009] According to a third aspect of the present disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the preview image generation method as described in the above embodiments.

[0010] According to a fourth aspect of the present disclosure, an electronic device is provided, characterized in that it includes: one or more processors; and a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the preview image generation method as described in the above embodiments.

[0011] The exemplary embodiments disclosed herein may have some or all of the following beneficial effects:

[0012] In some embodiments of this disclosure, the canvas is divided into multiple sampling regions, and the samples are merged based on the average color value of each region. Finally, a preview image of the image to be loaded is drawn based on the average color value of each merged sampling region. On the one hand, this disclosure provides a method for generating a preview image representing the color skeleton of an image. This method can generate a preview image while the user is waiting for the image to load, which enhances the user experience compared to existing loading states or solid color backgrounds. On the other hand, the method provided by this disclosure can automatically determine the color value of each pixel in the image to be loaded, resulting in low-code and high generalization capabilities.

[0013] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0014] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0015] Figure 1 The illustration schematically shows a flowchart of a preview image generation method in an exemplary embodiment of the present disclosure;

[0016] Figure 2 This schematic diagram illustrates an embodiment of the present disclosure of dividing a canvas into multiple sampling regions.

[0017] Figure 3 A flowchart illustrating a method for merging sampling regions in an exemplary embodiment of this disclosure is shown schematically.

[0018] Figure 4 This diagram schematically illustrates a preview image of an exemplary embodiment of the present disclosure;

[0019] Figure 5 This illustration schematically shows a diagram of an image to be loaded in an exemplary embodiment of the present disclosure;

[0020] Figure 6 This schematic diagram illustrates the composition of a preview image generation apparatus in an exemplary embodiment of the present disclosure.

[0021] Figure 7 This schematic diagram illustrates a computer-readable storage medium according to an exemplary embodiment of the present disclosure;

[0022] Figure 8 The schematic diagram illustrates the structure of a computer system of an electronic device according to an exemplary embodiment of the present disclosure. Detailed Implementation

[0023] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more thorough and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art.

[0024] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0025] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0026] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0027] The implementation details of the technical solutions of the embodiments of this disclosure are described in detail below.

[0028] Figure 1 This schematically illustrates a flowchart of a preview image generation method according to an exemplary embodiment of this disclosure. Figure 1 As shown, the preview image generation method includes steps S101 to S103:

[0029] Step S101: Create a canvas with the same size as the image to be loaded, and divide the canvas into multiple sampling areas;

[0030] Step S102: Determine the average color value corresponding to each sampling region based on the color value of each pixel in the image to be loaded;

[0031] Step S103: At least two sampling regions are merged based on the average color value corresponding to each sampling region, so as to generate a preview image corresponding to the image to be loaded based on the average color value corresponding to the merged sampling regions.

[0032] In some embodiments of this disclosure, the canvas is divided into multiple sampling regions, and the samples are merged based on the average color value of each region. Finally, a preview image of the image to be loaded is drawn based on the average color value of each merged sampling region. On the one hand, this disclosure provides a method for generating a preview image representing the color skeleton of an image. This method can generate a preview image while the user is waiting for the image to load, which enhances the user experience compared to existing loading states or solid color backgrounds. On the other hand, the method provided by this disclosure can automatically determine the color value of each pixel in the image to be loaded, resulting in low-code and high generalization capabilities.

[0033] The following will describe in more detail each step of the preview image generation method in this example embodiment, with reference to the accompanying drawings and embodiments.

[0034] In step S101, a canvas of the same size as the image to be loaded is created, and the canvas is divided into multiple sampling areas.

[0035] Specifically, in step S101, the size data of the image to be loaded is first obtained, such as the height and width attributes, which can be in pixels or centimeters. Then, a canvas with the same size as the image to be loaded is created. For example, canvas statements can be written in HTML5, using the size data of the image to be loaded, i.e., the height and width attributes, to determine the canvas size. HTML5 is a language description method for building web content.

[0036] In one embodiment of this disclosure, step S101, which divides the canvas into multiple sampling regions, includes: generating web page graphics library context data based on the canvas; and dividing the canvas into multiple sampling regions according to preset sampling region parameters based on the web page graphics library context data.

[0037] Specifically, WebGL (Web Graphics Library) context data can be generated from the canvas. WebGL is a JavaScript API that renders high-performance, interactive 3D and 2D graphics in any compatible web browser without the need for plugins. WebGL does this by introducing an API that is very consistent with OpenGL ES 2.0, which can be used in the HTML5 canvas element. This consistency allows the API to take advantage of the hardware graphics acceleration provided by the user's device.

[0038] The sampling region parameters can be pre-configured, specifying the size of the sampling region. Generally, the sampling region can be rectangular, including both height and width, and can be measured in pixels or centimeters. For example, sampling region parameters can have pixel values ​​of 4*4, 16*16, 32*32, 64*64, 128*128, etc.

[0039] Therefore, the canvas can be divided into multiple sampling areas according to preset sampling area parameters, and if the size is insufficient, it can be divided according to height or width.

[0040] Figure 2 This schematically illustrates a method of dividing a canvas into multiple sampling regions according to an exemplary embodiment of the present disclosure. (Reference) Figure 2 As shown, the canvas can be divided into 24 sampling areas according to the sampling area parameters.

[0041] In step S102, the average color value corresponding to each sampling region is determined based on the color value of each pixel in the image to be loaded.

[0042] Specifically, the step of determining the color mean corresponding to each sampling area in step S102 is as follows: the color mean of the sampling area is obtained by calculating the average color value of all pixels in the sampling area; wherein, the color mean includes the red color mean, green color mean, blue color mean and transparency channel mean; all the sampling areas are traversed to obtain the color mean corresponding to each sampling area.

[0043] In this image, the color values ​​of each pixel are represented using RGBA, a color space model consisting of the RGB color space and an alpha channel. RGBA represents red, green, blue, and alpha.

[0044] For a given sampling area, the average values ​​of the red, green, and blue colors of all pixels in the sampling area, as well as the alpha value of the transparency channel, are calculated to obtain the average values ​​of the red (R-mean), green (G-mean), blue (B-mean), and transparency channel (A-mean) for the sampling area, respectively.

[0045] In this way, the color values ​​of each pixel in a sampling area are uniformly recorded as the average color value of that sampling area, and then the image to be loaded is blurred into multiple color blocks with the average color value.

[0046] In step S103, at least two sampling regions are merged based on the average color value corresponding to each sampling region, so as to generate a preview image corresponding to the image to be loaded based on the average color value corresponding to the merged sampling regions.

[0047] Specifically, in step S103, sampling areas with similar color values ​​can be merged to reduce the number of color blocks with different color values ​​in the preview image, thereby reducing the number of images occupied by the preview image and reducing memory consumption.

[0048] Figure 3 A flowchart illustrating a method for merging sampling regions in an exemplary embodiment of this disclosure is shown schematically, with reference to... Figure 3 As shown, the merging of sampling regions in step S103 specifically includes the following methods:

[0049] Step S301: Select an unmerged target sampling region and obtain the adjacent sampling regions adjacent to the target sampling region;

[0050] Step S302: Calculate the variance of the mean color value corresponding to the target sampling area and the adjacent sampling areas respectively;

[0051] Step S303: When the variance is less than a preset value, the target sampling region is merged with the adjacent sampling region;

[0052] Step S304: Repeat the above selection, calculation and merging steps until the merging termination condition is met, then terminate the merging of the sampling area.

[0053] The following is combined with Figure 3The schematic diagram of the sampling area shown illustrates steps S301 to S304 in detail, including sampling area 1 to sampling area 24.

[0054] In one embodiment of this disclosure, reference is made to Figure 3 As shown, sampling region 1 can be selected as the target sampling region, and then sampling regions adjacent to sampling region 1, namely sampling regions 2, 7, and 8, can be obtained. Then, the variance of the color mean of sampling regions 1, 2, 7, and 8 can be calculated.

[0055] Specifically, the value range of RGB is 0 to 255, and the value range of A is 0 to 1. Therefore, when calculating the variance, RGB needs to be divided by 255 to bring the value range to between 0 and 1, while A does not.

[0056] For example, if the pixel values ​​corresponding to the four sampling regions 1, 2, 7, and 8 are (240, 255, 200, 1), (230, 245, 210, 0.5), (220, 235, 220, 1), and (210, 225, 230, 0.5) respectively, then the mean R value is calculated to be (240+230+220+210) / 4 = 225, and the variance of the R value is (240-225)^2+(230-225)^2+(220-225)^2+(210-225)^2 / 4 / 255 = 0.4901. The variances of G and B are similar, while the variance of A value is (1-1)^2+(0.5-1)^2+(1-1)^2+(0.5-1)^2 / 4 = 0.125.

[0057] The calculated variance is compared with the preset value. Since normalization was performed when calculating the mean and variance, the preset values ​​for RGBA can be configured to the same value. If the mean and variance are both less than the preset value, it means that the color dispersion is small, so sampling regions 1, 2, 7, and 8 are merged. However, if the variance is greater than or equal to the preset value, it means that the color difference is large, so it is not suitable to merge the sampling regions.

[0058] It should be noted that preset values ​​can also be configured separately for RGBA, and this disclosure does not impose specific limitations on this.

[0059] In one embodiment of this disclosure, reference is made to Figure 3 As shown, sampling area 8 can also be selected as the target sampling area. The adjacent sampling areas of sampling area 8 are sampling areas 1, 2, 3, 7, 9, 13, 14, and 15. Then it is necessary to calculate the variance of the color mean corresponding to each of these nine sampling areas, and then determine whether the variances of these nine color means need to be merged.

[0060] In step S304, all sampling regions are traversed, and the above selection, calculation, and merging steps are repeated for each sampling region until the merging termination condition is met. Specifically, the merging termination condition is that all the sampling regions have been merged or selected as target sampling regions. That is, the sampling region has either already been merged or has been selected as a target sampling region and cannot be merged.

[0061] In one embodiment of this disclosure, merging at least two sampling regions based on the average color value corresponding to each sampling region includes: performing a first merging of the sampling regions based on the average color value corresponding to each sampling region to obtain the average color value corresponding to each of the first merged sampling regions; performing a second merging of the first merged sampling regions based on the average color value corresponding to each of the first merged sampling regions to obtain the average color value corresponding to each of the second merged sampling regions; repeating the above steps until merging is terminated after a preset number of times.

[0062] Specifically, when merging sampling areas, it can be done in a similar manner. Figure 3 The method involves multiple merging operations. First, the sampled regions are merged initially, and then the merged regions are merged again. The number of merges can be set to a preset number.

[0063] Based on the above method, the more times the merging is performed, the fewer color blocks with different average colors will be after merging, and the less data will be generated in the final preview image, further reducing memory consumption.

[0064] Next, after the sampling areas are merged in step S103, the average color value of the merged sampling areas can be calculated.

[0065] Specifically, the calculation method for the average color value of the merged sampling area is similar to that for each sampling area. However, the average color value of the sampling area is obtained by averaging the color values ​​of each pixel within the sampling area, while the average color value of the merged sampling area is obtained by averaging the color values ​​of each merged sampling area.

[0066] Then, a preview image corresponding to the image to be loaded is generated based on the average color value of the merged sampling areas.

[0067] In one embodiment of this disclosure, generating a preview image of the image to be loaded based on the average color values ​​corresponding to the merged sampling regions includes: drawing the merged sampling regions according to the average color values ​​corresponding to the merged sampling regions; performing gradient processing on the edges of the merged sampling regions based on preset feathering parameters; calling an interface to generate a string based on the gradient-processed sampling regions; and then generating image code data as the preview image based on the string.

[0068] Specifically, WebGL first draws the merged sampling regions, with the color being the average of the merged colors, including the average values ​​of R, G, B, and A. Then, WebGL applies a feathering effect, using gradients such as radial or linear gradients to the edges of the sampling regions according to the feathering parameters. The feathering parameters can be pre-configured, for example, to 0.5. Finally, the corresponding interface is called to generate a base string image, and the image code data for the three platforms—web, PC, and mobile—is output. Users can simply copy the image code data to use the app on each platform.

[0069] Based on the above method, a base string image is first generated, which can be converted into various image formats for convenient use of subsequent preview images. Then, the preview image code can be automatically generated based on the color information of the image to be loaded. The generation method is low-code, simple and convenient, and has strong generalization ability.

[0070] Figure 4 This schematic diagram illustrates a preview image of an exemplary embodiment of the present disclosure. Figure 5 This illustration schematically depicts an image to be loaded according to an exemplary embodiment of this disclosure. Figure 4 The preview image is based on Figure 5 The image to be loaded is generated, and from the user's perspective, while waiting for the image to load, it will display from... Figure 4 Change to Figure 5 This allows for a smooth color transition from the preview image to the image being loaded during the waiting process, avoiding abrupt changes from a blank screen to an image. This reduces eye strain when users receive image information and improves the user experience.

[0071] Figure 6 This schematic diagram illustrates the composition of a preview image generation apparatus in an exemplary embodiment of the present disclosure, such as... Figure 6 As shown, the preview image generation device 600 may include a canvas module 601, an averaging module 602, and a merging module 603. Wherein:

[0072] Canvas module 601 is used to create a canvas of the same size as the image to be loaded, and to divide the canvas into multiple sampling areas;

[0073] The mean value module 602 is used to determine the mean color value corresponding to each sampling region based on the color value of each pixel in the image to be loaded.

[0074] The merging module 603 is used to merge at least two sampling regions based on the average color value corresponding to each sampling region, so as to generate a preview image corresponding to the image to be loaded based on the average color value corresponding to the merged sampling regions.

[0075] According to an exemplary embodiment of this disclosure, the merging module 603 is used to select a target sampling area that has not been merged, and obtain adjacent sampling areas adjacent to the target sampling area; calculate the variance of the mean color value corresponding to the target sampling area and the adjacent sampling areas respectively; when the variance is less than a preset value, merge the target sampling area and the adjacent sampling areas; repeat the above selection, calculation and merging steps until the merging termination condition is met and the merging of the sampling area is terminated.

[0076] According to an exemplary embodiment of this disclosure, the merging termination condition is that all of the sampling regions have been merged or selected as target sampling regions.

[0077] According to an exemplary embodiment of this disclosure, the merging module 603 is further configured to perform a first merging of the sampling regions based on the color mean corresponding to each of the sampling regions, to obtain the color mean corresponding to the first merged sampling regions respectively; perform a second merging of the sampling regions based on the color mean corresponding to the first merged sampling regions respectively, to obtain the color mean corresponding to the second merged sampling regions respectively; repeat the above steps until the merging of the sampling regions is terminated after a preset number of mergings.

[0078] According to an exemplary embodiment of this disclosure, the canvas module 601 is further configured to generate web page graphics library context data based on the canvas; and to divide the canvas into multiple sampling regions based on the web page graphics library context data according to preset sampling region parameters.

[0079] According to an exemplary embodiment of this disclosure, the mean value module 602 is further configured to calculate the mean value of the color values ​​of all pixels in a sampling region to obtain the mean color value corresponding to the sampling region; wherein the mean color value includes the mean red color value, the mean green color value, the mean blue color value, and the mean alpha channel value; and to traverse all the sampling regions to obtain the mean color value corresponding to each sampling region.

[0080] According to an exemplary embodiment of this disclosure, the merging module 603 is further configured to draw the merged sampling region according to the color mean corresponding to the merged sampling region; perform gradient processing on the edge of the merged sampling region based on preset feathering parameters; call the interface to generate a string according to the sampled region after gradient processing, and then generate image code data as the preview image based on the string.

[0081] The specific details of each module in the aforementioned preview image generation device 600 have been described in detail in the corresponding preview image generation method, so they will not be repeated here.

[0082] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0083] In an exemplary embodiment of this disclosure, a storage medium capable of implementing the above-described method is also provided. Figure 7 This schematic diagram illustrates a computer-readable storage medium according to an exemplary embodiment of the present disclosure, such as... Figure 7 As shown, a program product 700 for implementing the above-described method according to an embodiment of the present disclosure is described. This product may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a mobile phone. However, the program product of the present disclosure is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0084] In an exemplary embodiment of this disclosure, an electronic device capable of implementing the above-described method is also provided. Figure 8 The schematic diagram illustrates the structure of a computer system of an electronic device according to an exemplary embodiment of the present disclosure.

[0085] It should be noted that, Figure 8 The computer system 800 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0086] like Figure 8As shown, the computer system 800 includes a Central Processing Unit (CPU) 801, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 802 or programs loaded from storage section 808 into Random Access Memory (RAM) 803. RAM 803 also stores various programs and data required for system operation. The CPU 801, ROM 802, and RAM 803 are interconnected via bus 804. Input / output (I / O) interface 805 is also connected to bus 804.

[0087] The following components are connected to I / O interface 805: an input section 806 including a keyboard, mouse, etc.; an output section 807 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to I / O interface 805 as needed. A removable medium 811, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 810 as needed so that computer programs read from it can be installed into storage section 808 as needed.

[0088] In particular, according to embodiments of this disclosure, the processes described below with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 809, and / or installed from removable medium 811. When the computer program is executed by central processing unit (CPU) 801, it performs various functions defined in the system of this disclosure.

[0089] It should be noted that the computer-readable medium shown in the embodiments of this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

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

[0091] The units described in the embodiments of this disclosure can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the unit itself.

[0092] In another aspect, this disclosure also provides a computer-readable medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to perform the methods described in the above embodiments.

[0093] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0094] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this disclosure.

[0095] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein.

[0096] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A method for generating a preview image, characterized in that, include: Create a canvas with the same size as the image to be loaded, and divide the canvas into multiple sampling regions; The average color value of each sampling region is determined based on the color value of each pixel in the image to be loaded. The sampling regions are merged for the first time based on the average color value corresponding to each sampling region, and the average color value corresponding to the first merged sampling regions is obtained respectively. The sampling regions after the first merging are merged a second time based on the mean color values ​​of the sampling regions after the first merging, resulting in the mean color values ​​of the sampling regions after the second merging. Repeat the above steps until the merging of the sampling areas is terminated after a preset number of merges; generate a string by calling the interface according to the color mean value corresponding to the merged sampling areas, and then generate image code data as the preview image corresponding to the image to be loaded based on the string, so as to copy the image code data for use in the preview image.

2. The preview image generation method according to claim 1, characterized in that, The merging of the sampling regions based on the average color value corresponding to each sampling region includes: Select an unmerged target sampling region and obtain the adjacent sampling regions adjacent to the target sampling region; Calculate the variance of the mean color values ​​corresponding to the target sampling region and the adjacent sampling regions, respectively. When the variance is less than a preset value, the target sampling region is merged with the adjacent sampling region; Repeat the above steps of selection, calculation and merging until the merging termination condition is met, at which point the merging of the sampling region is terminated.

3. The preview image generation method according to claim 2, characterized in that, The merging termination condition is that all of the sampling regions have been merged or selected as the target sampling region.

4. The preview image generation method according to claim 1, characterized in that, The step of dividing the canvas into multiple sampling regions includes: Generate web page graphics library context data based on the canvas; Based on the webpage graphics library context data, the canvas is divided into multiple sampling regions according to preset sampling region parameters.

5. The preview image generation method according to claim 1, characterized in that, The step of determining the average color value corresponding to each sampling region based on the color values ​​of each pixel in the image to be loaded includes: The average color value of the sampling region is obtained by averaging the color values ​​of all pixels in the sampling region; wherein the average color value includes the average red color value, the average green color value, the average blue color value, and the average alpha channel value. Traverse all the sampling regions to obtain the average color value corresponding to each sampling region.

6. The preview image generation method according to claim 1, characterized in that, The method further includes: The merged sampling regions are drawn according to the average color value corresponding to the merged sampling regions. The edges of the merged sampling region are gradually processed based on the preset feathering parameters; The interface is called to generate a string based on the sampled area after gradient processing.

7. A preview image generation device, characterized in that, include: The canvas module is used to create a canvas of the same size as the image to be loaded and to divide the canvas into multiple sampling areas. The mean value module is used to determine the mean color value corresponding to each sampling region based on the color value of each pixel in the image to be loaded. The merging module is used to perform a first merging of the sampling regions based on the average color value corresponding to each sampling region, so as to obtain the average color value corresponding to the sampling regions after the first merging. The sampling regions after the first merging are merged a second time based on the mean color values ​​of the sampling regions after the first merging, resulting in the mean color values ​​of the sampling regions after the second merging. Repeat the above steps until the merging of the sampling areas is terminated after a preset number of merges; generate a string by calling the interface according to the color mean value corresponding to the merged sampling areas, and then generate image code data as the preview image corresponding to the image to be loaded based on the string, so as to copy the image code data for use in the preview image.

8. A computer-readable storage medium having a computer program stored thereon, the program being executed by a processor to implement the preview image generation method as described in any one of claims 1 to 6.

9. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the preview image generation method as described in any one of claims 1 to 6.

Images