网络图片展示方法、装置和电子终端与流程

本发明涉及互联网应用开发技术领域，具体而言，涉及一种网络图片展示方法、装置和电子终端。

背景技术：

在ios等系统开发中经常遇到需要对网络图片进行圆角等参数绘制的情况，通常采用的绘制方法主要包括两种，一种是在每个图片视图中直接采用ios等系统提供的圆角方法来绘制，但此种方法可能会导致离屏渲染等问题出现，加之，如果在同一图片视图中存在大量圆角的子视图将会引发严重性能问题，进而导致界面滑动不流畅，用户体验差。另一种常用方法是提供一张中间透明的固定圆角蒙版图，该方法虽不会触发离屏渲染，但每次需要将蒙版图加入到工程里，而且针对不同半径的圆角则需要不同蒙版图，处理过程相对较为麻烦。因此，针对现有技术中存在的问题，如何简化网络图片的圆角等参数绘制流程，同时又不会造成离屏渲染的问题出现，已成为本领域技术人员急需解决的技术问题。

技术实现要素：

有鉴于此，本发明实施例提供一种网络图片展示方法、装置和电子终端，能有效解决上述问题，同时还能节约网络图片展示过程中的线程开销，避免电子终端中内存持续增长而无法及时释放的问题。

本发明较佳实施例提供一种网络图片展示方法，应用于基于sdwebimage框架的电子终端，所述方法包括：

创建包括key的图片视图并调用图片下载函数以下载网络图片；

读取所述图片视图中的key并根据所述key中的图片绘制参数对下载完成的网络图片进行绘制；

对完成绘制的网络图片进行解码并通过所述图片视图进行展示。

在本发明较佳实施例的选择中，所述方法还包括：

根据所述sdwebimage框架下的网络图片缓存方式将完成绘制的网络图片缓存至所述电子终端中的内存和硬盘中。

在本发明较佳实施例的选择中，所述图片视图的key通过以下步骤生成：

读取所述图片视图的url，并将网络图片的图片绘制参数以前缀的形式拼接至所述url以生成所述图片视图的key。

在本发明较佳实施例的选择中，在调用图片下载函数以下载网络图片的步骤之前，所述方法还包括：

根据所述key中的图片视图的url查找所述内存中是否缓存有所述网络图片；

若所述内存中缓存有所述网络图片，则直接回调该网络图片并通过所述图片视图进行展示；

若所述内存中未缓存有所述网络图片，则执行调用图片下载函数以下载网络图片的步骤。

在本发明较佳实施例的选择中，若所述内存中未缓存有所述网络图片，所述方法还包括：

根据所述key中的图片视图的url继续查找所述硬盘中是否保存有所述网络图片；

若所述硬盘中保存有所述网络图片，则直接回调该网络图片并通过所述图片视图进行展示；

若所述硬盘中未保存有所述网络图片，则执行调用图片下载函数以下载网络图片的步骤。

本发明较佳实施例还提供一种网络图片展示装置，应用于基于sdwebimage框架的电子终端，所述装置包括：

视图创建模块，用于创建包括key的图片视图并调用图片下载函数以下载网络图片；

参数绘制模块，用于读取所述图片视图中的key并根据所述key中的图片绘制参数对下载完成的网络图片进行绘制；

图片展示模块，用于对完成绘制的网络图片进行解码并通过所述图片视图进行展示。

在本发明较佳实施例的选择中，所述装置还包括：

图片缓存模块，用于根据所述sdwebimage框架下的网络图片缓存方式将完成绘制的网络图片缓存至所述电子终端中的内存和硬盘中。

在本发明较佳实施例的选择中，所述参数绘制模块包括：

key生成单元，用于读取所述图片视图的url，并将网络图片的图片绘制参数以前缀的形式拼接至所述url以生成所述图片视图的key。

本发明较佳实施例还提供一种电子终端，基于reactnative平台实现，所述电子终端包括存储器、处理器及上述的网络图片展示装置，所述网络图片展示装置安装于所述存储器并包括一个或多个由所述处理器执行的软件功能模块。

本发明较佳实施例还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序在执行时实现上述的网络图片展示方法中的步骤。

与现有技术相比，本发明在sdwebimage框架加载并展示网络图片的过程中，对下载完成后的网络图片直接进行绘制处理后再进行解码展示，从而能够避免增加额外的线程开销，以及电子终端中内存持续增大而无法有效释放的问题。

除此之外，本发明能够有效避免电子终端运行卡顿、不流畅的问题出现，改善用户体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的网络图片展示方法和装置的应用场景示意图。

图2为图1中所示的电子终端的方框示意图。

图3为本发明实施例提供的网络图片展示方法的流程示意图。

图4为本发明实施例提供的网络图片展示装置的方框结构示意图。

图标：10-电子终端；100-网络图片展示装置；110-视图创建模块；120-参数绘制模块；130-图片展示模块；140-图片缓存模块；200-存储器；300-存储控制器；400-处理器；20-网络；30-服务器。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

