CN115686671A - 一种图片加载方法、设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种图片加载方法、设备及存储介质。在本申请实施例中，根据当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域，从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；并在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块，并显示在图片显示区域中，以对待放大内容区域进行放大展示。这样，可基于放大操作所确定的放大比例及待放大内容区域，确定目标清晰度图片和目标图像块，实现对高清图片的放大展示。整个过程中，无需加载完整高清图像，只需对目标清晰度图片中的目标图像块进行加载，可提高高清图片的加载速度。

Description

一种图片加载方法、设备及存储介质

技术领域

本申请涉及图像处理技术领域，尤其涉及一种图片加载方法、设备及存储介质。

背景技术

目前使用移动端浏览器对图片进行放大时，若使用低清晰度的图片，可保证加载速度，但是当图片放大到一定倍数，由于清晰度的限制，往往无法展示图片的具体细节。而如果使用高清晰度的图片，则存在无法流畅加载的问题，尤其是频繁加载高清图片时会引发强烈的帧率下降，发生卡顿或者黑屏，导致图片加载不够流畅且最终呈现效果不佳。

因此，亟需一种能够提高高清图片加载速度的解决方案。

发明内容

本申请的多个方面提供一种图片加载方法、设备及存储介质，用以提高高清图片的加载速度。

本申请实施例提供一种图片加载方法，包括：

在图片显示区域中加载当前清晰度图片；

监测所述当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

从所述当前清晰度图片所在的目标图片组中，选择与所述放大比例适配的目标清晰度图片；

其中，所述目标图片组内包含针对相同内容的不同清晰度图片，且所述目标清晰度图片对应的清晰度高于所述当前清晰度图片的清晰度；

在所述目标清晰度图片包含的图像块中，选取与所述待放大内容区域适配的目标图像块；

其中，所述图像块为对所述目标清晰度图片预先进行切割而产生的；

在所述图片显示区域中显示所述目标图像块，以对所述待放大内容区域进行放大展示。

本申请实施例还提供一种计算设备，包括：存储器、处理器和显示组件；

所述存储器用于存储一条或多条计算机指令；

所述处理器与所述存储器及所述显示组件耦合，用于执行所述一条或多条计算机指令，以用于：

在图片显示区域中加载当前清晰度图片；

监测所述当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

从所述当前清晰度图片所在的目标图片组中，选择与所述放大比例适配的目标清晰度图片；其中，所述目标图片组内包含针对相同内容的不同清晰度图片，且所述目标清晰度图片对应的清晰度高于所述当前清晰度图片的清晰度；

在所述目标清晰度图片包含的图像块中，选取与所述待放大内容区域适配的目标图像块；其中，所述图像块为对所述目标清晰度图片预先进行切割而产生的；

通过所述显示组件在所述图片显示区域中显示所述目标图像块，以对所述待放大内容区域进行放大展示。

本申请实施例还提供一种存储计算机指令的计算机可读存储介质，当所述计算机指令被一个或多个处理器执行时，致使所述一个或多个处理器执行前述的图片加载方法。

在本申请实施例中，提出了一种图片加载方法，根据当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域，从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块；将在图片显示区域中显示的当前清晰度图片更新为目标图像块，以对待放大内容区域进行放大展示。这样，可基于放大操作所确定的放大比例及待放大内容区域，确定目标清晰度图片和目标图像块，并在图片显示区域显示目标图像块，实现了对高清图片的放大展示。整个过程中，无需加载完整高清图像，只需对目标清晰度图片中的目标图像块进行加载，可提高高清图片的加载速度。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请一示例性实施例提供的一种图片加载方法的流程示意图；

图2为本申请一示例性实施例提供的一种图片分割方案的示意图；

图3为本申请一示例性实施例提供的一种当前隐式取图框的示意图；

图4为本申请另一示例性实施例提供的一种计算机设备的结构示意图；

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

目前，现有技术使用移动端浏览器对高清图片进行放大时，存在无法流畅加载的问题，并且频繁加载高清图片会引发强烈的帧率下降，导致最终呈现效果不佳。为了解决现有技术存在的问题，在本申请的一些实施例中：根据当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域，从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块；将在图片显示区域中显示的当前清晰度图片更新为目标图像块，以对待放大内容区域进行放大展示。这样，可基于放大操作所确定的放大比例及待放大内容区域，确定目标清晰度图片和目标图像块，并在图片显示区域显示目标图像块，实现了对图片待放大内容区域的放大展示。整个过程中，无需对整个图像进行加载，只加载目标清晰度图片中的目标图像块，可提高高清图片的加载速度。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本申请一示例性实施例提供的一种图片加载方法的流程示意图。该方法可由数据处理装置执行，该数据处理装置可实现为软件和/或硬件的结合，该数据处理装置可集成在计算机设备中。参考图1，该方法包括：

步骤100，在图片显示区域中加载当前清晰度图片；

步骤101，监测当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

步骤102，从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；其中，目标图片组内包含针对相同内容的不同清晰度图片，且目标清晰度图片对应的清晰度高于当前清晰度图片的清晰度；

步骤103，在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块；其中，图像块为对目标清晰度图片预先进行切割而产生的；

步骤104，在图片显示区域中显示目标图像块，以对待放大内容区域进行放大展示。

