CN114860141A - 图像显示方法、装置、电子设备及计算机可读介质 - Google Patents

Abstract

本申请公开了一种图像显示方法、装置、电子设备及计算机可读介质，涉及图像技术领域，方法包括：在显示区域内显示预设图像的情况下，当检测到针对显示区域的页面滚动操作时，基于页面滚动操作，确定待渲染的目标图像数据；对目标图像数据执行第二渲染操作，第一渲染操作的处理速度高于第二渲染操作的处理速度；当检测到目标图像数据对应的目标页面区域滑动至显示区域时，若第二图像未完成且第一图像已完成，将第一图像在显示区域内显示。由于，第一渲染操作的操作速度相比第二渲染操作的处理速度更快，第一渲染操作完成速度更快，可以将第一渲染操作得到的第一图像在显示区域内显示。所以，可以避免造成卡顿。

Description

图像显示方法、装置、电子设备及计算机可读介质

技术领域

本申请涉及图像技术领域，更具体地，涉及一种图像显示方法、装置、电子设备及计算机可读介质。

背景技术

目前，电子设备的屏幕能够滚动显示多个页面，例如，在屏幕显示一个页面的时候，该页面的后续页面的内容，可以通过滚动的方式进入屏幕的显示区域内显示。然而，由于滚动的速度过快或者显示内容的渲染速度过慢，则在需要显示该显示内容的时候，该显示内容若未渲染完成，会导致白屏，闪屏，卡顿等现象，流畅性很低，用户体验较差。

发明内容

本申请提出了一种图像显示方法、装置、电子设备及计算机可读介质，以改善上述缺陷。

第一方面，本申请实施例提供了一种图像显示方法，包括：在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据；对所述目标图像数据执行第二渲染操作；响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，其中，所述第一图像为预先基于第一渲染操作对目标图像数据处理得到的图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像，第一渲染操作的处理速度高于所述第二渲染操作的处理速度，基于页面加载顺序，所述目标页面区域位于所述预设图像对应的预设页面区域之后。

第二方面，本申请实施例还提供了一种图像显示装置，包括：确定单元、渲染单元和显示单元。确定单元，用于在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据。渲染单元，用于对所述目标图像数据执行第二渲染操作。显示单元，用于响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，其中，所述第一图像为预先基于第一渲染操作对目标图像数据处理得到的图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像，第一渲染操作的处理速度高于所述第二渲染操作的处理速度，基于页面加载顺序，所述目标页面区域位于所述预设图像对应的预设页面区域之后。

第三方面，本申请实施例还提供了一种电子设备，包括：一个或多个处理器；存储器；一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于执行上述方法。

第四方面，本申请实施例还提供了一种计算机可读介质，所述可读存储介质存储有处理器可执行的程序代码，所述程序代码被所述处理器执行时使所述处理器执行上述方法。

第五方面，本申请实施例还提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现上述方法。

本申请提供的图像显示方法、装置、电子设备及计算机可读介质，在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据，然后，对所述目标图像数据执行第二渲染操作，当检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域时，若所述第二渲染操作未完成且所述第一渲染操作完成，将所述第一渲染操作渲染得到的第一图像在所述显示区域内显示。由于，第一渲染操作的操作速度相比第二渲染操作的处理速度更快，所以在第二渲染操作未完成的时候，第一渲染操作已经完成，可以将第一渲染操作得到的第一图像在显示区域内显示。所以，可以避免在待渲染的目标图像数据对应的目标页面区域滑动至所述显示区域时，由于第二图像未渲染完成，导致该第二图像无法显示而造成卡顿。

本申请实施例的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请实施例而了解。本申请实施例的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1(a)示出了本申请一实施例提供的页面的内容的布局的示意图；

图1(b)示出了本申请一实施例提供的页面的内容的布局的示意图；

图2示出了本申请另一实施例提供的页面的内容的布局的示意图；

图3示出了本申请又一实施例提供的页面的内容的布局的示意图；

图4示出了本申请实施例提供的图像渲染架构的框图；

图5示出了本申请一实施例提供的图像显示方法的方法流程图；

图6示出了本申请一实施例提供的显示区域的显示内容的示意图；

图7示出了本申请另一实施例提供的显示区域的显示内容的示意图；

图8示出了本申请另一实施例提供的图像显示方法的方法流程图；

图9示出了本申请一实施例提供的显示区域的多个子区域的示意图；

图10示出了本申请一实施例提供的页面区域的示意图；

图11示出了本申请一实施例提供的画布、绘制缓冲区、缓冲区队列、无限画布的示意图；

图12示出了本申请一实施例提供的显示区域、无限画布以及缓冲区队列的对应关系；

图13示出了本申请另一实施例提供的显示区域、无限画布以及缓冲区队列的对应关系；

图14示出了本申请一实施例提供的画布、绘制缓冲区、缓冲区队列、模糊缓冲区、无限画布的示意图；

图15示出了本申请又一实施例提供的显示区域的显示内容的示意图；

图16示出了本申请再一实施例提供的显示区域的显示内容的示意图；

图17示出了本申请另一实施例提供的图像显示装置的模块框图；

图18示出了本申请实施例提供的电子设备的结构框图；

图19示出了本申请实施例的用于保存或者携带实现根据本申请实施例的图像显示方法的程序代码的存储单元；

图20示出了本申请实施例提供的计算机产品的模块框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

目前，电子设备的屏幕能够滚动显示多个页面，例如，在屏幕显示一个页面的时候，该页面的相邻页面的内容，可以通过滚动的方式进入屏幕的显示区域内显示。具体地，当需要通过屏幕显示的内容比较多的时候，会将内容进行分页显示。具体地，内容在页面上的显示方式可以是，根据待显示的内容将页面划分为多个行，每个行内用于显示一个子内容。具体地，页面将获取的内容进行布局计算并渲染。其布局的过程就是每个内容在页面内对应的位置，该位置即内容对应的页面内的行序号。

如图1(a)和(b)所所示，该页面对应有行序号h1、h2、h3、h4……每个行序号对应一个子内容，如图1所示，行序号h3对应的子内容是图标1对应的子内容。每个子内容对应的行序号用于表示该子内容在页面上的显示位置，如图1(a)和(b)所示，行序号h1对应的子内容在该页面上的显示位置为在该页面的首行，而在行序号h1对应的子内容在屏幕上的显示位置取决于该页面在屏幕上的显示区域，如图1(a)所示，如果该页面在屏幕上的显示区域为该屏幕的整个显示区域，则该行序号h1对应的子内容在屏幕上的显示位置为该屏幕的显示区域的顶部。如图1(b)所示，如果该页面在屏幕上的显示区域为该屏幕的整个显示区域的下半部分区域，则该行序号h1对应的子内容在屏幕上的显示位置为该屏幕的下半部分区域的顶部，即可以位于屏幕的中间位置。

目前，多个页面的内容在屏幕上的显示方式包括分页形式和瀑布流形式。

如图2所示，图2示出了分页形式的示意图。多个页面内容在屏幕上分页显示，每个分页使该页面的内容能够在屏幕上完整显示，然后用户点击下一页或者上一页对应的操作按键，能够在屏幕上显示当前页面的下一页或上一页内容。从而，用户在对页面上的内容处理的时候，将当前页面的内容处理完成之后，再通过点击进入下一页进行处理下一页的内容。

