图片显示边缘处理方法、装置、电子设备和可读存储介质与流程

本申请涉及计算机领域，具体涉及一种图片显示技术。

背景技术：

在页面展示图片时，某些图片由于边界区域的颜色和页面背景颜色一致，导致图片内容的边缘和页面背景之间界限不清晰，给用户一种图片残缺的视觉错觉。

现有技术，通常是以css样式表给图片容器增加边框，并给边框元素添加分辨率适配样式，以在不同分辨率下形成适配的边框宽度。比如在3倍屏下添加1个逻辑单位的边框，则在预设的逻辑像素边宽基础上再设定缩小3倍。

但是现有的描边方案只能在支持css3特性的浏览器使用，存在屏幕分辨率上有兼容性等问题。而且，边框的颜色还可能和图片的部分边缘产生重合，仍可能出现图片边界不清晰的问题。可见，现有的图片显示方法可靠性不够高，用户体验不好。

技术实现要素：

本发明的目的是提供一种图片显示边缘处理方法、装置、电子设备和可读存储介质。

根据本发明的第一方面，提供了一种图片显示边缘处理方法，包括：

根据与待处理图片对应的显示区形状，获取待处理图片的显示边缘；

在所述显示边缘的第一边缘像素点中，确定与预设的页面背景之间边界模糊的第二边缘像素点；

对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片；

以所述显示区形状显示所述描边后的图片。

本申请实施例针对显示边缘中与页面背景边界模糊处像素点，进行了能够与背景形成边界区分的可视化属性信息配置，实现了对图片显示边缘的处理，得到描边后的图片，从而可以在显示该描边后的图片时，具有与页面背景相区分的边界视觉效果，提高了图片显示的视觉完整性，且通过对图片本身的像素点配置，降低了图片边缘显示的兼容性要求。

在一些实施例中，所述根据预设的显示区形状，获取待处理图片的显示边缘，包括：

根据预设的显示区形状和预设的填充属性，在所述待处理图片中确定显示区域，其中，所述显示区域是所述待处理图片以所述填充属性填充在所述显示区形状内的区域，其中，所述填充属性包括缩放属性和/或偏移属性；

将所述显示区域的边缘，作为所述待处理图片的显示边缘。

本申请实施例通过获取到图片中显示区域的边缘，提高了描边位置的准确性。

在一些实施例中，在所述根据预设的显示区形状，获取待处理图片的显示边缘之前，还包括：

根据预设的图片布局和/或所述待处理图片的图片比例，获取待处理图片的显示区形状。

本申请实施例提高了显示区形状与待处理图片的适配程度，从而提高了待处理图片的显示效果。

在一些实施例中，所述根据预设的图片布局，获取待处理图片的显示区形状，包括：

根据预设的瀑布流式布局，获取相邻图片队列间距、页面边距和图片队列数；

根据预设的页面宽度、所述相邻图片队列间距、所述页面边距和所述图片队列数，确定图片队列的限定尺寸，其中，所述限定尺寸是在与所述图片队列的排布方向相垂直的方向上，所述图片队列的尺寸；

对所述待处理图片获取矩形显示比例；

根据所述图片队列的限定尺寸和所述矩形显示比例，获取待处理图片在瀑布流式布局中的显示区形状，其中，所述显示区形状是在与所述图片队列的排布方向相垂直的方向上满足所述限定尺寸，且符合所述矩形显示比例的矩形。

本申请实施例根据瀑布流式布局的特点，确定显示区形状，从而提高以瀑布流式布局显示图片时的显示边缘可靠性。

在一些实施例中，所述在所述显示边缘的第一边缘像素点中，确定与预设的页面背景边界模糊的第二边缘像素点，包括：

获取页面背景的背景颜色信息；

对所述显示边缘的各所述第一边缘像素点，获取像素颜色信息与所述背景颜色信息的色差程度；

将所述色差程度小于预设色差阈值的所述第一边缘像素点，作为与预设的页面背景边界模糊的第二边缘像素点。