本实施例提供的图片加载方法可适用于在移动端浏览器加载图片的场景中，例如在手机、电脑的浏览器中加载图片。当前清晰度图片可以是各种类型的图像，例如，当前清晰度图片可以是车辆图像、动物图像或者食物的图像等，可以是普通平面图像，也可以是全景图等。当然，这些仅是示例性的，本实施例并不限于此。

可选地，在步骤100之前，可针对当前清晰度图片所在的目标图片组中的最高清晰度图片，进行不同程度的降低分辨率的操作，以产生目标图片组内的不同清晰度图片。其中，目标图片组内不同清晰度图片的内容和尺寸一致。除此之外，本实施例并不限于通过降低图片分辨率的方式降低图片的清晰度。例如，还可通过对图片进行压缩，降低图片的画质和像素大小，以达到降低图片清晰度的目的，在此不做赘述。

图2为本申请一示例性实施例提供的一种图片分割方案的示意图，参考图2，可将目标图片组中各个清晰度图片切割成若干图像块，实际应用中，可只对除最低清晰度图片之外的其它图片执行切割操作。其中，本实施例中的图像块可以是大小相等的矩形，这样，切割出的图像块将成行成列，且可按行按列对图像块进行编号，也即是，单个图像块将拥有自己的行号和列号。其中，列号用于表征图像块在行方向上的排列位置，行号用于表征图像块在列方向上的排列位置。优选地，可将目标图片组中除最低清晰度图片以外的图片切割成同等大小的正方形，使得后续利用图像块的边长计算其他参数时更加高效快捷。并且，本实施例中，可采用图像处理领域中任意一种能够实现图片分割的技术方案来实施上述的切割操作，在此不做限定。

参考图1，在步骤100中，可在图片显示区域显示当前清晰度图片，其中当前清晰度图片可以是最低清晰度图片，也可以是因发生了放大操作而被调用的非最低清晰度图片所包含的相关图像块。

在本实施例中，用户可针对当前清晰度图片执行放大操作。基于此，在步骤101中，可根据在当前清晰度图片上发生的放大操作确定当前清晰度图片的放大比例。其中，放大操作可以是基于双指的触屏式放大操作，也可以是基于鼠标滚轮的滚轮式放大操作，下面分情况说明放大比例的确定方案：

在放大操作为触屏式放大操作的情况下，可根据双指在图片显示区域上的移动距离，确定触屏式放大操作对应的放大比例。在此过程中，可监测触屏式放大操作的放大中心对应的偏移量，从而可基于偏移量计算触屏式放大操作导致的放大比例。其中，放大中心可为双指所处中心点的位置。例如，在手机终端，用户通过双指在当前清晰度图片上滑动来实现放大操作，在此过程中，放大中心发生了偏移，基于该偏移导致的偏移量可计算出放大比例。

在放大操作为滚轮式放大操作的情况下，可根据滚轮的滚动距离确定滚轮式放大操作对应的放大比例。在此过程中，可获取滚轮式放大操作对应的滚动监听事件，监测滚动监听事件中放大中心对应的偏移量，从而可基于偏移量计算滚轮式放大操作导致的放大比例。其中，放大中心为鼠标光标所处的位置。例如，在浏览器端，用户通过滚动滚轮来实现放大操作，在此过程中，放大中心发生了偏移，基于该偏移导致的偏移量可计算出放大比例。

下面举例说明，触屏式放大操作和滚轮式放大操作对应的放大比例的计算方法。其中，对于触屏式放大操作来说，记录两个手指开始触摸图片显示区域时的坐标[x1,y1]和[x2,y2]，并计算两个手指开始触摸图片显示区域时两手指间的长度L1，该长度L1为坐标[x1,y1]和[x2,y2]之间的欧式距离；记录两个手指执行放大操作后的坐标[x3,y3]和[x4,y4]，并计算两个手指执行放大操作后两手指间的长度L2，该长度L2为坐标[x3,y3]和[x4,y4]之间的欧式距离；长度L2与长度L1的差即为放大中心的偏移量(offset)。对于滚轮式放大操作来说，可以获取滚动监听事件中的滚动距离，滚动距离对应于放大中心的偏移量(offset)。无论是哪种放大操作，在确定放大中心的偏移量之后，可根据一固定值确定放大比例，优选地，该固定值为0.001，则放大比例scale＝offset*0.001。也即是，若图片显示区域上显示的图像放大至当前清晰度图片大小的5倍，此时放大比例(scale)为0.2；若图片显示区域上显示的图像未进行放大，也即是放大比例的最大值为1。

在本实施例中，在步骤101中，还可监测当前清晰度图片上发生的放大操作所对应的待放大内容区域。其中，待放大内容区域是当前清晰度图片中在放大操作之后需要展示给用户的图像内容部分。本实施例中可采用多种实现方式来确定当前清晰度图片中的待放大内容区域的位置信息，具体的实现方式将在后文中进行详述。