但是，用户在处理分页形式的内容存在操作频繁的缺陷。如果用户处理的内容量比较大并且用户处理的速度比较快的情况下，单页如果内容量太小将会导致业务人员频繁翻页。尤其是在用户通过键盘处理内容的场景下，业务人员将不得不频繁使用鼠标点击下一页按钮，以进入当前页面的下一页。则用户需要不断地在鼠标和键盘之间切换，操作繁琐。

如图3所示，图3示出了瀑布流形式的示意图。即该瀑布流形式为滚动屏幕的瀑布流形式，即由JavaScript通过判断是否即将处理当前页面最后几条内容，如果处理内容即将是页面底部内容，将自动加载下一页内容到页面底部，实现无需手动换页加载内容的效果。如图3所示，该显示界面内包括滚动条，滚动条的上下滚动操作能够实现屏幕的滚动操作，从而实现不同的页面的内容在屏幕上显示。其中，屏幕的滚动操作，即该滚动条的控制可以通过鼠标、键盘或者触摸屏等输入设备，当屏幕为触摸屏的时候，用户可以直接在屏幕上输入滑动手势实现屏幕滚动操作，例如，向上滑动或向下滑动，但是，现有的控制屏幕的滚动操作的方式，滚动的距离往往是固定设置的，例如，鼠标滚动的步数与屏幕的滚动距离成一定关系，比如，鼠标滚动10步，屏幕向上或向下移位100个像素。

因此，在页面切换或滚动页面的时候，基于当前的页面滚动操作，当前页面之后的页面的内容在屏幕上显示，具体地，待显示的内容会在渲染完成之后在屏幕上显示。如图4所示，图4示出了图像的渲染过程，CPU获取客户端发送的待显示的图像内容，解码之后获取解码之后的图像数据，将图像数据发送至GPU，GPU渲染完成后将渲染结果放入帧缓冲区(FrameBuffer)，当然，也可以是CPU视频渲染。其中，帧缓冲区是操作系统为屏幕提供的一个接口，其允许上层应用程序在图形模式下直接对显示缓冲区进行读写操作。framebuffer是屏幕对应的一种HAL(硬件抽象层)，提供抽象的统一的操作接口，操作系统可以在该帧缓冲区内对图像数据渲染，随后视频控制器会按照屏幕刷新信号(即HSync信号)逐行读取帧缓冲区的数据，经过数模转换传递给屏幕显示。

然而，发明人在研究中发现，由于滚动的速度过快或者显示内容的渲染速度过慢，则在需要显示该显示内容的时候，该显示内容若未渲染完成，会导致白屏，闪屏，卡顿等现象，流畅性很低，用户体验较差。

因此，为了克服上述缺陷，本申请实施例提供了一种图像显示方法、装置、电子设备及计算机可读介质，以改善页面滚动显示过程中出现的白屏，闪屏，卡顿等现象。

请参阅图5，图5示出了本申请实施例提供的一种图像显示方法，该方法应用于电子设备，电子设备包括屏幕，具体地，该方法可以包括：S501至S503。

S501：在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据。

作为一种实施方式，如图6所示，假设有多个页面可以在显示区域601内显示，并且通过页面滚动操作可以将不同的页面的不同内容在显示区域601内显示，如图6所示，从上到下的页面可以分别命名为页面1、页面2和页面3，当前在显示区域601内显示的内容为页面3的全部图像，如果需要将页面2的内容在显示区域内显示，则需要通过页面滚动操作将页面2滚动至显示区域内，需要说明的是，可以是页面2的部分区域先进入显示区域内，同时，页面2进入到显示区域内的区域的尺寸与页面3的移出显示区域的页面区域的尺寸是一致的，例如，通过页面滚动操作，页面3的底部的1/4的区域被移出显示区域，则页面2的底部的1/4的区域被移入显示区域，所以，显示区域的顶部1/4的区域显示的是页面2的底部的1/4的区域的图像，显示区域的其他的区域显示的是页面3的顶部的3/4的区域内的图像。

所以，在显示区域内显示预设图像的情况下，可以检测针对显示区域的页面滚动操作，其中，预设图像可以是支持显示的多个页面中的任意一个页面的整体区域的图像或者至少两个页面的多个区域组合成的图像。作为一种实施方式，能够在显示区域内显示的每个页面的每个子区域都对应有位置标识，具体地，各个页面的区域尺寸与显示区域的尺寸匹配，将页面的整体区域划分为多个行，例如，划分为N个行，则页面的区域被划分为第1行、第2行、第3行…第N行，每行对应页面的一个子页面区域，N行子页面区域可以组合成页面的整体区域，也就是说每个子页面区域都对应一个或多个行标号，具体地，基于每个子页面区域所包含的行的数量而设定。另外，显示区域也可以被划分为N行，所以一个显示区域能够完整的显示一个页面的N行的图像内容，也可以是多个页面的多个行组合成的N行子页面区域对应的图像，所以，基于该页面内的每个子页面区域的位置标识，能够确定每个页面的每个子页面区域在多个页面排布中的位置。

基于该位置标识就能够确定待渲染的目标图像数据，具体地，当检测到针对所述显示区域的页面滚动操作时，确定该页面滚动操作对应的滚动距离，确定预设图像对应的预设页面区域的位置标识，例如，假设页面滚动方向为向下滚动，即新的内容从显示区域的顶部进入该显示区域。基于该页面滚动方向，可以确定多个页面的滚动方向为基于页面的页码的递减顺序滚动，例如，当前显示的页面是页面10，随着页面滚动操作，依次是页面9、页面8、页面7、、、、页面1滚动至显示区域内，那么可以将显示区域当前显示的预设图像对应的预设页面区域在多个页面排布中的位置作为起点位置，假设起点位置为第3页的第x1行，其为第3页的最顶部的子页面区域，然后，确定该页面滚动操作对应的滚动距离，假设该页面滚动操作为用户输入显示区域的滑动操作，确定该滑动操作的滑动距离，例如，该滑动距离为s行(即行数为s)，从而可以确定基于该页面滚动操作确定的页面区域的滚动长度也是s行。例如，该起点位置为第3页的第x1行，确定的结束位置为第2页的第x2行，该第3页的第x1行与第2页的第x2行之间的距离可以等于s行。假设，显示区域当前显示有预设图像，且预设图像在显示区域内的显示位置为第一位置，则经过该s行的滚动距离之后，第2页的第x2行的页面区域对应的图像可以在该显示区域的第一位置处显示。

所以，基于各个页面的各个子区域的位置标识，以及页面滚动操作而触发的页面的滚动距离，就能够确定在当前显示的预设图像之外的需要在显示区域内显示的内容，即可以通过页面滚动操作确定预设图像对应的预设页面区域之后的目标页面区域，并将该目标页面区域对应的图像数据作为待渲染的目标图像数据。如图7所示，假设滚动距离为D，所确定的待渲染的目标图像数据为当前显示的预设图像的预设页面区域(假设是页面3的整体区域)之后的高度为D’的页面区域对应的图像数据，其中，D和D’相同，，如图7所示，所确定的待渲染的目标图像数据为页面2的底部区域的高度为D’的页面区域对应的图像数据。