如图1所示，是本发明实施例提供的一种网络图片展示方法和装置的应用场景示意图。该应用场景可以包括电子终端10、网络20和服务器30，其中，电子终端10可以为多个。所述服务器30与多个所述电子终端10之间可通过所述网络20实现彼此之间的通信连接。

可选地，所述电子终端10可以是，但不限于，智能手机、个人电脑(personalcomputer，pc)、平板电脑、个人数字助理(personaldigitalassistant，pda)、移动上网设备(mobileinternetdevice，mid)等。所述网络20可以是，但不限于，有线网络或无线网络。所述服务器30可以是，但不限于，web(网站)服务器、数据服务器等，还可以是电脑、移动上网设备(mobileinternetdevice，mid)等具有处理功能的电子设备。

进一步地，所述电子终端10包括网络图片展示装置100、存储器200、存储控制器300以及处理器400。其中，所述存储器200、存储控制器300、处理器400各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件之间通过一条或多条通讯总线或信号线实现电性连接。所述网络图片展示装置100包括至少一个可以软件或固件的形式存储于所述存储器200中或固化在所述电子终端10的操作系统中的软件功能模块。所述处理器400在所述存储控制器300的控制下访问所述存储器200，以用于执行所述存储器200中存储的可执行模块，例如所述网络图片展示装置100所包括的软件功能模块及计算机程序等。

可以理解，图2所示的结构仅为示意，所述电子终端10还可包括比图2中所示更多或者更少的组件，或者具有与图2所示不同的配置。图2中所示的各组件可以采用硬件、软件或其组合实现。

请结合参阅图3，本发明实施例还提供一种可应用于基于sdwebimage框架的电子终端10的网络图片展示方法，所述方法有关的流程所定义的方法步骤可以由所述处理器400实现。下面将对图3所示的具体流程进行详细阐述。

步骤s110，创建包括key的图片视图。

首先需要说明的是，所述sdwebimage框架是目前ios系统开发人员常用的第三方图片处理框架，能够实现图片的异步加载和显示。同时，该sdwebimage框架中设置有图片缓存策略。具体地，在调用该sdwebimage框架进行图片处理时，入口setimagewithurl:placeholderimage:options:会先把placeholderimage显示，然后函数sdwebimagemanager根据所述图片视图的key开始处理图片。应注意，本实施例所述的图片视图的key通过以下步骤实现。

(1)创建图片视图uiimageview。由于每个需要加载网络图片的图片视图uiimageview都会有对应的url，其中，所述图片视图的url也是作为从缓存中查找对应的缓存对象的方式。

(2)生成所述图片视图的key。所述图片视图的key由该图片视图的url和图片绘制参数拼接而成。例如，通过调用cachekeyfilter将所述图片绘制参数转换成字符串，然后以前缀的形式拼接至所述图片视图的url，其中，所述图片绘制参数包括圆角半径radius、图片尺寸等。应理解，所述key中的图片绘制参数可以为空。

本实施例中，所述包括key的图片视图的创建方法无需写子类，而是直接调用基类即可实现网络图片的绘制、处理，实现方便。

步骤s120，根据key中的图片视图的url查找内存中是否缓存有网络图片，若所述内存中未缓存有所述网络图片，则执行步骤s130，反之，则执行步骤s140。

步骤s130，直接回调该网络图片并通过图片视图进行展示。

本实施例中，在得到所述包括key的图片视图后，对所述key进行解析以得到所述图片视图的url，再根据所述图片视图的url先从所述电子终端10的内存中查找是否缓存有对应的网络图片，若有，则直接回调该网络图片，并通过所述图片视图进行展示。

例如，首先通过函数sdimagecachedelegate回调imagecache:didfindimage:forkey:userinfo:到函数sdwebimagemanager；再通过函数sdwebimagemanagerdelegate回调webimagemanager:didfinishwithimage:到uiimageview+webcache等前端展示所述网络图片。

步骤s140，根据key中的图片视图的url继续查找硬盘中是否保存有网络图片，若所述硬盘中保存有所述网络图片，则执行步骤s150，反之，则执行步骤s160。

步骤s150，直接回调该网络图片并通过图片视图进行展示。

具体地，如果所述电子终端10的内存中未缓存有所述网络图片，则生成函数nsinvocationoperation添加到队列，以查找硬盘中是否缓存有所述网络图片。

其中，在根据图片视图的url在硬盘缓存目录下尝试读取对应的图片文件时，如果该操作从硬盘读取到了所述网络图片，那么将该网络图片添加到内存缓存中，再回调并通过所述图片视图进行展示。例如，可通过函数sdimagecachedelegate回调imagecache:didfindimage:forkey:userinfo:实现。应注意，在将所述网络图片添加到所述内存缓存时，如果内存过小，可先清空内存再进行缓存。

步骤s160，调用图片下载函数以下载网络图片。