正如前文提及的，目标图片组内包含针对相同内容的不同清晰度图片。在此基础上，继续参考图1，在步骤102中，可从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片。在一种示例性的实现方案中，可基于放大比例与清晰度之间的对应关系，确定放大操作对应的放大比例所适配的清晰度；从目标图片组中，选择符合该清晰度的图片，作为目标清晰度图片。其中，放大比例与清晰度之间的对应关系可按需配置，且配置方式可灵活选择。举例来说，可预先设定多个放大比例区间，并为每个放大比例区间配置所需跳转的清晰度等级数量，其中，目标图像组内的各个图片分别对应不同的清晰度等级；这样，可使用放大比例区间与所需跳转的清晰度等级数量之间的对应关系，来表征该示例性实现方案中的放大比例与清晰度之间的对应关系。例如，若当前清晰度图片的清晰度为A级，执行放大操作对应的放大比例为3.5，3.5位于【3，4】区间，该区间所需跳转的清晰度等级数量为2，则在目标图片组中选择比A级清晰度高2个等级的清晰度图片作为目标清晰度图片。

另外，需要说明的是，本实施例中的放大操作所引出的目标清晰度图片的清晰度应该高于当前清晰图片的清晰度。当然，这里默认了放大操作导致了清晰度的切换，实际应用中，在放大操作所对应的放大比例过低的情况下，可能并无需切换清晰度，也就无需执行图1中的步骤102及后续操作，这种情况在此不做讨论。

继续参考图1，在步骤103中，可在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块。

基于在前文中步骤102中检测的待放大内容区域在当前清晰度图片中的位置信息，以及当前清晰度图片与目标清晰度图片之间在内容和尺寸层面的一致性，在步骤103中，可将待放大内容区域的位置信息传播至目标清晰度图片之上，从而在目标清晰度图片上选出需要展示给用户的图片内容。而由于本实施例中预先已将目标清晰度图片切割为若干图像块，因此，可在目标清晰度图片包含的图像块中，选取位于待放大内容区域范围内的目标图像块(也即是需要展示给用户的图片内容)。关于基于待放大内容区域的位置信息来选取目标图像块的具体实现方式将在后文中进行详述。

在此基础上，可在步骤104中，在图片显示区域中显示目标图像块，以对待放大内容区域进行放大展示。可选地，在此过程中，图片显示区域中可采用覆盖的方式来显示目标图像块。举例来说，可将目标图像块绘制在新的画布上，并将新的画布覆盖在图片显示区域中。在该示例性方案中，可采用“画布渲染上下文2维”(Canvas Rendering Context 2D)等工具中绘图(drawImage)函数，将目标图像块上的图像内容绘制到画布上。当然，本实施例中还可采用其它实现方式来显示目标图像块，例如，直接使用目标图像块替换图片显示区域中的在前显示内容，等。

为了在图片显示区域中实现按照放大操作对目标图像块与当前清晰度图片进行衔接展示，本实施例中，可基于当前清晰度图片在图片显示区域对应的显示坐标系中所占据的坐标位置、目标图像块之间的相对位置关系以及目标图像块各自的宽度及高度，计算目标图像块各自在显示坐标系中的坐标位置；按照目标图像块各自在显示坐标系中的坐标位置，在图片显示区域中绘制目标图像块。其中，显示坐标系是为图片显示区域单独设置的二维坐标系，通常可以图片显示区域的左上顶点为坐标原点，以图片显示区域的边方向确定显示坐标系的X、Y轴，坐标单位长度为图片上1px的分度值。另外，目标图像块在图片显示区域中的相对位置关系可根据目标图像块的行号和列号确定。

在计算目标图像块各自在显示坐标系中的坐标位置过程中：若目标图像块中的第一列图像块为不完整图像块，则计算单个图像块的宽度与待放大内容区域的代表顶点在图像坐标系中的横坐标除以单个图像块的宽度而产生的余数之间的差值，作为第一列图像块的宽度；计算单个图像块的高度与待放大内容区域的代表顶点的纵坐标除以单个图像块的高度而产生的余数之间的差值，作为第一列图像块的高度。例如，单个图像块的宽度为w、高度为h，代表顶点的横坐标为x、纵坐标为y，则第一列图像块的宽度xp为：xp＝(w-x％w)、第一列图像块的高度yp为：yp＝(h-y％h)。当然，第一列图像块的宽度和高度的计算方式包括但不限于此，在此不做赘述。

除此之外，在本实施例中，可对切割出的若干图像块进行保存，例如，可保存在本地和/或服务器中，以在后续绘制工作中进行再利用。并且，可在对目标图像块进行绘制之前，查询目标图像块是否已经全部被下载至本地；若已全部被下载，则在图片显示区域绘制目标清晰度图片中的目标图像块；若未全部被下载，则在图片显示区域绘制当前清晰度图片中的待放大内容区域。

另外，上述是从放大操作的维度来阐述图片加载方法，应当理解的是，本实施例中，同样支持当前清晰度图片上发生的缩小操作。针对缩小操作，监测当前清晰度图片上发生的缩小操作所对应的缩小比例及待缩小内容区域；从当前清晰度图片所在的目标图片组中，选择与缩小比例适配的待替换清晰度图片；其中，当前清晰度图片对应的清晰度高于待替换清晰度图片的清晰度；在待替换清晰度图片包含的图像块中，选取与待缩小内容区域适配的待替换图像块；在图片显示区域中显示所替换图像块，以对待缩小内容区域进行缩小展示。

需要说明的是，参考上述放大比例与清晰度之间的对应关系，本实施例中的缩小比例与清晰度之间的关系同样可按需配置。例如，使用缩小比例区间与所需跳转的清晰度等级数量之间的对应关系，来表征缩小比例与清晰度之间的对应关系。当与缩小比例适配的待替换清晰度图片为目标图片组中的最低清晰度图片时，若最低清晰度图片未进行预先切割，则可在图片显示区域显示最低清晰度图片中与待缩小内容区域适配的图像区域。