作为另一种实施方式，为了获得更好的滚动流畅度，往往采用缓存一定图像数据的方式，也就是说，在显示区域内显示预设图像的时候，该预设图像对应的缓冲图像也被渲染完成，则确定待渲染的目标图像数据的时候，采用上述方式确定起点位置之后，要在起点位置的基础上，基于滚动距离和缓冲图像对应的区域位置确定结束位置，如图7所示，假设缓冲图像对应的区域大小为M行，则在起点位置的基础上，沿着页面滚动方向，向后确定M行以及滚动距离的位置作为结束位置，假设滚动距离为X行，所以，结束位置之前的X行区域内的图像数据作为待渲染的目标图像数据，该结束位置之前的X行区域作为目标页面区域，如图7所示的D’内的区域为目标页面区域，该目标页面区域在预设图像移动出显示区域的时候，不会立马进入显示区域，而是在缓冲图像的第一区域内的图像被移出显示区域的时候，目标页面区域进入显示区域的情况下，显示该目标图像。其中，在显示区域601下方的图像表示被移出显示区域的内容。

具体地，确定待渲染的目标图像数据的方式可以参考后续实施例，后续实施例基于滑动距离或滑动出显示区域的图像来描述确定待渲染的目标图像数据的实施方式。

S502：对所述目标图像数据执行第二渲染操作。

作为一种实施方式，电子设备可以执行第一渲染操作和第二渲染操作，第一渲染操作和第二渲染操作的执行时机可以不同也可以相同。具体地，在确定目标图像数据之后，对该目标图像数据执行第二渲染操作，而对该目标图像数据执行第一渲染操作的时机可以是在检测到本次的页面滚到操作之前，也可以是在确定目标图像数据之后。

在一些实施例中，可以是在确定目标图像数据之后执行第一渲染操作，例如，页面滚动操作对应的多个页面为实时获取的页面，示例性地，该页面为网页浏览页面，页面的内容需要在显示之前由网络下载。在另一些实施例中，该页面滚动操作对应的多个页面为预先获取的，所以，可以在获取到页面的图像数据的时候就执行第一渲染操作。具体地，后续实施例会针对该两种方式展开描述。

需要说明的是，第一渲染操作用于处理所述目标图像数据得到第一图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像。具体地，第一渲染操作和第二渲染操作都能够对目标图像数据执行纹理渲染等操作得到渲染后的图像，但是，第一渲染操作和第二渲染操作的处理速度不同，第一渲染操作的处理速度高于所述第二渲染操作的处理速度。具体地，可以是第一渲染操作和第二渲染操作的处理对象相同，也就是说，第一渲染操作和第二渲染操作都是处理所有的目标图像数据，但是第一渲染操作和第二渲染操作的渲染算法的计算复杂度不同，例如，第一渲染操作会将目标图像数据压缩之后再渲染而第二渲染操作不对目标图像数据压缩，再例如，第二渲染操作对目标图像数据的显示效果优化，而第一渲染操作不执行优化操作。

另外，还可以是第一渲染操作和第二渲染操作的处理对象不相同，即第一渲染操作处理目标图像数据中的第一部分数据，第二渲染操作目标图像数据中的第二部分数据，第一部分数据小于第二部分数据，例如，第二部分数据为完整的目标图像数据，第一部分数据为目标图像中目标对象对应的图像数据，该目标对象可以是目标图像内的指定类型的目标物体的图像，例如，可以是确定目标图像中的目标物区域，然后，该目标物区域对应的图像数据作为目标图像中目标对象对应的图像数据，从而只对该目标对象对应的图像数据执行渲染，以得到第一图像，虽然第一图像并没包括目标图像的所有内容，但是，如果目标对象是用户比较关心的内容，则可以在损失图像完整的情况下，加快图像的渲染速度。具体地，识别图像采集装置所采集的图像内的目标物并将所述目标物归类，具体地，可以是采用目标检测算法或者目标提取算法获取目标物。则具体的可以是通过目标提取或者聚类算法提取出图像采集装置采集的图像内的所有轮廓线信息，然后再在预先学习的模型中查找到每个轮廓线对应的物体的类别，其中，该学习模型对用一个匹配数据库，该匹配数据库内存储有多个轮廓线信息和每个轮廓线信息对应的类别，其中，该类别包括人体、动物、山川、河流、湖面、建筑物、道路等。

S503：响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域时，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示。

需要说明的是，显示区域在显示不同页面或同一页面的不同区域的内容的时候，显示区域内所对应的内容对应不同的区域位置，例如，随着页面滚动操作的持续，基于页面加载顺序，预设图像对应的预设页面区域之后的页面区域的内容依次进入到显示区域内，例如，显示区域内显示页面1的时候，页面1的第一页面区域位于显示区域内，当显示区域内显示页面2的时候，页面2的第二页面区域位于显示区域内，因此，当目标页面区域滑动至所述显示区域时，目标页面区域对应的目标图像数据的渲染后的图像需要在显示区域内显示。

具体地，当检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域时，电子设备确定第二图像和第一图像是否已被渲染完成，如果第二图像未被渲染完成且所述第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，具体地，确定目标页面区域在显示区域内对应的目标显示位置，然后，在目标显示位置将第一图像显示。如果第二图像已完成，将所述第二图像在所述显示区域内显示。

因此，在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据，然后，分别对所述目标图像数据执行第一渲染操作和第二渲染操作，当检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域时，若所述第二渲染操作未被渲染完成且所述第一渲染操作完成，将所述第一渲染操作渲染得到的第一图像在所述显示区域内显示。由于，第一渲染操作的操作速度相比第二渲染操作的处理速度更快，所以在第二渲染操作未被渲染完成的时候，第一渲染操作已经完成，可以将第一渲染操作得到的第一图像在显示区域内显示。所以，可以避免在待渲染的目标图像数据对应的目标页面区域滑动至所述显示区域时，由于第二图像未渲染完成，导致该第二图像无法显示而造成卡顿。

请参阅图8，图8示出了本申请实施例提供的一种图像显示方法，该方法应用于电子设备，电子设备包括屏幕，具体地，该方法可以包括：S801至S804。

S801：在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据。

作为一种实施方式，可以将电子设备的屏幕的显示区域划分为多个子区域，在页面滚动操作的时候，基于该多个子区域确定待渲染的目标图像数据，例如，预设图像在显示区域内显示，如前所述，多个页面中的每个页面被划分为多个子页面区域，且每个子页面区域对应显示区域的一个子区域。例如，每个页面的大小相同，如显示区域可以是一个包含第一侧边和第二侧边的矩形，第二侧边的方向与电子设备的屏幕的左右方向一致，第一侧边与电子设备的屏幕的顶部与底部之间的方向一致，也就是说，第一侧边可以是显示区域的高度，第二侧边可以是显示区域的宽度，每个页面区域对应于一个子区域，即一个页面区域与一个子区域的尺寸相同，例如，页面区域包括第一长度和第二长度，第一长度与第一侧边同向，且页面区域的第一长度与子区域的第一侧边方向的长度一致，即页面区域的第一长度为高度，页面区域的高度与子区域的高度相同，页面区域的宽度与子区域的宽度相同。