本申请实施例通过像素颜色信息与背景颜色信息的色差比较，而确定与预设的页面背景边界模糊的第二边缘像素点，提高了对待处理图片进行边缘处理的准确性。

在一些实施例中，所述获取页面背景的背景颜色信息，包括：

根据页面背景的颜色均值和/或占比最大的颜色信息，确定页面背景的背景颜色信息。

本申请实施例获取到的背景颜色信息更能体现或接近页面背景的主体颜色，从而能够更加准确地确定第二边缘像素点，进而提高了对待处理图像边缘处理的可靠性。

在一些实施例中，所述对所述显示边缘的各所述第一边缘像素点，获取像素颜色信息与所述背景颜色信息的色差程度之前，还包括：

在所述待处理图片中，将位于所述显示边缘内侧预设边宽范围内的像素点，作为第一边缘像素点，其中，所述预设边宽范围的单位是物理像素。

本申请实施例通过设置物理像素的边宽，避免了不同n倍屏下的边宽显示差异。

在一些实施例中，在所述对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片之前，还包括：

根据预设的背景颜色与边界线可视化属性的对应关系，获取与所述背景颜色信息相对应的边界线可视化属性信息，其中所述边界线可视化属性信息包括颜色属性和透明度属性；

将所述边界线可视化属性信息，作为与所述页面背景形成边界区分的可视化属性信息。

本申请实施例根据以背景颜色确定用于对第二边缘像素点配置的可视化属性信息，使显示边缘与背景颜色的区分度达到预期，提高了边缘处理的可靠性。

在一些实施例中，以所述显示区形状显示所述描边后的图片，包括：

根据所述显示区形状，确定瀑布流式布局的图片容器和容器位置；

将所述描边后的图片按预设的填充属性填充至所述图片容器中显示，以对所述描边后的图片进行缩放和/或偏移设置，以使得所述图片容器遮挡所述显示边缘以外的图片内容。

本实施例是以瀑布流对描边后图片渲染显示的过程，具有较佳的视觉展示效果。

根据本发明的第二方面，提供了一种图片显示边缘处理装置，包括：

边缘确定模块，用于根据与待处理图片对应的显示区形状，获取待处理图片的显示边缘；

比对模块，用于在所述显示边缘的第一边缘像素点中，确定与预设的页面背景之间边界模糊的第二边缘像素点；

描边模块，用于对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片；

显示模块，用于以所述显示区形状显示所述描边后的图片。

根据本发明的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明第一方面任一项所述的方法。

根据本发明的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行本发明第一方面任一项所述的方法。

上述申请中的一个实施例具有如下优点或有益效果：提高了边缘处理的可靠性，提高了图片显示的视觉完整性，且通过对图片本身的像素点配置，降低了图片边缘显示的兼容性要求。通过针对显示边缘中与页面背景边界模糊处像素点，进行了能够与背景形成边界区分的可视化属性信息配置，实现了对图片显示边缘的处理，得到描边后的图片，所以克服了现有技术中对显示设备的兼容性依赖以及边缘显示可靠性不够高的技术问题，进而提高了用户查看图片时的视觉体验。

上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是现有的一种图片边缘不清晰的问题示例；

图2是现有的一种图片边缘处理效果示例；

图3是本申请实施例提供的一种图片显示边缘处理方法流程示意图；

图4是本申请实施例提供的一种待处理图片的显示边缘示例；

图5是本申请提供的一种定高而不定宽的瀑布流式布局页面中图片显示示例；

图6是本申请实施例提供的一种图片显示边缘处理装置结构示意图；

图7是用来实现本申请实施例的图片显示边缘处理方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