优选地，为了给用户带来更好的视觉体验，可根据图片显示区域的尺寸比例和原始图像的尺寸比例，为待缩小内容区域配置最大框选区域的尺寸，其中，最大框选区域用于限制缩小操作的极限；最大框选区域的尺寸与图片显示区域的尺寸适配。当待缩小内容区域的尺寸等于最大框选区域的尺寸时，则不能继续在当前清晰度图片上进行缩小操作。

关于缩小操作对应的目标图片块的选取过程以及展示过程，可适应性地参考放大操作对应过程，在此不再过多赘述。

除了上述放大操作和缩小操作之外，本实施例中，还可提供拖拽操作维度下的图片加载方法。在本实施例中，用户可在图片显示区域执行拖拽操作，而拖拽操作会导致待显示内容区域的位置发生变动，其中，待显示内容区域可以是前文中确定出的待放大内容区域或者是待缩小内容区域。基于待显示内容区域的位置变动，将导致需要在图片显示区域中显示的目标图像块发生变化。关于基于待显示内容区域的变动而重新选取目标图像块的具体实现方式将在后文中进行详述。

据此，本实施例中，可根据当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域，从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块；将在图片显示区域中显示的当前清晰度图片更新为目标图像块，以对待放大内容区域进行放大展示。这样，可基于放大操作所确定的放大比例及待放大内容区域，确定目标清晰度图片和目标图像块，并在图片显示区域显示目标图像块，实现了对图片待放大内容区域的放大展示。整个过程中，无需对整个图像进行加载，只加载目标清晰度图片中的目标图像块，可提高高清图片的加载速度。

在上述或下述实施例中，可采用多种实现方式来确定待放大内容区域在当前清晰度图片中的位置信息。

在一种示例性的实现方式中，可引入隐式取图框来辅助确定待放大内容区域在当前清晰度图片中的位置。隐式取图框是一个可被缩放或者拖拽的虚拟图框，隐式取图框对于用户来说是不可见的。隐式取图框用于在图片显示区域的图像上确定框选区域(框选区域即可框选出前文提及的待放大内容区域、待缩小内容区域及待显示内容区域)。这样，在放大操作过程中，当前清晰度图片的尺寸可保持不变，而只需缩小隐式取图框，即可框选出待放大内容区域，这可有效提高待放大内容区域的位置确定效率。

图3为本申请一示例性实施例提供的一种当前隐式取图框的示意图，参考图3，基于隐式取图框，确定待放大内容区域的位置信息的过程，可以是：

1、确定待放大内容区域的宽度和高度。一种示例性方案中，可根据放大操作对应的放大比例和当前清晰度图片上的隐式取图框在执行放大操作之前的宽度和高度，计算隐式取图框在执行放大操作之后的宽度和高度，作为待放大内容区域的宽度和高度；其中，在放大操作过程中，当前清晰度图片的尺寸保持不变，隐式取图框缩小。

2、确定待放大内容区域在当前清晰度图片中的坐标信息。一种示例性的方案中，可将隐式取图框的代表顶点在放大操作之前在图像坐标系上的坐标信息，作为代表顶点的调整前坐标信息；计算放大操作所导致的隐式取图框中心位置的偏移量；并基于放大操作所导致的隐式取图框的中心位置的偏移量和代表顶点的调整前坐标信息，计算代表顶点在当前清晰度图片上的调整后坐标信息，作为待放大内容区域在当前清晰度图片中的坐标信息。

3、根据待放大内容区域的宽度、高度及在前清晰度图片中的坐标信息即可确定待放大内容区域的位置信息。

下面举例说明，基于隐式取图框确定待放大内容区域位置信息的过程。假设放大操作对应的放大中心在图像坐标系中的坐标为(x0,y0)，根据放大中心的偏移量计算的放大比例为scale，其中，图像坐标系以当前清晰度图片左上顶点为坐标原点，以当前清晰度图片的边方向确定图像坐标系的X、Y轴，坐标单位长度为图片上1px的分度值。令隐式取图框的宽度与图片显示区域的宽度的比值为k。在此基础上，进行放大操作前隐式取图框的宽度为beforeW，高度为beforeH，则进行放大操作后隐式取图框的宽度为afterW，高度为afterH；在这里，afterW＝beforeW*scale，afterH＝beforeH*scale。放大操作前放大中心在取图框坐标系中的坐标(x1,y1)，x1＝x0*k，y1＝y0*k；根据此时的放大比例计算放大操作后放大中心在取图框坐标系里的坐标(x2,y2)，x2＝x1*scale，y2＝y1*scale。其中，取图框坐标系以放大操作前的隐式取图框的代表顶点为坐标原点，以隐式取图框的边方向确定取图框坐标系的X、Y轴，坐标单位长度为图片上1px的分度值。计算放大操作前后放大中心的偏移量(deltaX,deltaY)，deltaX＝x1-x2，deltaY＝y1-y2。根据放大中心的偏移量计算放大操作后待放大内容区域的代表顶点在图像坐标系中的横坐标(afterX)和纵坐标(afterY)，afterX＝lastX+deltaX,afterY＝lastY+deltaY。其中，lastX为放大操作前的隐式取图框的代表顶点在图像坐标系中的横坐标，lastY为放大操作前的隐式取图框的代表顶点在图像坐标系中的纵坐标。

