预览图生成方法、装置、存储介质及电子设备与流程

1.本公开涉及图片处理领域，具体涉及一种预览图生成方法、预览图生成装置、存储介质及电子设备。


背景技术：

2.伴随现在互联网技术越发发达，越来越多炫酷的图片逐渐充满各式app及站点，图片大小也越来越大，加载时长也越来越高，用户等待的时间也越来越久。
3.目前一般针对大体积的图片加载，采用loading态或者纯色背景。loading态无法占据图片原本所需空间大小，且无法提前预览图片的大体色彩分布骨架，无法预测大概是什么内容的图片，加载后的图片容易与纯色背景形成较大反差，导致用户体验较差。
4.需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。


技术实现要素：

5.本公开的目的在于提供一种预览图生成方法、预览图生成装置、存储介质及电子设备，旨在解决等待图片完整加载时用户体验差的问题。
6.本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。
7.根据本公开实施例的一方面，提供了一种预览图生成方法，包括：创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。
8.根据本公开实施例的第二方面，提供了一种预览图生成装置，包括：画布模块，用于创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；均值模块，用于根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；合并模块，用于基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。
9.根据本公开实施例的第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述实施例中的预览图生成方法。
10.根据本公开实施例的第四方面，提供了一种电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中的预览图生成方法。
11.本公开示例性实施例可以具有以下部分或全部有益效果：
12.在本公开的一些实施例所提供的技术方案中，通过将画布分割成多个采样区域，并根据各采样区域分别对应的颜色均值进行合并，最终根据合并后的采样区域分别对应的
颜色均值绘制待加载图片对应的预览图。一方面，本公开提供了一种生成表示图片色彩骨架的预览图，能够在用户等待图片加载的过程中先生成预览图相较于现有的loading态或者纯色背景，能够增强用户体验；另一方面，本公开提供的方法可以根据待加载图片各像素点的颜色值自动确定，低代码且泛化能力强。
13.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
14.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
15.图1示意性示出本公开示例性实施例中一种预览图生成方法的流程示意图；
16.图2示意性示出本公开示例性实施例中一种将画布分割成多个采样区域的示意图；
17.图3示意性示出本公开示例性实施例中一种合并采样区域方法的流程图；
18.图4示意性示出本公开示例性实施例中一种预览图的示意图；
19.图5示意性示出本公开示例性实施例中一种待加载图片的示意图；
20.图6示意性示出本公开示例性实施例中一种预览图生成装置的组成示意图；
21.图7示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图；
22.图8示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。
具体实施方式
23.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。
24.此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。
25.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
26.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
27.以下对本公开实施例的技术方案的实现细节进行详细阐述。
28.图1示意性示出本公开示例性实施例中一种预览图生成方法的流程示意图。如图1所示，该预览图生成方法包括步骤s101至步骤s103：
29.步骤s101，创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；
30.步骤s102，根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；
31.步骤s103，基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。
32.在本公开的一些实施例所提供的技术方案中，通过将画布分割成多个采样区域，并根据各采样区域分别对应的颜色均值进行合并，最终根据合并后的采样区域分别对应的颜色均值绘制待加载图片对应的预览图。一方面，本公开提供了一种生成表示图片色彩骨架的预览图，能够在用户等待图片加载的过程中先生成预览图相较于现有的loading(加载)态或者纯色背景，能够增强用户体验；另一方面，本公开提供的方法可以根据待加载图片各像素点的颜色值自动确定，低代码且泛化能力强。
33.下面，将结合附图及实施例对本示例实施方式中的预览图生成方法的各个步骤进行更详细的说明。
34.在步骤s101中，创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域。
35.具体而言，步骤s101中首先获取待加载图片的尺寸数据，例如高度和宽度属性，可以是以像素为单位，也可以是以厘米为单位，然后创建一个与待加载图片的尺寸相同的canvas画布。例如可以在html5中编写canvas语句，使用待加载图片的尺寸数据，即高度和宽度属性确定画布尺寸，其中html5是构建web内容的一种语言描述方式。
36.在本公开的一个实施例中，步骤s101中将所述画布分割成多个采样区域，包括：根据所述画布生成网页图形库上下文数据；基于所述网页图形库上下文数据，按照预设的采样区域参数将所述画布分割成多个采样区域。
37.具体地，可以根据canvas画布生成网页图形库webgl上下文数据。webgl(webgraphicslibrary，网页图形库)是一个javascriptapi，可在任何兼容的web浏览器中渲染高性能的交互式3d和2d图形，而无需使用插件。webgl通过引入一个与opengles2.0非常一致的api来做到这一点，该api可以在html5的canvas元素中使用。这种一致性使api可以利用用户设备提供的硬件图形加速。
38.采样区域参数可以是预先配置的，采样区域参数规定了采样区域的尺寸。一般采样区域可以是矩形，即包括高度和宽度，同样也可以是以像素为单位，也可以是以厘米为单位。例如采样区域参数可以为像素值为4*4，16*16，32*32，64*64，128*128等等。
39.因此，可以按照预设的采样区域参数将画布分割成多个采样区域，尺寸不足时按照高度或宽度分割。
40.图2示意性示出本公开示例性实施例中一种将画布分割成多个采样区域的示意图。参考图2所示，可以将画布按照采样区域参数划分为24个采样区域。
41.在步骤s102中，根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值。
42.具体地，步骤s102中确定采样区域分别对应的颜色均值的步骤如下：对一所述采样区域中所有像素点的颜色值求均值得到所述采样区域对应的颜色均值；其中，所述颜色均值包括红色色彩均值、绿色色彩均值、蓝色色彩均值和透明通道均值；遍历所有的所述采样区域，以得到各所述采样区域对应的颜色均值。
43.其中，待加载图片中各像素点的颜色值采用rgba表示，rgba是一种色彩空间的模型，由rgb色彩空间和alpha通道组成。rgba代表红(red)、绿(green)、蓝(blue)和alpha通道(alpha)。ss
44.针对一采样区域，将该采样区域中所有像素点的红色red色彩值、绿色green色彩值、蓝色blue色彩值以及透明通道alpha值求均值，进而得到采样区域分别对应的红色red色彩均值(r均值)、绿色green色彩均值(g均值)、蓝色blue色彩均值(b均值)和透明通道alpha均值(a均值)。
45.这样一来，将一个采样区域的各像素点的颜色值都统一记录为该采样区域的颜色均值，进而将待加载图片模糊处理为多个具有颜色均值的色块。
46.在步骤s103中，基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。
47.具体地，步骤s103中首先可以将颜色值接近的采样区域进行合并，进而减少预览图中不同颜色值的色块数量，进而可以减少预览图所占用的数，减小内存消耗。
48.图3示意性示出本公开示例性实施例中一种合并采样区域方法的流程图，参考图3所示，在步骤s103中合并采样区域具体包括以下方法：
49.步骤s301，选取一未进行合并的目标采样区域，并获取与所述目标采样区域相邻的相邻采样区域；
50.步骤s302，计算所述目标采样区域以及所述相邻采样区域分别对应颜色均值的方差；
51.步骤s303，在所述方差小于预设值时，将所述目标采样区域与所述相邻采样区域进行合并；
52.步骤s304，重复上述选取、计算以及合并的步骤，直至满足合并终止条件时终止对所述采样区域的合并。
53.下面结合图3所示的采样区域示意图对上述步骤s301至步骤s304进行详细说明，其中包括采样区域区域1～采样区域24。
54.在本公开的一个实施例中，参考图3所示，可以选择采样区域1作为目标采样区域，然后获取与采样区域1相邻的采样区域，即采样区域2、7、8。然后计算采样区域1、2、7、8的颜色均值的方差。
55.具体地，rgb的取值范围为0～255，a的取值范围为0～1，因此，在计算方差时，rgb需要再除以255，将取值范围收纳于0～1之间，而a不需要。
56.举例而言，假使四个采样区域1、2、7、8分别对应的像素点值为(240,255,200,1)，(230,245,210,0.5)，(220,235,220,1)，(210,225,230,0.5)，那么计算可得r值均值为(240+230+220+210)/4＝225，r值方差为(240-225)^2+(230-225)^2+(220-225)^2+(210-225)^2/4/255＝0.4901，g、b方差类似，而a值方差为(1-1)^2+(0.5-1)^2+(1-1)^2+(0.5-1)^2/4
＝0.125。
57.将计算的方差与预设值进行比较，由于计算均值方差时做了归一化处理，所以rgba分别的预设值可以配置为同一个值，若均值方差均小于该预设值那么说明颜色的离散程度较小，则将采样区域1、2、7、8进行合并，而如果方差大于或等于预设值时，说明颜色差别较大，则不适合将采样区域进行合并。
58.需要说明的是，配置预设值也可以分别配置rgba分别对应的预设值，本公开在此不做具体限定。
59.在本公开的一个实施例中，参考图3所示，也可以选择采样区域8作为目标采样区域，采样区域8相邻的采样区域为采样区域1、2、3、7、9、13、14、15。那么就需要计算这九个采样区域分别对应的颜色均值的方差，进而判断这九个颜色均值的方差是否需要合并。
60.在步骤s304中，遍历所有的采样区域，针对每一采样区域都重复上述选取、计算以及合并的步骤，直至满足合并终止条件时停止合并。具体而言，合并终止条件为：各所述采样区域均已被合并或者被选取为目标采样区域。也就是说，采样区域要么是已经被合并，要么是已经作为目标采样区域而不能被合并。
61.在本公开的一个实施例中，所述基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，包括：基于各所述采样区域对应的颜色均值对所述采样区域进行第一次合并，得到第一次合并后的采样区域分别对应的颜色均值；根据第一次合并后的采样区域分别对应的颜色均值对第一次合并后的采样区域进行第二次合并，得到第二次合并后的采样区域分别对应的颜色均值；重复上述步骤，直至合并预设次数后终止对所述采样区域的合并。
62.具体地，在合并采样区域时，可以按照类似图3的方法进行多次合并。即首先对采样区域进行首次合并，然后对首次合并后的采样区域再次进行合并。合并的次数可以设置为预设次数。
63.基于上述方法，合并的次数越多，合并后不同颜色均值的色块就越少，最终生成的预览图的数据也就越少，进一步降低内存消耗。
64.接下来，步骤s103中采样区域合并完成后，首先可以计算合并后的采样区域对应的颜色均值。
65.具体地，合并后的采样区域对应的颜色均值的计算方式与各采样区域对应的颜色均值的计算方式类似，只是采样区域的颜色均值是根据采样区域内个像素点的颜色值求均值得到的，而合并后的采样区域的颜色均值是根据被合并的各个采样区域的颜色值求均值得到的。
66.然后，根据合并后的采样区域分别对应的颜色均值生成待加载图片对应的预览图。
67.在本公开的一个实施例中，根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图，包括：按照合并后的采样区域分别对应的颜色均值绘制合并后的采样区域；基于预设的羽化参数对合并后的采样区域的边缘进行渐变处理；根据渐变处理后的采样区域调用接口生成字符串，进而根据所述字符串固定生成图片代码数据作为所述预览图。
68.具体而言，首先webgl绘制各个合并后的采样区域，颜色即为合并计算后的颜色均
值，包括r、g、b、a均值。然后webgl绘制羽化效果，按照羽化参数对采样区域的边缘使用渐变效果进行处理，例如放射性渐变、线性渐变等渐变效果，其中羽化参数可以预先配置，例如羽化参数为0.5；最后调用相应的接口生成base字符串图片，最后输出样式三端的图片代码数据，即web端，pc应用端，移动端，在使用时各端复制图片代码数据即可使用。
69.基于上述方法，先生成base字符串图片，能够将其转为各式图片格式，方便后续预览图的使用，进而能够根据待加载图片的颜色信息自动完成预览图代码的生成，生成方法低代码化，简易方便，且泛化能力强。
70.图4示意性示出本公开示例性实施例中一种预览图的示意图。图5示意性示出本公开示例性实施例中一种待加载图片的示意图。其中图4的预览图是基于图5的待加载图片生成的，在用户视角侧，等待待加载图片的加载过程中时，会显示从图4变化为图5，这样在等待过程中，从预览图按颜色柔和过渡到待加载图片，而避免由空白界面突变为图片，使得用户接收图片信息时减小眼睛使用的疲劳感，提升用户体验。
71.图6示意性示出本公开示例性实施例中一种预览图生成装置的组成示意图，如图6所示，该预览图生成装置600可以包括画布模块601、均值模块602以及合并模块603。其中：
72.画布模块601，用于创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；
73.均值模块602，用于根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；
74.合并模块603，用于基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。
75.根据本公开的示例性实施例，所述合并模块603用于选取一未进行合并的目标采样区域，并获取与所述目标采样区域相邻的相邻采样区域；计算所述目标采样区域以及所述相邻采样区域分别对应颜色均值的方差；在所述方差小于预设值时，将所述目标采样区域与所述相邻采样区域进行合并；重复上述选取、计算以及合并的步骤，直至满足合并终止条件时终止对所述采样区域的合并。
76.根据本公开的示例性实施例，所述合并终止条件为：各所述采样区域均已被合并或者被选取为目标采样区域。
77.根据本公开的示例性实施例，所述合并模块603还用于基于各所述采样区域对应的颜色均值对所述采样区域进行第一次合并，得到第一次合并后的采样区域分别对应的颜色均值；根据第一次合并后的采样区域分别对应的颜色均值对第一次合并后的采样区域进行第二次合并，得到第二次合并后的采样区域分别对应的颜色均值；重复上述步骤，直至合并预设次数后终止对所述采样区域的合并。
78.根据本公开的示例性实施例，所述画布模块601还用于根据所述画布生成网页图形库上下文数据；基于所述网页图形库上下文数据，按照预设的采样区域参数将所述画布分割成多个采样区域。
79.根据本公开的示例性实施例，所述均值模块602还用于对一所述采样区域中所有像素点的颜色值求均值得到所述采样区域对应的颜色均值；其中，所述颜色均值包括红色色彩均值、绿色色彩均值、蓝色色彩均值和透明通道均值；遍历所有的所述采样区域，以得
到各所述采样区域对应的颜色均值。
80.根据本公开的示例性实施例，所述合并模块603还用于按照合并后的采样区域分别对应的颜色均值绘制合并后的采样区域；基于预设的羽化参数对合并后的采样区域的边缘进行渐变处理；根据渐变处理后的采样区域调用接口生成字符串，进而根据所述字符串固定生成图片代码数据作为所述预览图。
81.上述的预览图生成装置600中各模块的具体细节已经在对应的预览图生成方法中进行了详细的描述，因此此处不再赘述。
82.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
83.在本公开的示例性实施例中，还提供了一种能够实现上述方法的存储介质。图7示意性示出本公开示例性实施例中一种计算机可读存储介质的示意图，如图7所示，描述了根据本公开的实施方式的用于实现上述方法的程序产品700，其可以采用便携式紧凑盘只读存储器(cd-rom)并包括程序代码，并可以在终端设备，例如手机上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
84.在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。图8示意性示出本公开示例性实施例中一种电子设备的计算机系统的结构示意图。
85.需要说明的是，图8示出的电子设备的计算机系统800仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
86.如图8所示，计算机系统800包括中央处理单元(centralprocessingunit，cpu)801，其可以根据存储在只读存储器(read-onlymemory，rom)802中的程序或者从存储部分808加载到随机访问存储器(randomaccessmemory，ram)803中的程序而执行各种适当的动作和处理。在ram803中，还存储有系统操作所需的各种程序和数据。cpu801、rom802以及ram803通过总线804彼此相连。输入/输出(input/output，i/o)接口805也连接至总线804。
87.以下部件连接至i/o接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(cathoderaytube，crt)、液晶显示器(liquidcrystaldisplay，lcd)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如lan(localareanetwork，局域网)卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至i/o接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。
88.特别地，根据本公开的实施例，下文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(cpu)801执行时，执行本公开的系统中限定的各种功能。
89.需要说明的是，本公开实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasableprogrammablereadonlymemory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compactdiscread-onlymemory，cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。
90.附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
91.描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。
92.作为另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。
93.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
94.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算
设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施方式的方法。
95.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。
96.应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