随着互联网技术的发展，浏览器浏览网页、终端应用程序浏览图片的方式也呈现出多样性，丰富的浏览方式便捷了用户浏览页面信息的过程。用户通过浏览网页内容或者是查询预存储在本地的内容获取想要的信息，而图片作为页面向用户呈现的主要信息之一，如果页面背景与图片所展示的边缘颜色一致，将导致用户产生图片残缺的视觉错觉。参见图1，是现有的一种图片边缘不清晰的问题示例。在图1所示的页面中显示的图片，由于天空的白色与页面背景的白色一致，用户视觉上容易产生该图片是以建筑物为图片边界的异形图片，而非其原本的长方形图片的错觉，导致图片展示效果不佳。因此需要对图片进行边缘处理，提高用户对图片浏览的视觉体验。

参见图2，是现有的一种图片边缘处理效果示例。在图2所示的示例中，是通过css样式表给图片容器添加了一个逻辑单位的边框，并对边框添加分辨率适配样式实现对边框像素的转换，实现提高图片与背景之间的区分效果。但图2所示的方法仍存在很多问题。比如，页面需要根据不同设备所使用的分辨率，将被展宽的边宽进行相应的缩小。但这需要依赖网页浏览器的兼容性，在不支持分辨率适配样式的浏览器或应用程序中则会出现被展宽的边宽效果，如此的边缘处理不够可靠。又比如，对图片容器所添加的边框，其样式还可能与图片其他边缘部分的颜色相近或一致，从而产生新的边界不清晰问题。例如以叶绿色作为边框，但边框颜色和纹理样式可能又与图片中树叶一致，再次在显示树叶的图片边缘出现边框与图片的重合，导致如此的边缘处理不够可靠，还是可能出现图片视觉上显示有残缺的问题。另外，对图片设置边框的效果，很可能影响图片原有整体设计效果，导致用户体验不够好。

为了解决上述现有技术中存在的问题，本申请通过对要显示的图片在与背景颜色一致的显示边缘进行了可视化属性的配置，以在图片本身实现了与背景的分界，降低了对设备的依赖，提高了边缘处理的可靠性，进而提高了图片显示的可靠性。

参见图3，是本申请实施例提供的一种图片显示边缘处理方法流程示意图。本申请的执行主体可以是具有图片显示功能的软件和/或硬件，例如是图片显示边缘处理装置。图片显示边缘处理装置例如可以是手机、个人数字助理(personaldigitalassistant，简称：pda)、平板电脑、便携设备(例如，便携式计算机、袖珍式计算机或手持式计算机)等具有图像显示功能的移动设备，也可以是门禁、智能固定电话、控制台等具有图像显示功能的固定设备。另外，图片显示边缘处理装置还可以是存储于这些设备中提供有图像显示功能的应用程序。本申请实施例对图片显示边缘处理装置的形式并不限定。图3所示方法包括步骤s101至步骤s104，下面结合附图和具体实施例对本申请进行举例说明。

s101，根据与待处理图片对应的显示区形状，获取待处理图片的显示边缘。

预先获取待处理图片，可以是根据用户滚动显示屏的输入操作，从预存储的图片中获取待处理图片至页面中进行图片加载。例如，将预存储的原始图片读取到临时存储单元中，得到所述待处理图片。而由于图片最终在页面上显示时，会受到页面布局或者是图片容器的限制，实际显示的边缘可能不是图片本身的边缘。因此，在判断图片是否会出现边缘与背景显示不清晰时，需要首先确定出待处理图片的显示边缘，以提高后续描边处理的准确性。

参见图4，是本申请实施例提供的一种待处理图片的显示边缘示例。对于图4所示的待处理图片，边缘efgh是待处理图片的原始边缘，而边缘abcd的形状表示该待处理图片的显示区形状，边缘abcd本身也表示了待处理图片的显示边缘。在一些实施例中，可以是根据预设的显示区形状和预设的填充属性，在所述待处理图片中确定显示区域，其中，所述显示区域是所述待处理图片以所述填充属性填充在所述显示区形状内的区域，其中，所述填充属性包括缩放属性和/或偏移属性。例如显示区形状为边缘abcd所示的竖向长方形，待处理图片是如图4所示的横向长方形，在确定显示区域时，可以结合一些预设的填充属性，利用显示区形状在待处理图片中确定显示区域。通过结合填充属性可以实现例如是整体居中显示、主要内容居中显示、或者显示内容最大化等填充效果。例如，可以根据预设偏移属性，将待处理图片的中心点与预设的显示区形状对准，并根据预设的缩放属性将待处理图片缩放至显示区形状之内覆盖最多的图片内容时，将待处理图片中被显示区形状框选的部分作为显示区域。其中，偏移属性具体可以是待处理图片的中心偏移量，缩放属性具体可以是待处理图片的缩放比例。而该缩放比例可以是预先设定的，也可以是根据待处理图片中主要图像内容所占比例来确定的。最后，将所述显示区域的边缘，作为所述待处理图片的显示边缘，参见图4所示的边缘abcd。