除了放大操作的情况之外，还可基于隐式取图框，在缩小操作的情况下确定出待缩小内容区域的位置。同理，基于隐式取图框，还可在缩小操作的情况下，基于缩小比例和缩小前隐式取图框的尺寸，计算待缩小内容区域的尺寸。并且待缩小内容区域代表顶点的坐标信息可适应性地参考在放大操作的情况下待放大内容区域代表顶点的坐标的计算方法，在此不做赘述。

进一步，基于隐式取图框，还可在拖拽操作的情况下确定出待显示内容区域的位置。由于待显示内容区域可是前文中确定出的待放大内容区域或者是待缩小内容区域，因此，基于隐式取图框，在拖拽操作的情况下，确定待显示内容区域位置的方法可参考待上述放大内容区域位置和待缩小内容区域位置的确定方法。

当然，本实施例并不限于基于隐式取图框这一种确定待放大内容区域的实现方式。例如，可通过目标检测算法确定放大目标的位置，从而确定当前清晰度图片上的待放大内容区域，等。

据此，本实施例中，可基于隐式取图框确定待放大内容区域在当前清晰度图片中的位置信息。这样，在执行放大操作的过程中，当前清晰度图片的尺寸可保持不变，仅需要调整隐式取图框的大小即可框选出待放大内容区域，可有效提高待放大内容区域的位置确定效率。

在上述或下述实施例中，可采用多种实现方式在目标清晰度图片中选取目标图像块。在一种示例性的实现方式中：目标清晰度图片包含的图像块成行成列且按行按列编号，基于此，在放大操作的情况下，可获取目标清晰度图片包含的图像块中位于待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号；将目标清晰度图片包含的图像块中位于起始列号、结束列号、起始行号和结束行号范围内的图像块，确定为目标图像块。

为便于计算，在该实现方案中，目标清晰度图片包含的图像块等大小且为矩形，在此基础上，一种起始列号、结束列号、起始行号和结束行号的示例性计算方案可以是：

获取待放大内容区域的宽度、高度以及待放大内容区域的代表顶点在图像坐标系中的坐标信息。

根据代表顶点的横坐标及图像块的宽度，确定位于待放大内容区域内的第一列目标图像块的列号，作为起始列号。例如，待放大内容区域代表顶点的横坐标为x，图像块的宽度为w，则起始列号A1为：A1＝Math.floor(x/w)。其中，Math.floor()为向下取整函数。

根据代表顶点的横坐标、待放大内容区域的宽度及图像块的宽度，确定位于待放大内容区域内的最后一列目标图像块的列号，作为结束列号。例如，待放大内容区域代表顶点的横坐标为x，图像块的宽度为w，待放大内容区域的宽度为W，则结束列号A2为：A2＝Math.floor((x+W)/w)。

根据代表顶点的纵坐标及图像块的高度，确定位于待放大内容区域内的第一行目标图像块的行号，作为起始行号。例如，待放大内容区域代表顶点的纵坐标为y，图像块的高度为h，则起始行号B1为：B1＝Math.floor(y/h)。

根据代表顶点的纵坐标、待放大内容区域的高度及图像块的高度，确定位于待放大内容区域内的最后一行目标图像块的行号，作为结束行号。例如，待放大内容区域代表顶点的纵坐标为y，图像块的高度为h，待放大内容区域的高度为H，则结束行号B2为：B2＝Math.floor((y+H)/h)。

当然，起始列号、结束列号、起始行号和结束行号的计算方案并不限于此，还可采用其它计算方案来进行计算，在此不再穷举。

另外，在进行缩小操作的情况下，确定待缩小内容区域中目标图像块的过程，可适应性地参考放大操作情况下目标图像块的选取过程，在此不再过多赘述。

在进行拖拽操作的情况下，根据在图片显示区域的拖拽方向和拖拽距离，调整隐式取图框的位置，以得到调整后的待显示内容区域。参考在待放大内容区域内确定目标图像块的方法，在调整后的待显示内容区域确定新的目标图像块。例如，通过单指/鼠标点击图片显示区域，记录此时单指/鼠标的坐标P1(x1,y1)，并在图片显示区域上执行拖拽操作，记录拖拽后单指/鼠标的坐标P2(x2,y2)，得到单指/鼠标的平移向量P0(x0,y0)，其中，x0＝x2-x1，y0＝y2-y1。另外，在执行拖拽操作过程中，待显示内容区域的尺寸不变，根据单指的平移向量计算调整后待显示内容区域代表顶点的横坐标moveX和纵坐标moveY，moveX＝lastX+x0，currentLeft＝lastY+y0。其中，lastX和lastY为进行拖拽操作前待显示内容区域代表顶点的横坐标和纵坐标。需要说明的是，在进行拖拽操作的过程中，待显示内容区域不得超出隐式取图框最大框选区域的边界。

当然，本实施例中，还可采用其它实现方式来在目标清晰度图片中选取目标图像块。例如，可获取目标清晰度图片上待放大内容区域的边界，将位于位于目标清晰度图片上待放大内容区域的边界内的图像块，确定为目标图像块。