具体地，如果从所述硬盘的缓存目录中也未读取到所述网络图片，则说明所述电子终端10的所有缓存中均不存在所述网络图片，则需要对该网络图片进行下载，具体过程如下。

首先回调imagecache:didnotfindimageforkey:userinfo:，共享或重新生成一个下载器sdwebimagedownloader开始下载网络图片。其中，网络图片下载由nsurlconnection来做，实现相关delegate来判断该网络图片具体下载进程，如下载中、下载完成和下载失败等。

步骤s170，读取图片视图中的key并根据key中的图片绘制参数对下载完成的网络图片进行绘制。

具体地，在完成所述网络图片的下载时，对所述图片视图中的key进行解析，判断该key中是否包含有图片绘制参数的前缀字符串，若有，则根据所述key中图片绘制参数对所述网络图片进行绘制。应注意，若所述key中未包含图片绘制参数，则直接根据系统中默认的图片处理方式对网络图片进行处理即可。

本实施例中，在下载完成的网络图片实现参数绘制时，由于该绘制过程还在下载的子线程中，因此，整个网络图片的绘制过程无需额外的线程开销，也无需在主线程去处理，避免了主线程卡顿、不流畅的现象发生。

步骤s180，对完成绘制的网络图片进行解码并通过图片视图进行展示。

具体地，在完成网络图片的绘制后，将其交给sdwebimagedecoder做图片解码处理。图片解码处理通过函数nsoperationqueue完成，可避免拖慢主线程ui，并在主线程notifydelegateonmainthreadwithinfo:宣告解码完成时，通过函数imagedecoder:didfinishdecodingimage:userinfo:回调给sdwebimagedownloader。再通过imagedownloader:didfinishwithimage:回调给函数sdwebimagemanager以告知其网络图片下载完成，接着通知所有的downloaddelegates下载完成，最后将解码后的网络图片通过所述图片视图进行展示。

步骤s190，根据sdwebimage框架下的网络图片缓存方式将完成绘制的网络图片缓存至电子终端10中的内存和硬盘中。

具体地，将完成绘制的网络图片保存到sdimagecache中，其中，内存缓存和硬盘缓存同时保存。应注意，将该网络图片文件写入硬盘时，可以通过函数nsinvocationoperation单独完成，从而避免拖慢主线程。

应注意，通过对完成绘制的网络图片进行缓存后，便于后续直接调用而无需再次对该网络图片再次进行处理，即便是需要调用原始未经绘制的网络图片，也可通过不同的cachekey进行调用。

进一步地，基于上述描述，本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序在执行时实现上述图3对应的方法实施例中描述的各个步骤。

请结合参阅图4，本发明实施例还提供一种可应用于所述电子终端10的网络图片展示装置100。所述网络图片展示装置100包括视图创建模块110、参数绘制模块120、图片展示模块130和图片缓存模块140。

所述视图创建模块110，用于创建包括key的图片视图并调用图片下载函数以下载网络图片。具体地，在本实施例中，所述视图创建模块110可用于执行图3中的步骤s110和步骤s160，具体的操作方法可参考步骤s110或步骤s160的详细描述。

可选地，所述视图创建模块110还包括key生成单元。所述key生成单元，用于读取所述图片视图的url，并将网络图片的图片绘制参数以前缀的形式拼接至所述url以生成所述图片视图的key。

所述参数绘制模块120，用于读取所述图片视图中的key并根据所述key中的图片绘制参数对下载完成的网络图片进行绘制。具体地，在本实施例中，所述参数绘制模块120可用于执行图3中的步骤s170，具体的操作方法可参考步骤s170的详细描述。

所述图片展示模块130，用于对完成绘制的网络图片进行解码并通过所述图片视图进行展示。具体地，在本实施例中，所述图片展示模块130可用于执行图3中的步骤s180，具体的操作方法可参考步骤s180的详细描述。

所述图片缓存模块140，用于根据所述sdwebimage框架下的网络图片缓存方式将完成绘制的网络图片缓存至所述电子终端10中的内存和硬盘中。具体地，在本实施例中，所述图片缓存模块140可用于执行图3中的步骤s190，具体的操作方法可参考步骤s190的详细描述。

综上所述，本发明实施例提供的网络图片绘制方法、装置和电子终端10，通过在sdwebimage框架进行网络图片下载的子线程中对下载的网络图片进行绘制，从而能够有效避免增加额外的线程开销以及内存持续增长无法及时释放的问题。缓解主线程运行卡顿不流畅的现象，改善了用户体验。

除此之外，本发明还能够缓解sdwebimage框架在进行图片处理时易出现主线程卡顿、不流畅的现象，改善了用户体验，且该方法简单，适用性强。

在本发明的描述中，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他方式实现。以上所描述的装置和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的预设数量个实施例的装置、方法和计算机程序产品可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分。所述模块、程序段或代码的一部分包含一个或预设数量个用于实现规定的逻辑功能。

也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。