在上述实施例中，不同待处理图片的显示区形状可以是固定的(例如传统的矩阵式图片布局)，也可以是变化的(例如瀑布流式布局)。例如，在一些浏览器中，以瀑布流式布局加载显示图片。参见图5，是本申请提供的一种定高而不定宽的瀑布流式布局页面中图片显示示例。瀑布流式布局的主要特性便是错落有致。瀑布流式布局中定宽不定高(竖向布局)或者是定高不定宽(横向布局)的图像显示方式，让页面区别于传统的矩阵式图片布局，形成不同的视觉层级，视线的任意流动又缓解了视觉疲劳。

例如，在一些实施例中，可以是根据预设的图片布局获取待处理图片的显示区形状。由于在定宽不定高的瀑布流式布局中，前一张图片的高度可能影响下方图片显示的高度。因此，可以根据预设的瀑布流式布局，获取相邻图片队列间距、页面边距和图片队列数。其中，在定宽不定高的瀑布流式布局(竖向布局)中，图片队列是以列排布的一串图片，每一列为一个图片队列；而在定高不定宽的瀑布流式布局(横向布局)中，图片队列是以行排布的一串图片，每一行为一个图片队列。在横向布局中，页面边距是第一行或最后一行与页面边缘之间的距离；图片队列数为图片的行数。然后，根据预设的页面宽度、所述相邻图片队列间距、所述页面边距和所述图片队列数，确定图片队列的限定尺寸，其中，所述限定尺寸是在与所述图片队列的排布方向相垂直的方向上，所述图片队列的尺寸。例如，等宽瀑布流式布局的限定尺寸是宽度，等高瀑布流式布局的限定尺寸是高度。在瀑布流式布局中，所有图片显示为矩形。因此，需要对所述待处理图片获取矩形显示比例(例如有三种可选的矩形显示比例1:1、2:3、3:4)。再根据所述图片队列的限定尺寸和所述矩形显示比例，获取待处理图片在瀑布流式布局中的显示区形状，其中，所述显示区形状是在与所述图片队列的排布方向相垂直的方向上满足所述限定尺寸，且符合所述矩形显示比例的矩形。显示区形状实际上就是最后的图片容器的形状，例如前一张采用长方形图片容器，则在其正下方的图片则采用等高的正方形图片容器，因此，具体可以是根据待处理图片所对应的图片布局，来确定其对应的显示区形状。在一些图片布局中，也可以不局限与矩形的显示区形状，在此不做限定。

而在另一些实施例中，又可以是根据待处理图片的图片比例，获取待处理图片的显示区形状。例如，假如待处理图片是高宽1:1的正方形图片，则将正方形、圆形等中心对称的形状，作为其显示区形状；假如待处理图片是高宽2:3或3:4的图片，则将长方形、椭圆形等非中心对称的形状，作为其显示区形状。将与待处理图片比例更适配的形状作为其显示区形状，可以在待处理图片中获得较大的显示范围，也能具有较好的用户体验。

上述利用预设的图片布局的实施例和利用待处理图片的图片比例的实施例可以结合。例如，结合图片布局确定其可用长方形或正方形的显示区形状，再结合待处理图片的图片比例，确定以长方形作为显示区形状。两者结合的顺序和具体方式本申请不做限定。