据此，本实施例中，可获取目标清晰度图片包含的图像块中位于待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号；将目标清晰度图片包含的图像块中位于起始列号、结束列号、起始行号和结束行号范围内的图像块，确定为目标图像块。这样，无需对位于待放大内容区域内的所有目标图像块的行号和列号进行计算，只计算位于待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号，即可获得目标图像块的坐标范围，从而获得所有目标图像块。可大大简化计算过程，提高确定目标图像块的效率。

需要说明的是，上述实施例所提供的的方法的各步骤的执行主体均可以是同一设备，或者，该方法也由不同设备作为执行主体。比如，步骤100至步骤103的执行主体可以为设备A；又比如，步骤100至步骤102的执行主体可以为设备A，步骤103的执行主体可以为设备B；等等。

另外，在上述实施例及附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如101、102等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。

图4为本申请另一示例性实施例提供的一种计算设备的结构示意图。如图4所示，该计算设备包括：存储器40、处理器41和显示组件44。

处理器41与存储器40及显示组件44耦合，用于执行存储器中的计算机程序，以用于：

在图片显示区域中加载当前清晰度图片；

监测当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

从当前清晰度图片所在的目标图片组中，选择与放大比例适配的目标清晰度图片；其中，目标图片组内包含针对相同内容的不同清晰度图片，且目标清晰度图片对应的清晰度高于当前清晰度图片的清晰度；

在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块；其中，图像块为对目标清晰度图片预先进行切割而产生的；

通过显示组件在图片显示区域中显示目标图像块，以对待放大内容区域进行放大展示。

在一可选实施例中，处理器41还用于：

基目标图片组中的最高清晰度图片，进行不同程度的降低分辨率的操作，以产生目标图片组内的不同清晰度图片。

在一可选实施例中，处理器41在对目标清晰度图片预先进行切割的过程，还用于：

将目标清晰度图片切割成若干同等大小的图像块。

在一可选实施例中，处理器41在监测当前清晰度图片上发生的放大操作所对应的放大比例的过程，还用于：

在放大操作为触屏式放大操作的情况下，根据两指移动距离确定放大比例；

在放大操作为滚轮式放大操作的情况下，根据滚轮的滚动距离确定放大比例。

在一可选实施例中，处理器41在选择与放大比例适配的目标清晰度图片的过程中，还用于：

基于放大比例与清晰度之间的对应关系，确定放大操作对应的放大比例所适配的清晰度；

从目标图片组中，选择符合清晰度的图片，作为目标清晰度图片。

在一可选实施例中，目标清晰度图片包含的图像块成行成列且按行按列编号，处理器41在目标清晰度图片包含的图像块中，选取与待放大内容区域适配的目标图像块的过程，还用于：

获取位于待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号；

将目标清晰度图片包含的图像块中位于起始列号、结束列号、起始行号和结束行号范围内的图像块，确定为目标图像块；

其中，列号用于表征图像块在行方向上的排列位置，行号用于表征图像块在列方向上的排列位置。

在一可选实施例中，目标清晰度图片包含的图像块等大小且为矩形，处理器41在获取位于待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号的过程，还用于：

获取待放大内容区域的宽度、高度以及待放大内容区域的代表顶点在图像坐标系中的坐标信息；

根据代表顶点的横坐标及图像块的宽度，确定位于待放大内容区域内的第一列目标图像块的列号，作为起始列号；

根据代表顶点的横坐标、待放大内容区域的宽度及图像块的宽度，确定位于待放大内容区域内的最后一列目标图像块的列号，作为结束列号；

根据代表顶点的纵坐标以及图像块的高度，确定位于待放大内容区域内的第一行目标图像块的行号，作为起始行号；

根据代表顶点的纵坐标、待放大内容区域的高度及图像块的高度，确定位于待放大内容区域内的最后一行目标图像块的行号，作为结束行号。

在一可选实施例中，处理器41在获取待放大内容区域的宽度和高度的过程，还用于：

获取当前清晰度图片上的隐式取图框在放大操作之前的宽度和高度；

基于放大操作对应的放大比例，计算隐式取图框在放大操作之后的调整后宽度和调整后高度，作为待放大内容区域的宽度和高度；

其中，在放大操作过程中，当前清晰度图片的尺寸保持不变，隐式取图框缩小。

在一可选实施例中，处理器41在获取待放大内容区域的代表顶点在图像坐标系中的坐标信息的过程，还用于：

获取当前清晰度图片上的隐式取图框的代表顶点在放大操作之前在当前清晰度图片上的坐标信息，作为代表顶点的调整前坐标信息；

计算放大操作所导致的隐式取图框的中心位置的偏移量；

基于偏移量和代表顶点的调整前坐标信息，计算代表顶点在当前清晰度图片上的调整后坐标信息，作为待放大内容区域在当前清晰度图片中的坐标信息。

在一可选实施例中，目标清晰度图片包含的图像块等大小且为矩形，处理器41在图片显示区域中显示目标图像块的过程，还用于：

根据目标图像块的行号和列号，确定目标图像块在图片显示区域中的相对位置关系；

基于当前清晰度图片在图片显示区域对应的显示坐标系中所占据的坐标位置、目标图像块之间的相对位置关系以及目标图像块各自的宽度及高度，计算目标图像块各自在显示坐标系中的坐标位置，其中，目标图像块铺满当前清晰度图片所占的坐标位置；