技术特征：
1.一种预览图生成方法，其特征在于，包括：创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。2.根据权利要求1所述的预览图生成方法，其特征在于，所述基于各所述采样区域的颜色均值对所述采样区域进行合并，包括：选取一未进行合并的目标采样区域，并获取与所述目标采样区域相邻的相邻采样区域；计算所述目标采样区域以及所述相邻采样区域分别对应颜色均值的方差；在所述方差小于预设值时，将所述目标采样区域与所述相邻采样区域进行合并；重复上述选取、计算以及合并的步骤，直至满足合并终止条件时终止对所述采样区域的合并。3.根据权利要求2所述的预览图生成方法，其特征在于，所述合并终止条件为：各所述采样区域均已被合并或者被选取为目标采样区域。4.根据权利要求1所述的预览图生成方法，其特征在于，所述基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，包括：基于各所述采样区域对应的颜色均值对所述采样区域进行第一次合并，得到第一次合并后的采样区域分别对应的颜色均值；根据第一次合并后的采样区域分别对应的颜色均值对第一次合并后的采样区域进行第二次合并，得到第二次合并后的采样区域分别对应的颜色均值；重复上述步骤，直至合并预设次数后终止对所述采样区域的合并。5.根据权利要求1所述的预览图生成方法，其特征在于，所述将所述画布分割成多个采样区域，包括：根据所述画布生成网页图形库上下文数据；基于所述网页图形库上下文数据，按照预设的采样区域参数将所述画布分割成多个采样区域。6.根据权利要求1所述的预览图生成方法，其特征在于，所述根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值，包括：对一所述采样区域中所有像素点的颜色值求均值得到所述采样区域对应的颜色均值；其中，所述颜色均值包括红色色彩均值、绿色色彩均值、蓝色色彩均值和透明通道均值；遍历所有的所述采样区域，以得到各所述采样区域对应的颜色均值。7.根据权利要求1所述的预览图生成方法，其特征在于，所述根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图，包括：按照合并后的采样区域分别对应的颜色均值绘制合并后的采样区域；基于预设的羽化参数对合并后的采样区域的边缘进行渐变处理；根据渐变处理后的采样区域调用接口生成字符串，进而根据所述字符串固定生成图片代码数据作为所述预览图。8.一种预览图生成装置，其特征在于，包括：
画布模块，用于创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；均值模块，用于根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；合并模块，用于基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。9.一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如权利要求1至7任一项所述的预览图生成方法。10.一种电子设备，其特征在于，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1至7任一项所述的预览图生成方法。

技术总结
本公开涉及图片处理领域，具体涉及一种预览图生成方法、预览图生成装置、存储介质及电子设备。该预览图生成方法，包括：创建与待加载图片的尺寸相同的画布，并将所述画布分割成多个采样区域；根据所述待加载图片各像素点的颜色值确定各所述采样区域对应的颜色均值；基于各所述采样区域对应的颜色均值对至少两个所述采样区域进行合并，以根据合并后的采样区域分别对应的颜色均值生成所述待加载图片对应的预览图。该预览图生成方法能够解决等待图片完整加载时用户体验差的问题。完整加载时用户体验差的问题。完整加载时用户体验差的问题。


技术研发人员：沈志铭
受保护的技术使用者：广州博冠信息科技有限公司
技术研发日：2023.03.28
技术公布日：2023/7/22