本申请通过上述各种实施例，提高了获取到的待处理图片的显示边缘的准确性，然后在下一步中需要确定显示边缘上哪些部分会与背景无法形成区分边界。

s102，在所述显示边缘的第一边缘像素点中，确定与预设的页面背景之间边界模糊的第二边缘像素点。

在本实施例中，与预设的页面背景边界模糊的第二边缘像素点，可以理解为在，显示边缘上颜色与页面背景相同或相近的部分像素点。例如在图4所示的边缘abcd上，建筑、树叶以及道路的颜色都与白色背景不同，但天空的白色与背景的白色一致，在视觉上没有分界。因此，在图4所示的示例中，天空所对应的边缘像素点需要被重新配置，最后形成如图5所示的效果。确定第二边缘像素点的方式有多种，可以是遍历待处理图片中的所有像素点，然后将满足位置在显示边缘，且与预设的页面背景边界模糊条件的像素点，确定为第二边缘像素点。也可以是先根据显示边缘进行粗筛选，然后在粗筛选确定的像素点中进一步以与预设的页面背景边界模糊条件，确定第二边缘像素点。

为了提高边缘处理的准确性，例如可以先获取页面背景的背景颜色信息。然后对所述显示边缘的各所述第一边缘像素点，获取像素颜色信息与所述背景颜色信息的色差程度。例如将像素颜色信息与所述背景颜色信息对应的颜色数值进行比较，得到色差程度。这里用来比较的像素颜色信息与所述背景颜色信息例如可以是像素和背景的rgb数值，但本申请不局限于此。最后，可以将所述色差程度小于预设色差阈值的所述第一边缘像素点，作为与预设的页面背景边界模糊的第二边缘像素点。预设色差阈值例如是用于指示能否区分开的颜色差值。如果小于该预设色差阈值，则是人眼无法区分的色差程度；如果大于该预设色差阈值，则是人眼可以区分的色差程度。

上述实施例中，如果页面背景是纯色背景，则直接获取背景颜色信息。但如果页面背景是有图案的背景，那么页面背景中包含的颜色就不是单一颜色。为了提高获取到的第二边缘像素点的可靠性，无论背景颜色是否单一，都可以通过取代表性颜色作为背景颜色的方式，与第二边缘像素点的像素颜色信息进行比较。代表性颜色可以是页面背景的颜色均值、占比最大的颜色信息中的一种或两种的结合。具体地，可以是根据页面背景的颜色均值和/或占比最大的颜色信息，确定页面背景的背景颜色信息。由此获取到的背景颜色信息更能体现或接近页面背景采用的颜色，从而能够更加准确地确定第二边缘像素点，进而提高了对待处理图像边缘处理的可靠性。

在一些实施例中，为了避免了不同倍屏下的边宽显示差异，在计算色差程度之前，还可以以物理像素定义边宽，在待处理图片的显示边缘，确定出满足预设边宽范围的第一边缘像素点。例如，可以是在所述待处理图片中，将位于所述显示边缘内侧预设边宽范围内的像素点，作为第一边缘像素点，其中，所述预设边宽范围的单位是物理像素。例如，将1个物理像素作为显示边缘的边宽，则将显示边缘内1个物理像素内的像素点，作为第一边缘像素点。

在上述实施例中，为了提高边缘处理后与背景之间边界区分的可靠性，在获取到背景颜色之后，并在执行步骤s103之前，还可以根据背景颜色，确定出用于对第二边缘像素点进行配置的可视化属性信息。可视化属性信息可以是颜色、透明度、亮度、饱和度、灰度等等可视化的属性信息。在一些可选的实施例中，可以是预先设置有背景颜色与边界线可视化属性的对应关系，例如映射表的形式记录各背景颜色可采样的边界线可视化属性，以实现分界的效果。例如对白色的背景颜色，对应预设的边界线可视化属性可以是：“颜色属性：黑色”、“透明度属性：50％”。具体地，可以根据预设的背景颜色与边界线可视化属性的对应关系，获取与所述背景颜色信息相对应的边界线可视化属性信息，其中所述边界线可视化属性信息包括颜色属性和透明度属性。将所述边界线可视化属性信息，作为与所述页面背景形成边界区分的可视化属性信息。本实施例根据背景颜色确定当前做描边采用的颜色和透明度，颜色属性例如可以是与当前背景颜色反差最大的颜色，从而提高分界的可靠性。其中，还在设置一定透明度，避免过于饱和的颜色带来的突兀感，提高用户视觉舒适度。通过颜色属性和透明度属性的结合配置，使显示边缘与背景颜色的区分度达到预期，进一步提高了边缘处理的可靠性。