按照目标图像块各自在显示坐标系中的坐标位置，在图片显示区域中绘制目标图像块。

在一可选实施例中，处理器41还用于：

若目标图像块中的第一列图像块为不完整图像块，则计算单个图像块的宽度与待放大内容区域的代表顶点在图像坐标系中的横坐标除以单个图像块的宽度而产生的余数之间的差值，作为第一列图像块的宽度；

计算单个图像块的高度与待放大内容区域的代表顶点的纵坐标除以单个图像块的高度而产生的余数之间的差值，作为第一列图像块的高度。

在一可选实施例中，处理器41在图片显示区域中显示目标图像块的过程，还用于：

查询目标图像块是否已经全部被下载至本地；

若已全部被下载，则在图片显示区域绘制目标清晰度图片中的目标图像块；

若未全部被下载，则在图片显示区域绘制当前清晰度图片中的待放大内容区域。

在一可选实施例中，处理器41在图片显示区域中显示目标图像块之后，还用于：

监测目标清晰度图片上发生的缩小操作所对应的缩小比例及待缩小内容区域；

从目标清晰度图片所在的目标图片组中，选择与缩小比例适配的待替换清晰度图片；其中，待替换清晰度图片对应的清晰度低于目标清晰度图片的清晰度；

在待替换清晰度图片包含的图像块中，选取与待缩小内容区域适配的待替换图像块；

在图片显示区域中显示待替换图像块，以对待缩小内容区域进行缩小展示。

进一步，如图4所示，该计算设备还包括：通信组件42、电源组件43和显示组件44等其它组件。图4中仅示意性给出部分组件，并不意味着计算机设备只包括图4所示组件。

值得说明的是，上述计算设备的各实施例中涉及到的技术细节可参考前述图片加载方法各实施例中对计算设备的动作的相关描述，为节省篇幅，在此不再赘述，但这不应造成本申请保护范围的损失。

相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，计算机程序被执行时能够实现上述方法实施例中可由计算机设备执行的各步骤。

上述图4中的存储器，用于存储计算机程序，并可被配置为存储其它各种数据以支持在模拟器上的操作。这些数据的示例包括用于在模拟器上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

上述图4中的通信组件，被配置为便于通信组件所在设备和其他设备之间有线或无线方式的通信。通信组件所在设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件可基于近场通信(NFC)技术、射频识别(RFID)技术、红外数据协会(IrDA)技术、超宽带(UWB)技术、蓝牙(BT)技术或其它技术来实现，以促进短程通信。

上述图4中的电源组件，为电源组件所在设备的各种组件提供电力。电源组件可以包括电源管理系统，一个或多个电源，及其他与为电源组件所在设备生成、管理和分配电力相关联的组件。

上述图4中的显示组件，包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

Claims (15)

1.一种图片加载方法，其特征在于，包括：

在图片显示区域中加载当前清晰度图片；

监测所述当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

从所述当前清晰度图片所在的目标图片组中，选择与所述放大比例适配的目标清晰度图片；其中，所述目标图片组内包含针对相同内容的不同清晰度图片，且所述目标清晰度图片对应的清晰度高于所述当前清晰度图片的清晰度；

在所述目标清晰度图片包含的图像块中，选取与所述待放大内容区域适配的目标图像块；其中，所述图像块为对所述目标清晰度图片预先进行切割而产生的；

在所述图片显示区域中显示所述目标图像块，以对所述待放大内容区域进行放大展示。

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

基于所述目标图片组中的最高清晰度图片，进行不同程度的降低分辨率的操作，以产生所述目标图片组内的不同清晰度图片。

3.根据权利要求1所述的方法，其特征在于，所述对所述目标清晰度图片预先进行切割，包括：

将所述目标清晰度图片切割成若干同等大小的图像块。

4.根据权利要求1所述的方法，其特征在于，所述监测所述当前清晰度图片上发生的放大操作所对应的放大比例，包括：

在所述放大操作为触屏式放大操作的情况下，根据两指移动距离确定所述放大比例；

在所述放大操作为滚轮式放大操作的情况下，根据滚轮的滚动距离确定所述放大比例。

5.根据权利要求1所述的方法，其特征在于，所述选择与所述放大比例适配的目标清晰度图片，包括：

基于放大比例与清晰度之间的对应关系，确定所述放大操作对应的放大比例所适配的清晰度；

从所述目标图片组中，选择符合所述清晰度的图片，作为所述目标清晰度图片。

6.根据权利要求1所述的方法，其特征在于，所述目标清晰度图片包含的图像块成行成列且按行按列编号；所述在所述目标清晰度图片包含的图像块中，选取与所述待放大内容区域适配的目标图像块，包括：

获取位于所述待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号；

将所述目标清晰度图片包含的图像块中位于所述起始列号、结束列号、起始行号和结束行号范围内的图像块，确定为所述目标图像块；

其中，列号用于表征图像块在行方向上的排列位置，行号用于表征图像块在列方向上的排列位置。

7.根据权利要求6所述的方法，其特征在于，所述目标清晰度图片包含的图像块等大小且为矩形，所述获取位于所述待放大内容区域内的目标图像块的起始列号、结束列号、起始行号和结束行号，包括：