如图9所示，假设电子设备的屏幕的整体区域包括顶部显示区域602、底部显示区域603和显示区域601，显示区域601可以被划分为4个子区域，分别为第一子区域、第二子区域、第三子区域和第四子区域，其中，顶部显示区域602和底部显示区域603可以不作为显示区域601的一部分，具体地，顶部显示区域602可以固定显示一些内容，例如，显示时间、信号强度、信号类型等信息，底部显示区域603可以显示该页面对应的APP的控件，也就是说，顶部显示区域602和底部显示区域603相对多个页面的内容来说基本不变化。如图10所示，页面被划分为四个子页面区域，分别为第一子页面区域、第二子页面区域、第三子页面区域和第四子页面区域，当该页面在显示区域内完整显示的时候，第一子页面区域在第一子区域内显示，第二子页面区域在第二子区域内显示，第三子页面区域在第三子区域内显示，第四子页面区域在第四子区域内显示。当该页面慢慢滚动至显示区域至完整在显示区域内显示的过程中，该页面的第四子页面区域先进入该显示区域的第一子区域，然后，该第四子页面区域慢慢移动至第四子区域，而其他的子页面区域也逐渐移动至显示区域内。

因此，可以通过设置页面滚动操作的滚动距离与页面的各个子页面区域在显示区域内的滚动距离，确定待显示的目标图像，例如，滚动距离为两个子页面区域，则待渲染的目标图像数据为当前在显示区域内显示的预设图像所对应的子页面区域之后的两个子页面区域内的图像数据。

作为一种实施方式，可以设置一个缓冲区，用于存储各个页面的已被渲染完成的图像。在一个实施例中，可以定义绘制缓冲区，该绘制缓冲区可以是前述的图4中的帧缓冲区，具体地，前述的图4中的缓冲区可以定义为原生缓冲区，各个客户端需要显示的图像在完成渲染之后需要输入到原生缓冲区，等到需要显示的时候，电子设备基于屏幕刷新由原生缓冲区取出并显示。作为一种实施方式，该绘制缓冲区可以是原生缓冲区之外的缓冲区，则在绘制缓冲区内的图像数据的渲染相当于离屏渲染。

作为一种实施方式，在电子设备需要显示某个图像的时候，会将该图像数据发送至缓冲区队列，该缓冲区队列内完成渲染之后，缓冲区队列将渲染完成的图像发送至绘制缓冲区存储，然后，绘制缓冲区将渲染后的图像发送至原生缓冲区，等待显示。则为了避免在页面滚动的时候，渲染操作不够及时而导致当某个页面的至少一个子页面区域内的图像需要被显示的时候，该子页面区域内的图像还未被渲染完成渲染，所以可以缓存一部分图像数据在该页面内。

具体地，设定绘制缓冲区的区域大小大于显示区域的区域大小，例如，以涂鸦或画图场景为例，假设，定义一个画布的宽度为w，高度为h，该画布的尺寸与显示区域的尺寸一致，前述的每个子区域的尺寸为w*h’，其中，h’为h/4。绘制缓冲区的区域大小为w*H，其中，H为n倍的h，例如，n是大于1的有理数，与本申请实施例中，该n为2，也就是说，绘制缓冲区的宽度与画布的宽度一致、高度为画布的高度的两倍，然后，定义一个无限画布，从而可以将多个需要显示的页面的图像内容都对应到该无限画布上，需要说明的是，该无限画布可以是一个逻辑概念，并非是指无限高度的画布，而是该无限画布的高度可以远大于一个画布的高度，例如，该无线画布的高度可以是一个画布的高度的指定倍数，例如，该指定倍数可以是10。具体地，无限画布可以看作是多个画布按照高度方向拼接而成的更大的画布，并且可以为无限画布设置位置坐标，即无限画布中的每个画布可以被划分为多个子页面区域，每个子页面区域对应一个位置标识，每个画布对应一个页面，所以，不同的页面的不同的子页面区域都可以对应无限画布上的一个位置标识，屏幕的显示区域在显示不同的页面内容的时候，显示区域所对应的无限画布上的位置标识也不同。如图11所示，绘制缓冲区用于保存用户当前浏览的内容，即前述的预设图像，例如，用户当前在操作显示区域内输入内容，例如，在输入涂鸦笔划，用户所输入的内容保存在绘制缓冲区内，或者，用户当前在浏览页面的时候，例如，用户在浏览网页，用户打开的页面的内容保存在绘制缓冲区。

作为一种实施方式，缓冲区队列将待渲染的图像渲染之后发送至绘制缓冲区内存储，绘制缓冲区将渲染后的图像先输入前述的原生缓冲区，再由原生缓冲区在屏幕上显示，采用不直接在屏幕上渲染的方式，可以提高电子设备的性能并且能够节省内存消耗，具体地，假设用户绘制了1000个笔划，绘制的每个笔划在屏幕上显示的时候，都会响应一个drawcall指令，其中，draw call为CPU调用图像编程接口(比如OpenGL的glDraw Elements命令)，命令GPU进行渲染的操作。所以，在绘制第1001个笔划时，如果直接渲染到屏幕，需要将1001个笔划渲染到屏幕，有1001个draw call。而如果先渲染到绘制缓冲区，再将绘制缓冲区的内容渲染到屏幕，那么只有2个draw call，即前1000个笔划对应的draw call，以及最新的第1001个笔划对应的draw call。

作为一种实施方式，为兼顾性能与内存，绘制缓冲区的尺寸为画布的L倍，则在显示区域内显示预设图像的情况下，预设图像存储在绘制缓冲区内，绘制缓冲区还存储有缓冲图像，该缓冲图像的大小为(L-1)倍的画布大小，例如，L为2，假设预设图像为第10页的全部内容，缓冲图像为第9页的全部内容，因此，通过预存两页的内容，可以使得页面的滚动更加顺畅。需要说明的是，可以在显示区域内显示预设图像的时候，就将该预设图像对应的缓冲图像在绘制缓冲区内渲染，从而在检测到页面滚动操作的时候，预设图像和缓冲图像都已经渲染完毕，例如，预设图像是第10页的内容，缓冲图像是第9页的内容，页面滚动操作的滚动方向为基于页码的递减方向的滚动，即第10页慢慢滑出显示区域，第9页的内容慢慢滑入显示区域，则在第9页的子页面区域滑入显示区域的时候，第9页的图像已经完成渲染，不会造成卡顿。

需要说明的是，该缓冲图像可以是预先获取的用户输入的内容(例如，笔划)，还可以是用户浏览的网页，则该缓冲页面可以是预先通过网络下载的内容。并且，该缓冲图像可以基于当前所显示的预设图像而确定，例如，确定预设图像对应的预设子页面区域是否为最后的子页面区域，如果是，基于页面加载顺序，从该预设子页面区域之后的页面内确定缓冲图像，如果该预设子页面区域不是最后的子页面区域，确定前一个页面滚动操作的滚动方向，记为历史滚动方向，基于该历史滚动方向，从该预设子页面区域之后的页面内确定缓冲图像。