s103，对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片。

可以理解为，在前述步骤的实施例中，已经确定了造成图片视觉上产生残缺错觉的原因是第二边缘像素点的颜色与背景颜色相同或相近，那么，为了解决这个问题，需要将这部分像素点的可视化属性进行重新配置，可以理解为是描边处理。本申请中的该描边处理不是现有技术中的全边缘描边，而是可以理解为对待处理图片上的第二边缘像素点进行替换，替换为满足与所述页面背景形成边界区分的可视化属性信息的像素点，而对除了第二边缘像素点以外的显示边缘其他位置，不做处理。这里替换的具体方式，例如是对第二边缘像素点进行包含颜色属性的重新配置。继续参见图5所示的示例中，建筑物、树叶和道路所占边缘并没有对像素点重新配置，但天空所占边缘，则被配置为黑色半透明的像素点。

s104，以所述显示区形状显示所述描边后的图片。

在本申请中，显示区形状不局限于图4、图5中示意的矩形，但显示区形状可以理解为页面设置的图片容器的形状。可以理解为是以显示区形状对描边后的图片进行预设布局的渲染或预渲染。

在一些瀑布流式布局的实施例中，可以是根据所述显示区形状，确定瀑布流式布局的图片容器和容器位置。例如获取到图片容器的宽和高，以及在页面中的排布位置。然后将所述描边后的图片按预设的填充属性填充至所述图片容器中显示，以对所述描边后的图片进行缩放和/或偏移设置，以使得所述图片容器遮挡所述显示边缘以外的图片内容。可以理解为，对描边后的图片的宽、高、偏移量进行设置，以将显示区域完整显示，并对超出图片容器的图片内容隐藏不显示。在瀑布流式布局的场景下，通常采用如下方式：获取瀑布流式布局排布的至少一个待显示的图片对象；在接收到用户输入的滚动页面的操作时，终端不断加载新的图片对象；并在页面滚动的过程中，将被移除出页面显示区域的图片对象的浏览历史记录做临时存储。

本申请实施例提供了一种图片显示边缘处理方法，通过根据预设的显示区形状，获取待处理图片的显示边缘；在所述显示边缘的第一边缘像素点中，确定与预设的页面背景边界模糊的第二边缘像素点；对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片；以所述显示区形状显示所述描边后的图片，从而针对显示边缘中与页面背景边界模糊处像素点，进行了能够与背景形成边界区分的可视化属性信息配置，实现了对图片显示边缘的处理，得到描边后的图片，从而可以在显示该描边后的图片时，具有与页面背景相区分的边界视觉效果，提高了图片显示的视觉完整性，且通过对图片本身的像素点配置，降低了图片边缘显示的兼容性要求。

在一些具体的实现方式中，以浏览器显示瀑布流式图片布局为例进行举例。

首先，进行页面信息的初始化步骤。在初始化步骤中，对页面背景的颜色图片、描边属性(例如包括边宽、颜色属性、透明度属性)、瀑布流式布局中待显示图片显示比例(例如是三种可选比例1:1、2:3、3:4之一)、页面宽度、瀑布流式布局在页面中的两侧边距，瀑布流式布局中图片的显示列数(以2列为例)、相邻图片列之间的间距。