获取所述待放大内容区域的宽度、高度以及所述待放大内容区域的代表顶点在图像坐标系中的坐标信息；

根据所述代表顶点的横坐标及图像块的宽度，确定位于所述待放大内容区域内的第一列目标图像块的列号，作为起始列号；

根据所述代表顶点的横坐标、所述待放大内容区域的宽度及图像块的宽度，确定位于所述待放大内容区域内的最后一列目标图像块的列号，作为结束列号；

根据所述代表顶点的纵坐标以及图像块的高度，确定位于所述待放大内容区域内的第一行目标图像块的行号，作为起始行号；

根据所述代表顶点的纵坐标、所述待放大内容区域的高度及图像块的高度，确定位于所述待放大内容区域内的最后一行目标图像块的行号，作为结束行号。

8.根据权利要求7所述的方法，其特征在于，所述获取所述待放大内容区域的宽度和高度，包括：

获取所述当前清晰度图片上的隐式取图框在所述放大操作之前的宽度和高度；

基于所述放大操作对应的放大比例，计算所述隐式取图框在所述放大操作之后的调整后宽度和调整后高度，作为所述待放大内容区域的宽度和高度；

其中，在所述放大操作过程中，所述当前清晰度图片的尺寸保持不变，所述隐式取图框缩小。

9.根据权利要求7所述的方法，其特征在于，所述获取所述待放大内容区域的代表顶点在图像坐标系中的坐标信息，包括：

获取所述当前清晰度图片上的隐式取图框的代表顶点在所述放大操作之前在所述当前清晰度图片上的坐标信息，作为所述代表顶点的调整前坐标信息；

计算所述放大操作所导致的所述隐式取图框的中心位置的偏移量；

基于所述偏移量和所述代表顶点的调整前坐标信息，计算所述代表顶点在所述当前清晰度图片上的调整后坐标信息，作为所述待放大内容区域在所述当前清晰度图片中的坐标信息。

10.根据权利要求6所述的方法，其特征在于，所述目标清晰度图片包含的图像块等大小且为矩形，所述在所述图片显示区域中显示所述目标图像块，包括：

根据所述目标图像块的行号和列号，确定所述目标图像块在所述图片显示区域中的相对位置关系；

基于所述当前清晰度图片在所述图片显示区域对应的显示坐标系中所占据的坐标位置、所述目标图像块之间的相对位置关系以及所述目标图像块各自的宽度及高度，计算所述目标图像块各自在所述显示坐标系中的坐标位置，其中，所述目标图像块铺满所述当前清晰度图片所占的坐标位置；

按照所述目标图像块各自在所述显示坐标系中的坐标位置，在所述图片显示区域中绘制所述目标图像块。

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

若所述目标图像块中的第一列图像块为不完整图像块，则计算单个图像块的宽度与所述待放大内容区域的代表顶点在图像坐标系中的横坐标除以所述单个图像块的宽度而产生的余数之间的差值，作为所述第一列图像块的宽度；

计算单个图像块的高度与所述待放大内容区域的代表顶点在图像坐标系中的纵坐标除以所述单个图像块的高度而产生的余数之间的差值，作为所述第一列图像块的高度。

12.根据权利要求1所述的方法，其特征在于，所述在所述图片显示区域中显示所述目标图像块，包括：

查询所述目标图像块是否已经全部被下载至本地；

若已全部被下载，则在所述图片显示区域绘制所述目标清晰度图片中的所述目标图像块；

若未全部被下载，则在所述图片显示区域绘制所述当前清晰度图片中的待放大内容区域。

13.根据权利要求1所述的方法，其特征在于，在所述图片显示区域中显示所述目标图像块之后，还包括：

监测所述目标清晰度图片上发生的缩小操作所对应的缩小比例及待缩小内容区域；

从所述目标清晰度图片所在的目标图片组中，选择与所述缩小比例适配的待替换清晰度图片；其中，所述待替换清晰度图片对应的清晰度低于所述目标清晰度图片的清晰度；

在所述待替换清晰度图片包含的图像块中，选取与所述待缩小内容区域适配的待替换图像块；

在所述图片显示区域中显示所述待替换图像块，以对所述待缩小内容区域进行缩小展示。

14.一种计算设备，其特征在于，包括存储器、处理器和显示组件；

所述存储器用于存储一条或多条计算机指令；

所述处理器与所述存储器及所述显示组件耦合，用于执行所述一条或多条计算机指令，以用于：

在图片显示区域中加载当前清晰度图片；

监测所述当前清晰度图片上发生的放大操作所对应的放大比例及待放大内容区域；

从所述当前清晰度图片所在的目标图片组中，选择与所述放大比例适配的目标清晰度图片；其中，所述目标图片组内包含针对相同内容的不同清晰度图片，且所述目标清晰度图片对应的清晰度高于所述当前清晰度图片的清晰度；

在所述目标清晰度图片包含的图像块中，选取与所述待放大内容区域适配的目标图像块；其中，所述图像块为对所述目标清晰度图片预先进行切割而产生的；

通过所述显示组件在所述图片显示区域中显示所述目标图像块，以对所述待放大内容区域进行放大展示。

15.一种存储计算机指令的计算机可读存储介质，其特征在于，当所述计算机指令被一个或多个处理器执行时，致使所述一个或多个处理器执行权利要求1-13任一项权利要求所述的图片加载方法。

Images