缓冲区队列与绘制缓冲区对应，也就是说，缓冲区队列渲染完成的图像发送至绘制缓冲区内存储，具体地，缓冲区队列包括多个子缓冲区，可以理解的是，缓冲区队列用于对绘制缓冲区内的图像数据执行渲染操作，渲染后的图像返回至绘制缓冲区内。作为一种实施方式，该每个子缓冲区的宽度为w，高度为h/x，子缓冲区的数量为2x个，例如，x为4。则缓冲区队列与绘制缓冲区对应，包含8个子缓冲区，每个子缓冲区的宽度与画布同宽，高度为画布高度的四分之一。画布滚动时，循环滚动更新这8个子缓冲区的内容。因此，局部更新具有更好的性能。具体地，子缓冲区、无限画布以及显示区域的对应关系如图12所示，假设显示区域内显示的预设图像为第10页面的内容，多个页面在无限画布上的位置用区域坐标表示，例如，{(0,Y1),(w,Y2)}为无限画布上的第10页的第一子页面区域对应的区域坐标，该区域坐标包括第一坐标和第二坐标，该第一坐标为该子页面区域的第一顶点的坐标，第二坐标为该第一顶点的对角线的第二顶点的坐标，具体地，该页面对应有宽度方向和高度方向，例如，无限画布的x轴方向为宽度方向，y轴方向为高度方向，其中，宽度方向和高度方向如图12所示的x和y的方向，每个子页面区域的第一顶点为该子页面区域内的宽度值和高度值的最小的点，每个子页面区域的第二顶点该为子页面区域的宽度值和高度值的最大的点。对于一个页面来说，该页面的y方向上的最小值与y方向上的最大值之差等于h，例如，对于第10页来说，Y1与Y5之间的差值为h，即每个页面的第一子页面区域的第一顶点的高度值与该页面的第四子页面区域的第二顶点的高度值之间的差值为h。

因此，显示区域的第一子区域对应无限画布的第10页的第一子页面区域(其对应的位置坐标是{(0,Y1),(w,Y2)})，显示区域的第二子区域对应无限画布的第10页的第二子页面区域(其对应的位置坐标是{(0,Y2),(w,Y3)})，显示区域的第三子区域对应无限画布的第10页的第三子页面区域(其对应的位置坐标是{(0,Y3),(w,Y4)})，显示区域的第四子区域对应无限画布的第10页的第四子页面区域(其对应的位置坐标是{(0,Y4),(w,Y5)})。基于此对应关系，电子设备可以明确显示区域的各个子区域所显示的内容。缓冲区队列包括多个子缓冲区，以8个为例，该8个子缓冲区的标号分别为Buffer0、Buffer1、Buffer2、Buffer3、Buffer4、Buffer5、Buffer6、Buffer7，该8个子缓冲区所对应的子页面区域分别为Buffer0对应第10页的第一子页面区域、Buffer1对应第10页的第二子页面区域、Buffer2对应第10页的第三子页面区域、Buffer3对应第10页的第四子页面区域、Buffer4对应第9页的第一子页面区域(其对应的位置坐标是{(0,Y5),(w,Y6)})、Buffer5对应第9页的第二子页面区域(其对应的位置坐标是{(0,Y6),(w,Y7)})、Buffer6对应第9页的第三子页面区域(其对应的位置坐标是{(0,Y7),(w,Y8)})、Buffer7对应第9页的第四子页面区域(其对应的位置坐标是{(0,Y8),(w,Y9)})，每个子缓冲区负责对所对应的子页面区域内的图像数据执行渲染操作，然后，将渲染的图像发送至绘制缓冲区内存储。例如，电子设备确定显示区域的第一子区域需要显示第10页的第一子页面区域的图像，根据前述的无限画布的各个子页面区域与子缓冲区的对应关系，可以明确从Buffer0获取渲染后的图像。

具体地，当发生页面滚动操作的时候，上述的对应关系会发生改变，具体地，假设页面滚动操作为滑动手势，确定所述页面滚动操作对应的滑动距离，将该滑动距离记为offset，假设显示区域的指定子区域在无限画布上对应的位置为起始位置，该起始位置对应的区域坐标为{(0,y1),(w,y2)}，该{(0,y1),(w,y2)}中的y1和y2的取值可以参考前述的子页面区域，其中，该指定子区域可以是显示区域内沿页面滚动方向的最靠后的子区域，例如，该页面滚动方向为从上至下，该指定子区域为显示区域的最上面的子区域，即第四子区域，所确定的结束位置为{(0,y1-A),(w,y2-A)}，其中，A基于offset设定，例如，A可以为±offset，具体取决于无限画布的各个子页面区域的区域坐标的变化规律，还基于页面滚动方向。需要说明的是，在前述的存在缓冲图像的情况下，基于页面加载顺序，将所述缓冲子页面区域之后的第一指定区域内的图像数据作为待渲染的目标图像数据，所述第一指定区域的第一长度与所述滑动距离相同，所述第一长度为沿所述第一侧边的长度。其中，第一长度可以是高度，具体地，该A为±(BH+offset)其中，BH为缓冲图像对应的子页面区域的高度。由此，就能够确定待渲染的目标图像数据。

需要说明的是，显示区域当前显示的预设图像的图像数据以及该预设图像对应的缓冲图像的图像数据都在缓冲队列内存储以及执行渲染操作，在渲染完成之后，该预设图像和缓冲图像会被存放于绘制缓冲区内。

另外，如果显示区域当前显示的预设图像对应的并非是首页且也并非最后一页，则可以将缓冲区队列的中间四个子缓冲区存放预设图像数据，将最上的两个子缓冲区存放预设图像的预设页面区域的后两个子页面区域(基于页面序号)对应的图像数据，将最下的两个子缓冲区存放预设图像的预设页面区域的前两个子页面区域(基于页面序号)对应的图像数据。例如，显示区域当前显示的预设图像为第9页的内容，则缓冲区队列的Buffer2、Buffer3、Buffer4和Buffer5依次存储第9页的第一子页面区域的图像数据、第9页的第二页面区域的图像数据、第9页的第三页面区域的图像数据、第9页的第四页面区域的图像数据，Buffer6和Buffer7依次存储第8页的第一页面区域(其对应的位置坐标是{(0,Y9),(w,Y10)})的图像数据、第8页的第二页面区域(其对应的位置坐标是{(0,Y10),(w,Y11)})的图像数据，Buffer1和Buffer0依次存储第10页的第四页面区域的图像数据、第10页的第二页面区域的图像数据。由此，显示区域的当前显示的内容在缓冲区对立的中间的各个缓冲区，且当前显示的内容的前后页面的至少一半的内容都在缓冲区队列内存储。由此，该BH的取值的确定方式为：基于页面滚动方向，确定该显示区域当前显示的图像对应的页面之后的缓冲图像的高度，作为该BH。例如，显示区域当前显示的图像对应的页面为第9页，页面滚动方向为按照页面的页码的递减方向，则该显示区域当前显示的图像对应的页面之后的缓冲图像为第8页的第一页面区域和第二页面区域，所以，BH的取值为h/2。