然后，计算待显示的图片在瀑布流式布局中的显示区域，确定出显示边缘。具体地，根据初始化过程中得到的页面宽度、瀑布流式布局在页面中的两侧边距，瀑布流式布局中图片的显示列数、相邻图片列之间的间距，计算每一列图片的图片容器宽度。图片容器宽度w＝(width–2*padding–gap)/2，其中，padding是指瀑布流式布局在页面中的两侧边距，gap是指2个相邻图片列之间的间距。根据图片显示比例，比如2:3，可以计算得出页面中图片的显示高度h＝w*2/3，其中，{w,h}为待显示图片的显示区域的宽w和高h。又根据图片的原始宽高naturalwidth和naturalheight,以及预设显示规则要求待显示图片在显示区域{w,h}内上下左右居中对齐，可以算出待显示图片在显示区域{w,h}内的坐标位置。该步骤得到的待显示图片的显示区域数据包括{left,top,sw,sh,naturalwidth,naturalheight,w,h}，其中，left为水平方向的偏移量，top为竖直方向的偏移量；sw为待显示图片的缩放后宽度，sh为待显示图片的缩放后高度；naturalwidth为待显示图片的原始宽度，naturalheight为待显示图片的原始高度；w为待显示图片的图片容器宽度，h为待显示图片的图片容器高度。

接着，进行描边的步骤。具体地，可以是根据上一步得到的{left,top,sw,sh,naturalwidth,naturalheight,w,h}，遍历待显示图片中各像素点的位置，将位于{left,top,sw,sh,w,h}对应区域的显示边缘、且在描边属性的边框范围[0,border-width]之内的像素点，作为第一边缘像素点。对初始化步骤中页面背景的颜色图片，提取背景颜色。判断各第一边缘像素点的颜色是否与背景颜色一致。如果不一致，则不做处理，跳转判断下一个第一边缘像素点；如果一致，则将当前像第一边缘像素点设置成描边属性的颜色属性、透明度属性，实现描边。待所有第一边缘像素点遍历处理完毕，输出描边后的图片。描边的步骤可以是通过开启图形处理器(graphicsprocessingunit，简称：gpu)并行渲染能力，将待显示图片的显示区域数据和初始化得到的描边属性传递到gpu的片段着色器，对每个待显示图片的第一像素点像素做是否描边的判断和处理。

最后，对描边后的图片做瀑布流渲染，显示图片。具体地，可以是将描边后的图片渲染成2列瀑布流式布局，因为图片已根据是否和页面背景颜色一致的规则做了适应性地描边处理，所以渲染的图片就已自带了描边，无需再添加css样式和dom节点等进行描边操作。对每一张图片的显示操作，具体步骤是：设置图片容器的宽高{w,h}，图片内容超出容器部分隐藏；设置图片显示区域宽高{sw,sh}，在水平和竖直方向设置偏移{left,top}。由此，完成图片显示边缘处理。

与上述方法相对应的，本申请还提供了一种图片显示边缘处理装置。参见图6，是本申请实施例提供的一种图片显示边缘处理装置结构示意图。图6所示图片显示边缘处理装置60包括：

边缘确定模块61，用于根据与待处理图片对应的显示区形状，获取待处理图片的显示边缘。

比对模块62，用于在所述显示边缘的第一边缘像素点中，确定与预设的页面背景之间边界模糊的第二边缘像素点。

描边模块63，用于对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片。

显示模块64，用于以所述显示区形状显示所述描边后的图片。

图6所示实施例的终端对应地可用于执行图3所示方法实施例中的步骤，其实现原理和技术效果类似，此处不再赘述。

在一些实施例中，边缘确定模块61，用于根据预设的显示区形状和预设的填充属性，在所述待处理图片中确定显示区域，其中，所述显示区域是所述待处理图片以所述填充属性填充在所述显示区形状内的区域，其中，所述填充属性包括缩放属性和/或偏移属性；将所述显示区域的边缘，作为所述待处理图片的显示边缘。

在一些实施例中，边缘确定模块61，在所述根据预设的显示区形状，获取待处理图片的显示边缘之前，还用于根据预设的图片布局和/或所述待处理图片的图片比例，获取待处理图片的显示区形状。

