基于Flutter的图片预览方法、装置、设备及可读存储介质与流程

基于flutter的图片预览方法、装置、设备及可读存储介质
技术领域
1.本技术涉及图片处理技术领域，更具体地说，涉及一种基于flutter的图片预览方法、装置、设备及可读存储介质。


背景技术：

2.随着越来越多的用户选择拍照记录美好生活，每个用户的图片越来越多，为了精简照片，用户一般选择对不满意的图片进行清理。在确定不满意图片的过程中，为了提高效率，用户一般选择预览各个图片。现有技术中在为用户提供预览图片的过程中，需要将生成的预览图片转换为字节数据加载，但采用上述方式会占用大量内存资源，而由于内存占用率过高会导致预览图片显示过慢。因而，如何提高预览图片的显示速度，成为了人们关注的重点。


技术实现要素：

3.有鉴于此，本技术提供了一种基于flutter的图片预览方法、装置、设备及可读存储介质，用于提高预览图片的显示速度。
4.为了实现上述目的，现提出的方案如下：
5.一种基于flutter的图片预览方法，包括：
6.在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像；
7.将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；
8.接收所述原生平台返回的所述预览图片对应的沙盒地址；
9.根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
10.可选的，所述显示请求中包含多个图片的地址时，所述显示请求中还包括各个图片的优先级；
11.在需要显示图片时，生成显示请求，包括：
12.在需要先后显示多个图片时，确定各个图片的优先级；
13.获取每个图片的地址，并将每个图片的地址与该图片的优先级对应；
14.基于各个图片的地址以及优先级，生成显示请求。
15.可选的，所述显示请求还包括所述图片的地址对应的urlkey标识；
16.在需要显示图片时，生成显示请求，包括：
17.在需要显示图片时，获取所述图片的地址以及所述图片的唯一标识；
18.根据所述图片的地址以及所述唯一标识，生成所述图片对应的urlkey标识；
19.基于所述图片的地址以及所述urlkey标识，生成显示请求，以供所述原生平台将所述预览图片对应的图片的urlkey标识与沙盒地址对应发送。
20.可选的，根据所述沙盒地址，获取所述预览图片并显示所述预览图片，包括：
21.确定当前需要显示的图片的目标urlkey标识；
22.根据所述目标urlkey标识对应的目标沙盒地址，获取并显示所述当前需要显示的图片对应的目标预览图片。
23.可选的，根据所述目标urlkey标识对应的目标沙盒地址，获取并显示所述当前需要显示的图片对应的目标预览图片，包括：
24.利用image provider，创建图片加载框架；
25.利用所述图片加载框架以及所述目标urlkey标识对应的目标沙盒地址，显示并缓存目标预览图片。
26.可选的，将所述显示请求发送至原生平台，包括：
27.通过预先创建的处理通道，将所述显示请求发送至原生平台；
28.接收所述原生平台返回的所述预览图片对应的沙盒地址，包括：
29.通过所述处理通道，接收所述原生平台返回的所述预览图片对应的沙盒地址。
30.一种基于flutter的图片预览装置，包括：
31.生成单元，用于在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像；
32.发送单元，用于将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；
33.接收单元，用于接收所述原生平台返回的所述预览图片对应的沙盒地址；
34.获取单元，用于根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
35.一种基于flutter的图片预览设备，包括存储器和处理器；
36.所述存储器，用于存储程序；
37.所述处理器，用于执行所述程序，实现上述的基于flutter的图片预览方法的各个步骤。
38.一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如上述的基于flutter的图片预览方法的各个步骤。
39.从上述的技术方案可以看出，本技术提供的基于flutter的图片预览方法，需要应用于flutter平台中，在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像，如此，flutter作为一种跨平台开发技术，能够获取本地图片的地址也可以获取云端图片的地址；将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；接收所述原生平台返回的所述预览图片对应的沙盒地址；如此，可以利用原生平台本身的人脸识别功能对图片进行人脸识别，从而更好地得到预览图片；根据所述沙盒地址，获取所述预览图片并显示所述预览图片，将预览图片存储于沙盒中，并不会占用过多的内存，且通过将预览图片存储于沙盒中，省却了图片数据流加载的过程，能够加快图片加载效率。可见，本技术可以提高预览图片的显示速度。
附图说明
40.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
41.图1为本技术实施例公开的一种基于flutter的图片预览方法流程图；
42.图2为本技术实施例公开的一种基于flutter的图片预览装置结构示意图；
43.图3为本技术实施例公开的一种基于flutter的图片预览设备的硬件结构框图。
具体实施方式
44.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
45.本技术提供的基于flutter的图片预览方法，该方法可应用于flutter平台，该flutter平台可以设置于各类配置有沙盒机制的众多通用或专用的计算装置环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器装置、包括以上任何装置或设备的分布式计算环境等等。
46.其中，flutter是谷歌的移动ui框架，可以快速地在原生平台上构建高质量的原生用户界面。
47.原生平台可以为ios系统或android系统。
48.接下来结合图1对本技术的基于flutter的图片预览方法进行详细介绍，包括如下步骤：
49.步骤s1、在需要显示图片时，生成显示请求。
50.具体地，在用户需要预览各个图片时，生成显示请求，显示请求中可包含需要预览的各个图片的地址，还可以包含原生平台生成预览图片的过程中，需要的配置信息，该配置信息可以包括人脸识别范围以及图片识别范围等信息。
51.各个图片可以存储于云端，可以获取各个图片在云端服务器的地址。
52.其中，各个图片可以为游客图片、人物图片等包含人脸图像的图片。
53.步骤s2、将所述显示请求发送至原生平台。
54.具体地，可以将显示请求发送至原生平台，以供原生平台获取与显示请求中每个地址对应的图片，并对各个图片进行人脸识别，得到识别结果，识别结果可以包括人脸范围，根据各个图片对应的人脸范围以及显示请求中的配置信息，确定各个图片的图片切割区域，根据图片对应的图片切割区域对该图片进行剪切，剪切后的图片为该图片对应的预览图片，在得到预览图片后可以将该预览图片存储于沙盒中。
55.其中，可以使用vn detect face rectangles request进行人脸识别，使用cg image create with image in rect进行剪切。
56.沙盒位于客户端本地，沙盒(sandbox)是一个防御机制，每个应用都有一个对应的沙盒，各沙盒之间是互相隔离的。
57.步骤s3、接收所述原生平台返回的所述预览图片对应的沙盒地址。
58.具体地，可以在发送显示请求后，接收原生平台返回的沙盒地址，该沙盒地址对应的图片为预览图片，该预览图片对应于需要显示的图片，该预览图片为需要显示的图片经过切割后得到的图片。
59.步骤s4、根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
60.具体地，可以将沙盒地址作为key读取沙盒中的预览图片，读取后显示预览图片。
61.从上述技术方案可以看出，本技术实施例提供了一种提供的基于flutter的图片预览方法，可以利用原生平台本身的人脸识别功能对图片进行人脸识别，从而更好地得到预览图片，将预览图片存储于沙盒中，并不会占用过多的内存，且通过将预览图片存储于沙盒中，省却了图片数据流加载的过程，能够加快图片加载效率。可见，本技术可以提高预览图片的显示速度。
62.且本技术发送显示请求以及接收上一显示请求对应的沙盒地址可以同时进行，生成预览图片与发送请求及接收沙盒地址为异步执行，因而，可以进一步加快预览图片的加载速度。
63.在本技术的一些实施例中，考虑到可以优先处理用户更为关注的图片，提高本技术的灵活性，基于此，对步骤s1、在需要显示图片时，生成显示请求的过程进行详细说明，步骤如下：
64.s10、在需要先后显示多个图片时，确定各个图片的优先级。
65.具体地，用户可能需要预览多个图片，此时显示请求中可以包括多个图片的地址，考虑到用户较为关注或者优先查看的图片可以优先加载处理，因而，可以确定各个图片的优先级，提高本技术的灵活性。
66.其中，可以根据该图片在相册的顺序、用户选择该图片的可能性以及该图片是否为用户当前选择预览的图片为基础，确定该图片的优先级，以此得到各个图片的优先级。
67.s11、获取每个图片的地址，并将每个图片的地址与该图片的优先级对应。
68.具体地，可以获取各个图片的地址，各个地址与各个图片一一对应，各个地址与各个优先级一一对应，根据地址与图片的对应关系以及地址与优先级的对应关系，建立各个地址与各个优先级之间的对应关系。
69.s12、基于各个图片的地址以及优先级，生成显示请求。
70.具体地，可以通过多种方式，根据每个地址及其对应的优先级，生成显示请求。例如，该显示请求中可包括各个地址及其对应的优先级，以供原生平台对各个优先级进行比较，根据比较结果确定各个地址对应的图片的处理顺序，从而对优先级较高的地址对应的图片进行优先处理。又如，显示请求中还可以按照优先级顺序，对各个地址进行排序，优先级较高的，显示请求中的排序越高，以供原生平台按照显示请求中的排序，对优先级较高的地址对应的图片进行优先处理。
71.从上述技术方案可以看出，本实施例提供了一种生成显示请求的可选的方式，通过上述的方式可以根据实际情况，优先处理优先级较高的图片，从而，优先显示优先级较高的图片对应的预览图片，增加了本技术的灵活性及实用性，提高加载预览图片的流畅度。
72.在本技术的一些实施例中，又考虑到显示预览图片的过程中，需要保证每一张图片与预览图片的对应性，基于此，可以在显示请求中增加标识，以保证各个图片与各个预览
图片之间一一对应。接下来，将对在显示请求中增加标识的过程进行详细说明，即对步骤s1、在需要显示图片时，生成显示请求的过程进行详细说明，步骤如下：
73.s10、在需要显示图片时，获取所述图片的地址以及所述图片的唯一标识。
74.具体地，可以获取每个图片的地址，以及该图片在云端服务器的唯一标识。
75.s11、根据所述图片的地址以及所述唯一标识，生成所述图片对应的urlkey标识。
76.具体地，可以根据每个图片的地址以及其对应的标识，生成该图片对应的urlkey标识。
77.s12、基于所述图片的地址以及所述urlkey标识，生成显示请求，以供所述原生平台将所述预览图片对应的图片的urlkey标识与沙盒地址对应发送。
78.具体地，可以将每个图片的地址及其对应的urlkey标识对应生成显示请求，实现在显示请求包含有各个图片的地址以及各个urlkey标识之间一一对应的关系，以供原生平台可以从显示请求中确定各个地址与各个urlkey标识之间的对应关系，并根据该对应关系，建立将沙盒地址与urlkey标识对应。
79.从上述技术方案可以看出，本实施例提供了又一种生成显示请求的可选的方式，通过上述的方式，生成的显示请求可以表明各个图片的地址对应的urlkey标识，以便原生平台返回沙盒地址时，可将沙盒地址与对应的urlkey标识对应返回，保证每一张图片与预览图片的对应性，从而，提高本技术的可靠性。
80.在本技术的一些实施例中，对步骤s4、根据所述沙盒地址，获取所述预览图片并显示所述预览图片的过程进行详细说明，步骤如下：
81.s40、确定当前需要显示的图片的目标urlkey标识。
82.具体地，可以响应用户选定图片的操作，将该用户选定的图片作为当前需要显示的图片，并获取该图片的地址以及该图片的标识，生成该图片的urlkey标识，将该图片的urlkey标识作为目标urlkey标识。
83.s41、根据所述目标urlkey标识对应的目标沙盒地址，获取并显示所述当前需要显示的图片对应的目标预览图片。
84.具体地，可以分析原生平台返回的信息，确定与该目标urlkey标识对应返回的沙盒地址，并将该沙盒地址作为目标沙盒地址。以目标沙盒地址为key，从沙盒中获取预览图片，可将获得的预览图片作为目标预览图片。
85.可在显示界面上显示该目标预览图片。
86.从上述技术方案可以看出，本实施例提供了一种显示预览图片的可选的方式，通过上述的方式，可以进一步在界面上对应显示当前需要展示的图片，提高本技术的可靠性。
87.在本技术的一些实施例中，对步骤s41、根据所述目标urlkey标识对应的目标沙盒地址，获取并显示所述当前需要显示的图片对应的目标预览图片的过程进行详细说明，步骤如下：
88.s410、利用image provider，创建图片加载框架。
89.具体地，image provider是一个抽象类，通过image provider可创建一个图片数据流，该图片数据流即为图片加载框架。
90.s411、利用所述图片加载框架以及所述目标urlkey标识对应的目标沙盒地址，显示并缓存目标预览图片。
91.具体地，可将目标沙盒地址作为key读取沙盒中该目标沙盒地址对应的预览图片，通过该图片数据流进行展示，还可以通过image provider生成key对目标沙盒地址对应的预览图片进行缓存。
92.从上述技术方案可以看出，本实施例提供了一种利用沙盒地址显示预览图片的可选的方式，通过上述的方式，可以将预览图片进行缓存，也可以对预览图片进行显示，进一步减少了预览图片的加载时间，提高了本技术的效率。
93.在本技术的一些实施例中，对步骤s2、将所述显示请求发送至原生平台的过程进行详细说明，步骤如下：
94.s20、通过预先创建的处理通道，将所述显示请求发送至原生平台。
95.具体地，可以预先确定一个唯一的标识，并创建与该标识对应的通道，将该通道作为处理通道，该处理通道用于实现flutter平台与原生平台之间的信息交互。
96.通过上述的处理通道，flutter平台可将显示请求实时发送至原生平台。
97.在此基础上，对步骤s3、接收所述原生平台返回的所述预览图片对应的沙盒地址的过程进行详细说明，步骤如下：
98.s30、通过所述处理通道，接收所述原生平台返回的所述预览图片对应的沙盒地址。
99.具体地，通过该处理通道，flutter平台可实时接收原生平台返回的沙盒地址。
100.从上述技术方案可以看出，本实施例提供了一种flutter平台与原生平台信息交互的可选的方式，通过上述的过程，可以创建一个处理通道用于帮助flutter平台与原生平台实时交互显示请求及沙盒地址，能够提高本技术的信息交互的速率，从而，实现本技术能够高效率地显示预览图片。
101.下面对本技术实施例提供的基于flutter的图片预览装置进行描述，下文描述的基于flutter的图片预览装置与上文描述的基于flutter的图片预览方法可相互对应参照。
102.参见图2，图2为本技术实施例公开的一种基于flutter的图片预览装置结构示意图。
103.如图2所示，该基于flutter的图片预览装置可以包括：
104.生成单元1，用于在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像；
105.发送单元2，用于将将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；
106.接收单元3，用于接收所述原生平台返回的所述预览图片对应的沙盒地址；
107.获取单元4，用于根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
108.可选的，上述生成单元可以包括：
109.优先级确定子单元，用于在需要先后显示多个图片时，确定各个图片的优先级；
110.图片地址获取子单元，用于获取每个图片的地址，并将每个图片的地址与该图片的优先级对应；
111.优先级利用子单元，用于基于各个图片的地址以及优先级，生成显示请求。
112.可选的，生成单元还可以包括：
113.标识获取子单元，用于在需要显示图片时，获取所述图片的地址以及所述图片的唯一标识；
114.urlkey标识获取子单元，用于根据所述图片的地址以及所述唯一标识，生成所述图片对应的urlkey标识；
115.urlkey标识发送子单元，用于基于所述图片的地址以及所述urlkey标识，生成显示请求，以供所述原生平台将所述预览图片对应的图片的urlkey标识与沙盒地址对应发送。
116.可选的，获取单元可以包括：
117.目标标识确定子单元，用于确定当前需要显示的图片的目标urlkey标识；
118.目标预览图片获取子单元，用于根据所述目标urlkey标识对应的目标沙盒地址，获取并显示所述当前需要显示的图片对应的目标预览图片。
119.可选的，目标预览图片获取子单元可以包括：
120.框架创建子单元，用于利用image provider，创建图片加载框架；
121.框架利用子单元，用于利用所述图片加载框架以及所述目标urlkey标识对应的目标沙盒地址，显示并缓存目标预览图片。
122.可选的，发送单元可以包括：
123.通道利用子单元，用于通过预先创建的处理通道，将所述显示请求发送至原生平台；
124.在此基础上，接收单元可以包括：
125.地址接收子单元，用于通过所述处理通道，接收所述原生平台返回的所述预览图片对应的沙盒地址。
126.本技术实施例提供的基于flutter的图片预览装置可应用于基于flutter的图片预览设备，如pc终端、移动端及手机端等。可选的，图3示出了基于flutter的图片预览设备的硬件结构框图，参照图3，基于flutter的图片预览设备的硬件结构可以包括：至少一个处理器1，至少一个通信接口2，至少一个存储器3和至少一个通信总线4；
127.在本技术实施例中，处理器1、通信接口2、存储器3、通信总线4的数量为至少一个，且处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；
128.处理器1可能是一个中央处理器cpu，或者是特定集成电路asic(application specific integrated circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；
129.存储器3可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatile memory)等，例如至少一个磁盘存储器；
130.其中，存储器存储有程序，处理器可调用存储器存储的程序，所述程序用于：
131.在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像；
132.将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；
133.接收所述原生平台返回的所述预览图片对应的沙盒地址；
134.根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
135.可选地，所述程序的细化功能和扩展功能可参照上文描述。
136.本技术实施例还提供一种可读存储介质，该可读存储介质可存储有适于处理器执行的程序，所述程序用于：
137.在需要显示图片时，生成显示请求，所述显示请求包括所述图片的地址，所述图片中包含人脸图像；
138.将所述显示请求发送至原生平台，以供所述原生平台基于所述显示请求对所述图片进行人脸识别，得到识别结果，并根据识别结果及所述显示请求对所述图片进行切割，得到预览图片，将所述预览图片存储于沙盒中；
139.接收所述原生平台返回的所述预览图片对应的沙盒地址；
140.根据所述沙盒地址，获取所述预览图片并显示所述预览图片。
141.可选地，所述程序的细化功能和扩展功能可参照上文描述。
142.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
143.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。
144.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。本技术的各个实施例之间可以相互结合。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。