请参阅图13，假设页面滚动操作的滑动距离为h/2，缓冲图像的高度为h，缓冲区队列的高度为2h，在图12的基础上，第10页面的第一子页面区域和第二子页面区域均从显示区域内滑出，所以，第一子页面区域和第二子页面区域对应的图像未在显示区域内显示，由于滑动距离为h/2，所以第9页面的第一子页面区域和第二子页面区域进入显示区域，因此，显示区域内显示的内容是，第一子区域内显示第10页面的第三子页面区域对应的图像，第二子区域显示第10页面的第四子页面区域对应的图像，第三子区域显示第9页面的第一子页面区域对应的图像，第四子区域显示第9页面的第二子页面区域对应的图像，而由于第10页面的第一子页面区域和第二子页面区域均从显示区域内滑出，并且基于图12可以确定，第10页面的第一子页面区域和第二子页面区域对应的子缓冲队列分别为Buffer0和Buffer1，所以，可以将Buffer0和Buffer1的图像数据清除。滑动距离为h/2，缓冲图像为第9页的所有子页面区域对应的图像，则可以将第9页之后的高度为h/2且宽度为w的区域作为目标页面区域(即基于页面滚动方向所确定的第9页之后的目标页面区域)，例如，页面滚动方向为沿着页面的页码递减的方向滚动，该目标页面区域对应的图像数据为待渲染的目标图像数据，也就是说第8页面的第一子页面区域和第二子页面区域作为目标页面区域，则Buffer0重新对应为{(0,Y9),(w,Y10)}，Buffer1重新对应为{(0,Y10),(w,Y11)}。需要说明的是，可以是在检测到页面滑动操作之后，确定页面滑动操作满足指定条件的情况下，才将页面滑动操作对应的待渲染的目标图像数据发送至缓冲区队列的目标子缓冲区，也才将该目标子缓冲区之前存储的数据清除。具体地，在确定页面滑动操作满足指定条件的情况下，基于页面滑动操作，确定待渲染的目标图像数据，基于前述的方式确定目标图像数据对应的目标子缓冲区，即确定被移动出显示区域的子页面区域，将该子页面区域所对应的子缓冲区作为目标子缓冲区。其中，页面滑动操作满足指定条件可以是滑动距离大于或等于指定距离，还可以是页面滑动操作的滑动时间大于指定时长。于本申请实施例中，确定页面滑动操作对应的滑动距离，若该滑动距离大于或等于指定距离，则判定页面滑动操作满足指定条件。其中，指定距离可以是指定数量个子页面区域的高度，例如，该指定数量可以是2个。

S802：将所述目标图像数据发送至所述缓冲区队列，在所述缓冲区队列内对所述目标图像数据执行第二渲染操作。

作为一种实施方式，对缓冲区队列内的图像数据执行的渲染操作定义为第二渲染操作，该第二渲染操作渲染后得到的图像的画面质量较好，即能满足用户的预设标准，考虑到画面质量与第二渲染操作的处理速度负相关，即画面质量越高，第二渲染操作的处理速度越慢，所以，为了避免在第二渲染操作未被渲染完成的情况下，未有已渲染完成的图像显示而导致卡顿，所以，可以设定模糊缓冲区，从而能够对模糊缓冲区内的图像数据执行第一渲染操作，由前述的实施例可知，该第一渲染操作的处理速度高于第二渲染操作，所以，可以较好避免在第二渲染操作未被渲染完成的情况下，导致卡顿的现象。

作为一种实施方式，假设页面滚动操作用于操作的页面为电子设备已经获取的多个页面，例如，该多个页面是电子设备预先从网络上下载的页面，也可以是，用户基于电子设备的预设APP通过涂鸦或画图的方式绘制的页面，则在基于所述页面滚动操作，确定待渲染的目标图像数据之前，电子设备可以获取该多个页面的图像数据，然后，将所述多个页面的图像数据发送至模糊缓冲区，在所述模糊缓冲区内对每个页面的图像数据执行第一渲染操作。也就是说，在电子设备获取到该页面的时候，就执行第一渲染操作，并且经过第一渲染操作渲染处理后的图像在模糊缓冲区内存储。

作为另一种实施方式，还可以是在确定目标图像数据之后，再执行第一渲染操作，具体地，在基于所述页面滚动操作，确定待渲染的目标图像数据之后，以及在响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示之前，将所述目标图像数据发送至模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作。

在一些实施例中，该所述第一渲染操作处理得到的第一图像的图像质量低于所述第二渲染操作处理得到的第二图像的图像质量。具体地，第一渲染操作和第二渲染操作的处理对象相同，即均是待渲染的目标图像数据的全部数据。区别的是，第二渲染操作执行显示增强处理并且渲染得到第二图像，第一渲染操作不执行显示增强处理而直接将目标图像数据渲染得到第二图像。其中，显示增强处理可以是对待显示的图像的参数优化，其中，参数包括清晰度、锐度、镜头畸变、色彩、解析度、色域范围以及纯度等决定图像质量的参数。于本申请实施中，图像的参数优化包括曝光度增强、去噪、边缘锐化、对比度增加或饱和度增加的至少一种。其中，曝光度增强，用于提高图像的亮度，则可以通过图像的直方图，将亮度值交底的区域增加亮度值，另外，也可以是通过非线性叠加，增加图像亮度。对图像数据去噪用于去除图像的噪声，具体地，图像在生成和传输过程中常常因受到各种噪声的干扰和影响而使图像降质，这对后续图像的处理和图像视觉效应将产生不利影响。噪声种类很多，比如:电噪声，机械噪声，信道噪声和其他噪声。因此，为了抑制噪声，改善图像质量，便于更高层次的处理，必须对图像进行去噪预处理。具体地，可以通过高斯滤波器对图像去噪，其中，高斯滤波器是一种线性滤波器，能够有效的抑制噪声，平滑图像。其作用原理和均值滤波器类似，都是取滤波器窗口内的像素的均值作为输出。其窗口模板的系数和均值滤波器不同，均值滤波器的模板系数都是相同的为1；而高斯滤波器的模板系数，则随着距离模板中心的增大而系数减小。所以，高斯滤波器相比于均值滤波器对图像模糊程度较小。另外，边缘锐化用于使模糊的图像变得更加清晰起来。

在另一些实施例中，该所述第一渲染操作处理得到的第一图像的图像质量低于所述第二渲染操作处理得到的第二图像的图像质量的具体含义为第一渲染操作处理得到的第一图像的分辨率低于所述第二渲染操作处理得到的第二图像的分辨率。也就是说，第一渲染操作包括：降低所述目标图像数据的分辨率并对降低分辨率后的所述目标图像数据渲染得到第一图像，所述第二渲染操作包括保持所述目标图像数据的分辨率不变并对所述目标图像数据渲染得到第二图像。

如图14所示，模糊缓冲区包括多个子模糊区，每个子模糊区对应无限画布的一个画布，即每个子模糊区用于压缩保存一个画布对应的页面的图像，具体地，每个子模糊区为画布等比例压缩后的尺寸，该压缩比可以是1:10，也就是说，假设在获取到用户输入的页面内容(例如，涂鸦或画图下输入的图像)，将该页面的图像发送至模糊缓冲区内额，将各个页面的图像按照前述压缩比压缩之后，得到压缩后的图像数据，再将压缩后的图像数据渲染。例如，画布的尺寸为1080*1920，压缩绘制到后的图像的分辨率为108*192。而第二渲染操作保持所述目标图像数据的分辨率不变，所以得到的第二图像的分辨率为1080*1920。

需要说明的是，缓冲区队列包括多个子缓冲区，电子设备可以针对每个子缓冲区执行第二渲染操作而不必所有的缓冲区队列内的图像一起执行第二渲染操作，能够提高第二渲染操作的执行效率。

S803：响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且所述第一图像已被渲染完成，将所述第一图像在所述显示区域内显示。

由于目标图像数据被第一渲染操作渲染后的第一图像的图像质量低于第二渲染操作渲染后的第二图像的图像质量，所以，第一图像的渲染速度高于第二图像，因此，可以在目标页面区域滑动至所述显示区域，在第二图像未渲染完成的时候，将第一图像在显示区域内显示。