在一些实施例中，边缘确定模块61，具体用于根据预设的瀑布流式布局，获取相邻图片队列间距、页面边距和图片队列数；根据预设的页面宽度、所述相邻图片队列间距、所述页面边距和所述图片队列数，确定图片队列的限定尺寸，其中，所述限定尺寸是在与所述图片队列的排布方向相垂直的方向上，所述图片队列的尺寸；对所述待处理图片获取矩形显示比例；根据所述图片队列的限定尺寸和所述矩形显示比例，获取待处理图片在瀑布流式布局中的显示区形状，其中，所述显示区形状是在与所述图片队列的排布方向相垂直的方向上满足所述限定尺寸，且符合所述矩形显示比例的矩形。

在一些实施例中，比对模块62，用于获取页面背景的背景颜色信息；对所述显示边缘的各所述第一边缘像素点，获取像素颜色信息与所述背景颜色信息的色差程度；将所述色差程度小于预设色差阈值的所述第一边缘像素点，作为与预设的页面背景边界模糊的第二边缘像素点。

在一些实施例中，比对模块62，用于根据页面背景的颜色均值和/或占比最大的颜色信息，确定页面背景的背景颜色信息。

在一些实施例中，比对模块62在对所述显示边缘的各所述第一边缘像素点，获取像素颜色信息与所述背景颜色信息的色差程度之前，还用于在所述待处理图片中，将位于所述显示边缘内侧预设边宽范围内的像素点，作为第一边缘像素点，其中，所述预设边宽范围的单位是物理像素。

在一些实施例中，描边模块63在所述对所述第二边缘像素点配置与所述页面背景形成边界区分的可视化属性信息，得到描边后的图片之前，还用于根据预设的背景颜色与边界线可视化属性的对应关系，获取与所述背景颜色信息相对应的边界线可视化属性信息，其中所述边界线可视化属性信息包括颜色属性和透明度属性；将所述边界线可视化属性信息，作为与所述页面背景形成边界区分的可视化属性信息。

在一些实施例中，显示模块64，用于根据所述显示区形状，确定瀑布流式布局的图片容器和容器位置；将所述描边后的图片按预设的填充属性填充至所述图片容器中显示，以对所述描边后的图片进行缩放和/或偏移设置，以使得所述图片容器遮挡所述显示边缘以外的图片内容。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图7所示，是根据本申请实施例的图片显示边缘处理方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图7所示，该电子设备包括：一个或多个处理器701、存储器702，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示gui的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图7中以一个处理器701为例。

存储器702即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的图片显示边缘处理的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的图片显示边缘处理的方法。

存储器702作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的图片显示边缘处理的方法对应的程序指令/模块(例如，附图6所示的边缘确定模块61、比对模块62、描边模块63和显示模块64)。处理器701通过运行存储在存储器702中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的图片显示边缘处理的方法。

存储器702可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据图片显示边缘处理的电子设备的使用所创建的数据等。此外，存储器702可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器702可选包括相对于处理器701远程设置的存储器，这些远程存储器可以通过网络连接至图片显示边缘处理的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

图片显示边缘处理的方法的电子设备还可以包括：输入装置703和输出装置704。处理器701、存储器702、输入装置703和输出装置704可以通过总线或者其他方式连接，图7中以通过总线连接为例。

输入装置703可接收输入的数字或字符信息，以及产生与图片显示边缘处理的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置704可以包括显示设备、辅助照明装置(例如，led)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(lcd)、发光二极管(led)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用asic(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(pld))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，提高了边缘处理的可靠性，提高了图片显示的视觉完整性，且通过对图片本身的像素点配置，降低了图片边缘显示的兼容性要求。通过针对显示边缘中与页面背景边界模糊处像素点，进行了能够与背景形成边界区分的可视化属性信息配置，实现了对图片显示边缘的处理，得到描边后的图片，所以克服了现有技术中对显示设备的兼容性依赖以及边缘显示可靠性不够高的技术问题，进而提高了用户查看图片时的视觉体验。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。