假设第8页面的第一子页面区域{(0,Y9),(w,Y10)}作为目标页面区域，即第8页面的第一子页面区域的图像数据作为目标图像数据，缓冲区队列的Buffer0存储该目标图像数据，电子设备的处理器对Buffer0内的目标图像数据执行第二渲染操作，如果渲染完成，会将渲染得到的第二图像发送至绘制缓冲区，绘制缓冲区等待显示指令(draw call)，将第二图像在显示区域的与第一子页面区域对应的显示位置处显示。所以，当第8页面的第一子页面区域被移动至显示区域，也就是说，在显示区域的第一子区域对应到无限画布的{(0,Y9),(w,Y10)}的时候，也即第一子区域用于显示第8页面的第一子页面区域的图像的时候，电子设备会确定绘制缓冲区内是否存在第二图像，如果不存在，会将第一图像在第一子区域内显示。

需要说明的是，在一些实施例中，如果多个页面的内容是用户输入的，则从第一页面至最后的页面的所有的图像数据都在该图像数据产生的时候就发送至模糊缓冲区执行第一渲染操作，例如，用户在涂鸦的时候，从第一页开始输入笔划，直至输入至第十页，则所有的页面的图像数据都会被发送至模糊缓冲区执行第一渲染操作，所以，前述的“将所述目标图像数据发送至所述模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作”的实施方式还可以是，确定目标图像数据是否已经被成功执行第一渲染操作并已经生成该第一图像，如果是，则不执行“将所述目标图像数据发送至所述模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作”，否则，执行“将所述目标图像数据发送至所述模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作”。

S804：当所述第二图像渲染完成时，若所述第一图像仍然位于所述显示区域内，将所述第一图像替换为所述第二图像。

作为一种实施方式，在缓冲队列内对目标图像数据指定第二渲染操作，在完成第二渲染操作得到第二图像之后，缓冲队列将第二图像发送至绘制缓冲区内存储，所以在确定第二图像是否被渲染完成的时候，确定所述绘制缓冲区内是否存在第二图像；若不存在所述第二图像，将预先被渲染完成的第一图像在所述显示区域内显示。若存在所述第二图像，将所述第二图像发送至帧缓冲区；基于屏幕刷新信号将所述帧缓冲区内的第二图像在所述显示区域内显示。

当所述第二图像渲染完成时，电子设备确定第一图像是否仍然在显示区域内显示，如果未在显示区域内显示，则可以将第二图像舍弃，当然，也可以是，在预设时间段内保持不舍弃第二图像，具体地，可以另外设置一个缓冲区，命名为图像暂存区，第二图像存储于图像暂存区，检测在该预设时间段内是否页面滚动操作的滚动方向发生变化，若检测到页面滚动操作的滚动方向发生变化，则持续检测到目标页面区域滑动至所述显示区域时，在该目标页面区域所对应的显示区域内的显示位置处显示第二图像。

如果第一图像仍然在显示区域内显示，将所述第一图像替换为所述第二图像。如图15所示，目标图像数据为第8页面的第一子页面区域{(0,Y9),(w,Y10)}和第二子页面区域{(0,Y10),(w,Y11)}对应的图像数据，则在第8页面的第一子页面区域滑动至显示区域的时候，同时参考图12和13以及15可以看出，在显示区域的第一子区域对应显示第8页面的第一子页面区域的图像，假如第二图像未渲染完成，则显示第一图像，如图15所示，第一子区域内显示第一图像，需要说明的是，第一子区域内显示的第一图像对应的是图12和13所示的第8页的第一页面子区域的图像数据经过第一渲染操作之后的图像，但是，图15中通过较细的线条表示图12和13所示的第8页的第一页面子区域的图像经过第一渲染操作处理之后得到的第一图像，其表征图像的分辨率被压缩，需要说明的是，图15所示的较细细条的图像仅是一种表达图像被压缩的方式，而不表征图像被压缩后一定会导致图像的轮廓变细，在此不做限定。

随着页面继续滚动，当第8页面的第一子页面区域滑动至显示区域的第二子区域的时候，即在第8页面的第二子页面区域滑动至显示区域的时候，也就是，显示区域的第一子区域对应显示第8页面的第一子页面区域的图像，第二子区域对应显示第8页面的第二子页面区域的图像，第8页面的第一子页面区域和第二子页面区域的图像数据都已经完成第二渲染操作，如图16所示，第二图像能够在显示区域内显示，具体地，与图15相比，第8页面的第一子页面区域的图像从较细的轮廓线变为与图12和13所示的第8页的第一页面子区域的图像相同的轮廓线，也就是说，第8页面的第一子页面区域的图像在显示区域内显示的时候，已经从图像质量较差的第一图像变为图像质量较好的第二图像，也就是说，显示区域中的第8页面的第一子页面区域的图像已经由第一图像变为第二图像。

因此，由于在确定待渲染的目标图像数据之后，缓冲区队列中已经成功渲染了预设图像和缓冲图像，所以，在该预设图像和缓冲图像滑入或滑出显示区域的过程中，第二渲染操作有可能完成，即使未被渲染完成，由于第一渲染操作的处理速度高于第二渲染操作，所以，第一渲染操作选完成的第一图像可以代替第二图像在显示区域内显示，从而能减少页面滚动显示时的卡顿现象。

另外，采用绘制区域尺寸两倍大小的渲染缓冲区，使得画布上下滑动更加丝滑流畅。采用多个子渲染缓冲区的方式，随着用户滑动画布，局部更新内容，兼顾了性能与功耗。另外，采用一张模糊纹理保存无限画布所有涂鸦内容，在快速滚动的场景，能够极大的减少了用户等待加载延迟，避免白屏，闪屏，卡顿等现象，大大的提升了画布滚动的流畅度，提升用户体验。

请参阅图17，其示出了本申请实施例提供的一种图像显示装置1700的结构框图，该装置可以包括：确定单元1701、渲染单元1702和显示单元1703。

确定单元1701，用于在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据。

渲染单元1702，用于对所述目标图像数据执行第二渲染操作。

进一步的，渲染单元1702还用于基于所述页面滚动操作，确定待渲染的目标图像数据之前，获取多个页面的图像数据，所述多个页面为所述页面滚动操作用于操作的页面；将所述多个页面的图像数据发送至模糊缓冲区，在所述模糊缓冲区内对每个页面的图像数据执行第一渲染操作。

进一步的，渲染单元1702还用于将所述目标图像数据发送至模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作。

显示单元1703，用于响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，其中，所述第一图像为预先基于第一渲染操作对目标图像数据处理得到的图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像，第一渲染操作的处理速度高于所述第二渲染操作的处理速度，基于页面加载顺序，所述目标页面区域位于所述预设图像对应的预设页面区域之后。

进一步的，显示单元1703还用于响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，确定所述绘制缓冲区内是否存在第二图像；若不存在所述第二图像，将预先被渲染完成的第一图像在所述显示区域内显示。

进一步的，显示单元1703还用于若存在所述第二图像，将所述第二图像发送至帧缓冲区；基于屏幕刷新信号将所述帧缓冲区内的第二图像在所述显示区域内显示。

进一步的，显示单元1703还用于当所述第二图像渲染完成时，若所述第一图像仍然位于所述显示区域内，将所述第一图像替换为所述第二图像。

进一步的，所述第一渲染操作处理得到的第一图像的图像质量低于所述第二渲染操作处理得到的第二图像的图像质量。第一渲染操作处理得到的第一图像的分辨率低于所述第二渲染操作处理得到的第二图像的分辨率。所述第一渲染操作包括：降低所述目标图像数据的分辨率并对降低分辨率后的所述目标图像数据渲染得到第一图像，所述第二渲染操作包括保持所述目标图像数据的分辨率不变并对所述目标图像数据渲染得到第二图像。

进一步的，渲染单元1702还用于将所述目标图像数据发送至所述模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作；将所述目标图像数据发送至所述缓冲区队列，在所述缓冲区队列内对所述目标图像数据执行第二渲染操作。在显示区域内显示预设图像的情况下，所述缓冲区队列内存储有预设图像以及缓冲图像，其中，所述缓冲图像为所述预设页面区域相邻的缓冲页面区域内的图像。

所述页面滚动操作为滑动手势，所述显示区域包括第一侧边和第二侧边，确定单元1701还用于确定所述页面滚动操作对应的滑动距离；基于页面加载顺序，将所述缓冲页面区域之后的第一指定区域内的图像数据作为待渲染的目标图像数据，所述第一指定区域的第一长度与所述滑动距离相同，所述第一长度为沿所述第一侧边的长度。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，模块相互之间的耦合可以是电性，机械或其它形式的耦合。

另外，在本申请各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

请参考图18，其示出了本申请实施例提供的一种电子设备的结构框图。该电子设备100可以是智能手机、平板电脑、电子书等能够运行应用程序的电子设备。本申请中的电子设备100可以包括一个或多个如下部件：处理器110、存储器120、以及一个或多个应用程序，其中一个或多个应用程序可以被存储在存储器120中并被配置为由一个或多个处理器110执行，一个或多个程序配置用于执行如前述方法实施例所描述的方法。

处理器110可以包括一个或者多个处理核。处理器110利用各种接口和线路连接整个电子设备100内的各个部分，通过运行或执行存储在存储器120内的指令、程序、代码集或指令集，以及调用存储在存储器120内的数据，执行电子设备100的各种功能和处理数据。可选地，处理器110可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器110可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器110中，单独通过一块通信芯片进行实现。

存储器120可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。存储器120可用于存储指令、程序、代码、代码集或指令集。存储器120可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于实现至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现下述各个方法实施例的指令等。存储数据区还可以存储电子设备100在使用中所创建的数据(比如电话本、音视频数据、聊天记录数据)等。

请参考图19，其示出了本申请实施例提供的一种计算机可读存储介质的结构框图。该计算机可读介质1900中存储有程序代码，所述程序代码可被处理器调用执行上述方法实施例中所描述的方法。

计算机可读存储介质1900可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。可选地，计算机可读存储介质1900包括非易失性计算机可读介质(non-transitory computer-readable storage medium)。计算机可读存储介质1900具有执行上述方法中的任何方法步骤的程序代码1910的存储空间。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。程序代码1910可以例如以适当形式进行压缩。

请参考图20，其示出了本申请实施例提供的一种计算机程序产品的结构框图2000。该计算机程序产品2000中包括计算机程序/指令2010，该计算机程序/指令2010被处理器执行时实现上述方法的步骤。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不驱使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (15)

1.一种图像显示方法，其特征在于，包括：

在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据；

对所述目标图像数据执行第二渲染操作；

响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，其中，所述第一图像为预先基于第一渲染操作对目标图像数据处理得到的图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像，第一渲染操作的处理速度高于所述第二渲染操作的处理速度，基于页面加载顺序，所述目标页面区域位于所述预设图像对应的预设页面区域之后。

2.根据权利要求1所述的方法，其特征在于，所述将所述第一图像在所述显示区域内显示之后，还包括：

响应于所述第二图像渲染完成时，若所述第一图像仍然位于所述显示区域内，将所述第一图像替换为所述第二图像。

3.根据权利要求1或2所述的方法，其特征在于，所述第一渲染操作处理得到的第一图像的图像质量低于所述第二渲染操作处理得到的第二图像的图像质量。

4.根据权利要求3所述的方法，其特征在于，第一渲染操作处理得到的第一图像的分辨率低于所述第二渲染操作处理得到的第二图像的分辨率。

5.根据权利要求4所述的方法，其特征在于，所述第一渲染操作包括：降低所述目标图像数据的分辨率并对降低分辨率后的所述目标图像数据渲染得到第一图像，所述第二渲染操作包括保持所述目标图像数据的分辨率不变并对所述目标图像数据渲染得到第二图像。

6.根据权利要求1或2所述的方法，其特征在于，对所述目标图像数据执行第二渲染操作，包括：

将所述目标图像数据发送至缓冲区队列，在所述缓冲区队列内对所述目标图像数据执行第二渲染操作。

7.根据权利要求6所述的方法，其特征在于，所述基于所述页面滚动操作，确定待渲染的目标图像数据之前，还包括：

获取多个页面的图像数据，所述多个页面为所述页面滚动操作用于操作的页面；

将所述多个页面的图像数据发送至模糊缓冲区，在所述模糊缓冲区内对每个页面的图像数据执行第一渲染操作。

8.根据权利要求6所述的方法，其特征在于，所述响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示之前，还包括：

将所述目标图像数据发送至模糊缓冲区，在所述模糊缓冲区内对所述目标图像数据执行第一渲染操作。

9.根据权利要求6所述的方法，其特征在于，所述缓冲区队列内渲染完成的图像存储于绘制缓冲区内，所述响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若所述第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，包括：

响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，确定所述绘制缓冲区内是否存在第二图像；

若不存在所述第二图像，将预先被渲染完成的第一图像在所述显示区域内显示。

10.根据权利要求9所述的方法，其特征在于，还包括：

若存在所述第二图像，将所述第二图像发送至帧缓冲区；

基于屏幕刷新信号将所述帧缓冲区内的第二图像在所述显示区域内显示。

11.根据权利要求6所述的方法，其特征在于，在显示区域内显示预设图像的情况下，所述缓冲区队列内存储有预设图像以及缓冲图像，其中，所述缓冲图像为所述预设页面区域相邻的缓冲页面区域内的图像。

12.一种图像显示装置，其特征在于，包括：

确定单元，用于在显示区域内显示预设图像的情况下，当检测到针对所述显示区域的页面滚动操作时，基于所述页面滚动操作，确定待渲染的目标图像数据；

渲染单元，用于对所述目标图像数据执行第二渲染操作；

显示单元，用于响应于检测到所述目标图像数据对应的目标页面区域滑动至所述显示区域，若第二图像未被渲染完成且第一图像已被渲染完成，将所述第一图像在所述显示区域内显示，其中，所述第一图像为预先基于第一渲染操作对目标图像数据处理得到的图像，所述第二渲染操作用于处理所述目标图像数据得到第二图像，第一渲染操作的处理速度高于所述第二渲染操作的处理速度，基于页面加载顺序，所述目标页面区域位于所述预设图像对应的预设页面区域之后。

13.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个应用程序配置用于执行如权利要求1-11任一项所述的方法。

14.一种计算机可读介质，其特征在于，所述计算机可读介质存储有处理器可执行的程序代码，所述程序代码被所述处理器执行时使所述处理器执行权利要求1-11任一项所述方法。

15.一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1-11任一项所述的方法。

Images