CN114863008B - 图像处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供一种图像处理方法、装置、电子设备及存储介质，所述方法包括：接收用户对图像滚动列表中的滚动条的触发操作；响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；在所述图像滚动列表的显示区域内展示所述目标灰色图像。本方案实现了利用置灰着色器对需要灰色显示的目标彩色图像进行渲染置灰，从而无需在资源包中为每张彩色图像增加对应的灰色图像，从而有效减小了资源包的大小，能够节约存储资源。

Description

图像处理方法、装置、电子设备及存储介质

技术领域

本公开涉及图像处理技术领域，尤其涉及一种图像处理方法、装置、电子设备及存储介质。

背景技术

在一些应用场景中，经常需要交替显示同一图像的彩色状态和灰色状态，比如，当某个按钮不可用时，显示灰色的按钮图像，当按钮可用时，显示彩色的按钮图像。

目前，相关技术中，对于需要交替显示彩色和灰色两种不同颜色的图像的场景，通常是针对每张彩色图像，增加一张灰色图像与其对应，这就使得场景的资源包中包含内容相同但颜色不同的两套图像，当需要置灰或点亮时，从资源包中选择合适的图像资源进行替换显示。

然而，上述方案中，资源包中包含两套图像资源，且图像包含的内容相同，仅颜色存在差异，重复的资源导致资源包的包体增大，会占用较大的存储资源。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开实施例提供了一种图像处理方法、装置、电子设备及存储介质。

根据本公开的一方面，提供了一种图像处理方法，包括：

接收用户对图像滚动列表中的滚动条的触发操作；

响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；

在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；

在所述图像滚动列表的显示区域内展示所述目标灰色图像。

根据本公开的另一方面，提供了一种图像处理装置，包括：

接收模块，用于接收用户对图像滚动列表中的滚动条的触发操作；

确定模块，用于响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；

渲染模块，用于在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；

展示模块，用于在所述图像滚动列表的显示区域内展示所述目标灰色图像。

根据本公开的另一方面，提供了一种电子设备，包括：

处理器；以及

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据前述一方面所述的图像处理方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据前述一方面所述的图像处理方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现前述一方面所述的图像处理方法。

本公开实施例中提供的一个或多个技术方案，通过在待显示的目标彩色图像满足预设的置灰显示条件时，利用预设的置灰着色器对目标彩色图像进行渲染处理，得到目标灰色图像并显示在图像滚动列表的显示区域内，实现了利用置灰着色器对需要灰色显示的目标彩色图像进行渲染置灰，从而无需在资源包中为每张彩色图像增加对应的灰色图像，从而有效减小了资源包的大小，能够节约存储资源。

附图说明

在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：

图1示出了根据本公开一示例性实施例的图像处理方法的流程图；

图2示出了本公开一示例性实施例中目标彩色图像包含三张图像且均满足置灰显示条件的展示效果示例图；

图3示出了根据本公开另一示例性实施例的图像处理方法的流程图；

图4示出了本公开一示例性实施例的透明遮罩层覆盖显示区域的效果示意图；

图5示出了根据本公开示例性实施例的图像处理装置的示意性框图；

图6示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

以下参照附图描述本公开提供的图像处理方法、装置、电子设备及存储介质。

目前，在需要交替显示灰色图像和彩色图像的应用场景中，通常采用两种方式实现：一是针对每张彩色图像增加对应的灰色图像，即在资源包中添加两套图像，这两套图像的内容相同，区别仅在于一套为彩色的，一套为灰色的，当需要置灰或点亮图像时，从资源包中选择对应颜色的图像进行显示，然而这种方式会导致资源包中包含重复的资源，使得资源包的包体较大，会占用较多的存储资源，并且替换图像进行显示也会增加开发人员的工作量；二是直接修改图像的RGB通道的参数，将图像整体改为灰色，但这种处理方式的效果较差，会导致图像整体偏黑，视觉效果较差。

针对上述问题，本公开提供了一种图像处理方法，通过在待显示的目标彩色图像满足预设的置灰显示条件时，利用预设的置灰着色器对目标彩色图像进行渲染处理，得到目标灰色图像并显示在图像滚动列表的显示区域内，实现了利用置灰着色器对需要灰色显示的目标彩色图像进行渲染置灰，从而无需在资源包中为每张彩色图像增加对应的灰色图像，从而有效减小了资源包的大小，能够节约存储资源；采用本公开的方案，基于预设的置灰着色器进行渲染置灰即可得到灰色图像，避免了替换图像的开发工作，从而减轻了开发人员的工作量；本公开提供的这种置灰方式不会改变原彩色图像的RGB通道参数，能够在不影响原图质量的情况下对图像进行置灰得到灰色图像，提升了灰色图像的视觉效果。

图1示出了根据本公开一示例性实施例的图像处理方法的流程图，该方法可以由本公开实施例提供的图像处理装置执行，其中该装置可以采用软件和/或硬件实现，一般可集成在电子设备中，所述电子设备包括但不限于电脑、手机、服务器等设备。

如图1所示，该图像处理方法可以包括以下步骤：

步骤101，接收用户对图像滚动列表中的滚动条的触发操作。

其中，图像滚动列表可以是显示器中显示的任意图像滚动列表，比如，可以是用户当前登录的应用程序中展示资源包中的图像资源时的图像滚动列表，当用户查看资源包时，以图像滚动列表的形式展示资源包中的各个图像，其中资源包中包含多张彩色图像。

能够理解的是，通过对滚动列表中的滚动条进行操作，可以切换滚动列表中显示的内容。本公开实施例中，用户可以对图像滚动列表中的滚动条执行触发操作，以切换图像滚动列表的显示区域中显示的图像。

其中，滚动条包括滚动滑块、滚动条空白区域和滚动条两端箭头，对滚动条的触发操作包括但不限于对滚动滑块的拖拽操作、对滚动条空白区域或滚动条两端箭头的点击操作等，用户可以通过鼠标、触控笔、手指等方式对滚动条执行触发操作。

步骤102，响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像。

本公开实施例中，当用户对图像滚动列表中的滚动条执行触发操作后，电子设备接收该触发操作，并监听该触发操作的结束指令。比如，当监测到手指触碰滚动滑块时，滚动条的tracking属性变为yes，当监测到手指在屏幕上移动时，滚动条的drag属性变为yes，当监测到手指离开屏幕时，滚动条的tracking属性和drag属性均变为no，此时确定监听到触控操作的结束指令。

接着，在监听到触控操作的结束指令时，响应于该结束指令，确定图像滚动列表中待显示的目标彩色图像。

其中，确定的目标彩色图像中包含至少一张图像。能够理解的是，当目标彩色图像中包含多张图像时，受到图像滚动列表的显示区域的尺寸限制，所述多张图像可能无法完全显示在图像滚动列表的显示区域中。比如，目标彩色图像包含三张图像，则显示区域中可能仅能完整显示第二张图像，对于第一张图像仅能显示底部的部分内容，而对于第三张图像则仅能显示顶部的部分内容。

能够理解的是，采用本公开的方案时，资源包中仅需添加一套彩色图像，因此确定的待显示的图像是彩色图像，称为目标彩色图像。

需要说明的是，本公开实施例中，可以采用目前常用的根据对滚动条的触发操作确定滚动列表中显示的目标内容的方式，来确定图像滚动列表中待显示的目标彩色图像，此处不作详细说明。

步骤103，在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像。

其中，置灰着色器是预先设置的，置灰着色器给出了修改的灰色参数，利用置灰着色器，能够在不影响彩色图像的图像质量的前提下，对彩色图像进行灰色渲染，得到灰色图像。

本公开实施例中，确定了待显示的目标彩色图像之后，可以进一步判断目标彩色图像是否满足预设的置灰显示条件，并对满足置灰显示条件的目标彩色图像，基于预设的置灰着色器进行渲染置灰，得到目标灰色图像。

其中，置灰显示条件可以根据应用场景和实际需求预先设置。

比如，在基于Unity 3D创建的全真课堂场景中，可以针对每节课设置对应的彩色图像，对于用户已学习的课进行点亮，即显示彩色图像，对于用户未学习的课则显示灰色图像，因此针对此场景，可以将置灰显示条件设置为用户未学习对应课程。进而，确定了目标彩色图像后，可以判断用户是否已学习目标彩色图像对应的课程，如果已学习则确定不满足置灰显示条件，如果未学习则确定满足置灰显示条件，并基于置灰着色器对目标彩色图像进行渲染处理得到对应的目标灰色图像。

需要说明的是，本公开实施例中，当目标彩色图像中包含多张图像时，可以针对目标彩色图像中的每张图像分别判断是否满足预设的置灰显示条件，并对满足置灰显示条件的图像，基于置灰着色器进行渲染置灰，得到对应的目标灰色图像，对于不满足置灰显示条件的图像，则保留原色彩，不做置灰处理。

步骤104，在所述图像滚动列表的显示区域内展示所述目标灰色图像。

本公开实施例中，得到目标灰色图像之后，即可将目标灰色图像展示在图像滚动列表的显示区域内。

能够理解的是，若目标彩色图像不满足置灰显示条件，则将目标彩色图像显示在图像滚动列表的显示区域内。另外，当目标彩色图像中包含多张图像时，这多张图像可能有的满足置灰显示条件而有的不满足置灰显示条件，则仅基于置灰着色器对满足置灰显示条件的图像进行渲染置灰得到对应的灰色图像，并且在显示时，对满足置灰显示条件的图像显示置灰后的灰色图像，对于不满足置灰显示条件的图像则显示原彩色图像。并且，当目标彩色图像中包含多张图像时，显示区域中可能无法显示完整的每张图像，示例性地，目标彩色图像包含三张图像且均满足置灰显示条件的展示效果示例图如图2所示，从图2可以看出，图像滚动列表的显示区域中仅能完整显示中间的一张灰色图像(图像B)，对于前一张图像(图像A)和后一张图像(图像C)则仅能显示部分内容。

本公开实施例的图像处理方法，通过接收用户对图像滚动列表中的滚动条的触发操作，并响应于触发操作的结束指令，确定图像滚动列表中待显示的目标彩色图像，以及在确定目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对目标彩色图像进行渲染处理，得到目标灰色图像，进而在图像滚动列表的显示区域内展示目标灰色图像。采用本公开的方案，实现了利用置灰着色器对需要灰色显示的目标彩色图像进行渲染置灰，从而无需在资源包中为每张彩色图像增加对应的灰色图像，从而有效减小了资源包的大小，能够节约存储资源。

一些应用场景中，比如虚拟游戏场景中，用户已领取的道具、任务卡、勋章等素材会显示在用户的背包中，对于用户已领取素材的图像进行点亮，即显示彩色图像，对于用户未领取素材对应的图像则进行置灰，即显示灰色图像，因此本公开实施例中，可以根据图像的领取状态来判断图像是否满足置灰显示条件。从而，在本公开的一种可选实施方式中，所述方法还包括：

获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；

在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。

其中，当前虚拟场景包括但不限于虚拟课堂场景、虚拟游戏场景等，根据当前虚拟场景不同，素材的种类和内容可以不同。比如，当前虚拟场景为虚拟课堂场景，则素材可以是虚拟课堂场景中包含的课程、知识卡片等；当前虚拟场景为虚拟游戏场景，则素材可以是虚拟游戏场景中的关卡、道具等。

本公开实施例中，可以在获得用户授权的前提下，根据用户的登录信息获取用户在当前虚拟场景中的背包信息，背包信息中包括用户已领取素材的彩色图像，并将待显示的目标彩色图像与背包信息中的彩色图像进行匹配，判断彩色图像中是否包含目标彩色图像。其中，在进行匹配时，可以通过图像识别、图像标识比对等方式进行匹配，本公开对具体的匹配方式不作限制。如果匹配结果表明彩色图像中不包含目标彩色图像，可以确定目标彩色图像对应的素材未被用户领取，则确定目标彩色图像满足预设的置灰显示条件。

进一步地，在本公开的一种可选实施方式中，如果彩色图像中包含目标彩色图像，可以确定目标彩色图像对应的素材已被用户领取，则确定目标彩色图像不满足预设的置灰显示条件，进而在图像滚动列表的显示区域内展示目标彩色图像。

在本公开实施例中，通过获取用户在当前虚拟场景中的背包信息，背包信息中包括用户已领取素材的彩色图像，并在彩色图像中不包含目标彩色图像的情况下，确定目标彩色图像满足置灰显示条件，对目标彩色图像进行置灰显示对应的目标灰色图像；或者，在彩色图像中包含目标彩色图像的情况下，确定目标彩色图像不满足置灰显示条件，在图像滚动列表的显示区域内展示目标彩色图像，由此，实现了在虚拟场景中根据素材领取状态来判断目标彩色图像是否满足置灰显示条件，实现了根据素材领取状态展示对应颜色的图像。

当图像滚动列表的显示区域中展示多张图像时，存在不能完整显示每张图像的情况，比如，图2所示的展示效果中，仅能完整展示图像B，对于图像A则仅能展示底部的部分图像，对于图像C则仅能展示顶部的部分图像，这种展示效果不够美观，影响了用户的视觉体验。针对上述问题，本公开还提出了一种图像处理方法，通过对无法完整显示的图像进行遮罩处理，使得无法完整展示的图像对用户而言是不可见的，用户仅能看到完整显示在图像滚动列表的显示区域中的图像，从而提高了图像展示效果，提升了用户的视觉体验。下面结合附图3进行详细说明本方案。

如图3所示，在前述实施例的基础上，该图像处理方法还可以包括以下步骤：

步骤201，从所述目标灰色图像中确定出能够在所述显示区域中完整显示的完整图像。

示例性地，可以根据目标灰色图像中包含的各图像的排列顺序、各图像的尺寸以及图像滚动列表的显示区域的尺寸，确定目标灰色图像中能够在显示区域中完整显示的图像，能够完整显示的图像可以称为完整图像。

示例性地，可以根据接收到对滚动条的触发操作时图像滚动列表的显示区域中当前显示的完整图像的位置信息、接收到触发操作的结束指令时滚动滑块的偏移量、各图像的尺寸信息等，确定待显示的目标彩色图像以及能够完整显示在显示区域中的彩色图像，确定了能够完整显示的彩色图像，目标灰色图像中能够在显示区域中完整显示的完整图像也即确定。

步骤202，获取透明遮罩层，所述透明遮罩层包括可视化区域和非可视化区域。

其中，透明遮罩层可以是预先设置的，透明遮罩层包括可视化区域和非可视化区域，可视化区域和非可视化区域的坐标和长宽可以根据需要进行灵活调整。

步骤203，利用所述透明遮罩层覆盖所述显示区域，其中，所述可视化区域覆盖所述显示区域内的所述完整图像，所述非可视化区域覆盖所述显示区域的其他区域。

本公开实施例中，获取了透明遮罩层之后，可以利用透明遮罩层覆盖图像滚动列表的显示区域，其中，透明遮罩层的可视化区域覆盖图像滚动列表的显示区域内的完整图像，非可视化区域覆盖图像滚动列表的显示区域内处完整图像所在区域外的其他区域，从而，使得显示区域内的完整图像对用户而言是可见的，而其他区域则对用户不可见。

示例性地，可以根据完整图像在显示区域中的显示位置灵活调整透明遮罩层的可视化区域的坐标和尺寸，以使可视化区域与完整图像的展示区域相匹配，达到可视化区域仅覆盖完整图像的效果，使得完整图像是可见的。以及，可以根据完整图像的显示位置和显示区域的位置，灵活调整非可视化区域的作为和尺寸，以使非可视化区域与显示区域中出完整图像所在区域外的其他区域相匹配，达到非可视化区域覆盖其他区域的效果，使得其他区域中展示的图像是不可见的。

本公开实施例的图像处理方法，通过从目标灰色图像中确定出能够在显示区域中完整显示的完整图像，获取透明遮罩层，透明遮罩层包括可视化区域和非可视化区域，进而利用透明遮罩层覆盖显示区域，其中，可视化区域覆盖显示区域内的完整图像，非可视化区域覆盖显示区域的其他区域。采用本公开的方案，实现了对显示区域中展示的不完整图像进行遮罩，使不完整图像不可见，仅使完整显示的图像对用户可见，从而避免了图像滚动列表中显示不完整的半截图像的现象，改善了图像显示效果，有利于提升用户的视觉体验。

本公开实施例中，可以针对目标灰色图像中完整图像和不能完整展示的图像之间不同的位置关系，预先设置对应的透明遮罩层，以利用对应的透明遮罩层覆盖图像滚动列表的显示区域，以降低覆盖时的处理复杂度。从而，在本公开的一种可选实施方式中，获取透明遮罩层，可以包括：

若所述目标灰色图像中包括所述完整图像和所述完整图像的后一张图像的部分图像，则获取第一透明遮罩层，所述第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与所述第一非可视化区域之间相邻两边的距离小于预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像、所述完整图像和所述完整图像的后一张图像的部分图像，则获取第二透明遮罩层，所述第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且所述第二非可视化区域与所述第一可视化区域之间相邻两边的距离小于所述预设距离阈值，且所述第二可视化区域与所述第三非可视化区域之间相邻两边的距离小于所述预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像和所述完整图像，则获取第三透明遮罩层，所述第三透明遮罩层包括第四非可视化区域和第三可视化区域，且所述第三可视化区域与所述第四非可视化区域之间相邻两边的距离小于所述预设距离阈值。

其中，预设距离阈值可以根据实际需求进行设定，比如，可以根据图像滚动列表中相邻两张图像之间的间隔，设置预设距离阈值，其中，预设距离阈值不大于相邻两张图像之间的间隔，以避免可视化区域不能完全覆盖完整图像或者非可视化区域不能完全覆盖部分图像的现象。

能够理解的是，当图像滚动列表为竖直方向的列表时，相邻两张图像之间的间隔是指前一张图像的底边与后一张图像的顶边之间的距离；当图像滚动列表为水平方向的列表时，相邻两张图像之间的间隔是指前一张图像的右边与后一张图像的左边之间的距离。

本公开实施例中，当需要获取透明遮罩层时，可以先确定目标灰色图像中能够完整地在图像滚动列表的显示区域中展示的完整图像与无法完整展示的部分图像之间的位置关系，再根据确定的位置关系选择合适的透明遮罩层来覆盖显示区域。具体地，如果目标灰色图像中包括完整图像和完整图像的后一张图像的部分图像，也就是说，完整图像和部分图像的位置关系为完整图像在部分图像的前面，则获取第一透明遮罩层，其中，第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与第一非可视化区域之间相邻两边的距离小于预设距离阈值。如果目标灰色图像中包括完整图像的前一张图像的部分图像、完整图像和完整图像的后一张图像的部分图像，也就是说，完整图像和部分图像的位置关系为部分图像分列于完整图像的两侧，则获取第二透明遮罩层，第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且第二非可视化区域与第一可视化区域之间相邻两边的距离小于预设距离阈值，且第二可视化区域与第三非可视化区域之间相邻两边的距离小于预设距离阈值。如果目标灰色图像中包括完整图像的前一张图像的部分图像和完整图像，也就是说，完整图像和部分图像的位置关系为部分图像在完整图像的前面，则获取第三透明遮罩层，第三透明遮罩层包括第四非可视化区域和第三可视化区域，且第三可视化区域与第四非可视化区域之间相邻两边的距离小于预设距离阈值。其中，前、后是根据图像在图像滚动列表中的出现顺序确定的，先出现的图像在前，后出现的图像在后。

在本公开实施例中，通过根据目标灰色图像中包含的完整图像和部分图像的位置关系不同，选择不同的透明遮罩层来覆盖图像滚动列表的显示区域，实现了选择合适的透明遮罩层来覆盖显示区域，有利于提高方法的灵活性。另外，选择与完整图像和部分图像的位置关系对应的透明遮罩层来覆盖图像滚动列表的显示区域，在覆盖时只需简单调整可视化区域和非可视化区域的坐标和尺寸即可，无需更换可视化区域和非可视化区域的位置，从而降低了覆盖时的处理复杂度。

在本公开的一种可选实施方式中，在利用获取的透明遮罩层覆盖图像滚动列表的显示区域时，可以先获取显示区域的第一位置信息以及能够在显示区域中完整显示的完整图像在显示区域中的第二位置信息，并根据第一位置信息和第二位置信息，确定显示区域中除完整图像外的其他区域对应的第三位置信息，进而基于第二位置信息，将透明遮罩层的可视化区域覆盖显示在完整图像上，以及基于第三位置信息，将透明遮罩层的非可视化区域覆盖显示在其他区域上。

其中，位置信息可以表示为二维坐标的形式。

在本公开实施例中，通过获取显示区域中需要进行可视化显示的区域的第二位置信息，以及需要进行非可视化显示的其他区域的第三位置信息，进而基于第二位置信息将透明遮罩层的可视化区域覆盖显示在完整图像上，基于第三位置信息将非可视化区域覆盖显示在其他区域上，能够准确地对显示区域中的完整图像进行可视化显示以及对显示区域中的部分图像进行覆盖使其不可见，提高透明遮罩效果。

能够理解的是，当目标灰色图像中包含无法完整展示的部分图像时，才需要对部分图像进行遮罩，使其对用户不可见，以提高图像的显示效果；当目标灰色图像中仅包含能够完整展示在显示区域的完整图像时，则利用透明遮罩层对显示区域进行遮罩是无意义的。因此，在本公开的一种可选实施方式中，在获取透明遮罩层对显示区域进行覆盖之前，可以先判断目标灰色图像中是否包含无法在显示区域中完整显示的残余图像，并在确定目标灰色图像中包含无法在显示区域内完整显示的残余图像时，才执行上述实施例中获取透明遮罩层来覆盖图像滚动列表的显示区域的步骤。

示例性地，在判断目标灰色图像中是否包含无法在显示区域中完整显示的残余图像时，可以根据图像滚动列表的显示区域的尺寸和目标灰色图像中各图像的总尺寸，来判断目标灰色图像中是否包含无法完整显示的残余图像。比如，以图像滚动列表为竖直方向的列表为例，可以获取图像滚动列表的显示区域的高度，并获取目标灰色图像中包含的图像的数量以及每张图像的高度，进而根据每张图像的高度以及预设的相邻两张图像之间的间隔，确定显示目标灰色图像所需的总高度，如果该总高度大于显示区域的高度，则确定目标灰色图像中包含无法在显示区域中完整显示的残余图像。

在本公开实施例中，通过在获取透明遮罩层对显示区域进行覆盖之前，先确定目标灰色图像中包含无法在显示区域内完整显示的残余图像，之后再获取透明遮罩层来覆盖显示区域，由此，实现了仅在目标灰色图像中包含无法完整显示的图像时才进行遮罩操作，对目标灰色图像均能够在显示区域中完整显示的情况则无需进行遮罩操作，从而能够避免不必要的遮罩操作，有利于节省处理资源。

需要说明的是，本公开实施例中，当图像滚动列表的显示区域中显示的是彩色图像时，也可以采用上述方案对显示的不完整的彩色图像进行遮罩，使得仅完整显示的彩色图像对用户可见，上述实施例仅以对显示区域中显示的不完整的灰色图像进行遮罩作为示例来解释说明的本公开，而不能作为对本公开的限制。

图4示出了本公开一示例性实施例的透明遮罩层覆盖显示区域的效果示意图。在图2所示的展示效果中，图像A和图像C仅显示出部分图像，影响了美观性，因此采用本公开的方案，可以获取透明遮罩层对图像A和图像C的部分图像进行覆盖，使得用户仅可见完整显示的图像B，覆盖后的展示效果如图4所示，图4中，虚线部分表示透明遮罩层的非可视化区域，能够理解的是，实际应用中，虚线是不存在的，图4仅利用虚线框来指示被覆盖的不可见区域，而不是实际展示内容。从图4可以看出，对于仅展示出部分图像的图像A和图像C是用户不可见的，改善了图像展示效果，提高了美观性。

本公开示例性实施例还提供了一种图像处理装置。图5示出了根据本公开示例性实施例的图像处理装置的示意性框图，如图5所示，该图像处理装置50包括：接收模块501、确定模块502、渲染模块503和展示模块504。

其中，接收模块501，用于接收用户对图像滚动列表中的滚动条的触发操作；

确定模块502，用于响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；

渲染模块503，用于在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；

展示模块504，用于在所述图像滚动列表的显示区域内展示所述目标灰色图像。

可选地，所述图像处理装置50还包括：

第一获取模块，用于获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；

判断模块，用于在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。

可选地，所述判断模块，还用于：

在所述彩色图像中包含所述目标彩色图像的情况下，确定所述目标彩色图像不满足所述置灰显示条件；

所述展示模块504，还用于：

在所述图像滚动列表的显示区域内展示所述目标彩色图像。

可选地，图像处理装置50还包括：

第一处理模块，用于从所述目标灰色图像中确定出能够在所述显示区域中完整显示的完整图像；

第二获取模块，用于获取透明遮罩层，所述透明遮罩层包括可视化区域和非可视化区域；

第二处理模块，用于利用所述透明遮罩层覆盖所述显示区域，其中，所述可视化区域覆盖所述显示区域内的所述完整图像，所述非可视化区域覆盖所述显示区域的其他区域。

可选地，所述第二处理模块，还用于：

获取所述显示区域的第一位置信息和所述完整图像在所述显示区域中的第二位置信息；

根据所述第一位置信息和所述第二位置信息，确定所述显示区域中除所述完整图像外的其他区域对应的第三位置信息；

基于所述第二位置信息，将所述透明遮罩层的所述可视化区域覆盖显示在所述完整图像上；

基于所述第三位置信息，将所述透明遮罩层的所述非可视化区域覆盖显示在所述其他区域上。

可选地，所述第二获取模块，还用于：

若所述目标灰色图像中包括所述完整图像和所述完整图像的后一张图像的部分图像，则获取第一透明遮罩层，所述第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与所述第一非可视化区域之间相邻两边的距离小于预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像、所述完整图像和所述完整图像的后一张图像的部分图像，则获取第二透明遮罩层，所述第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且所述第二非可视化区域与所述第一可视化区域之间相邻两边的距离小于所述预设距离阈值，且所述第二可视化区域与所述第三非可视化区域之间相邻两边的距离小于所述预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像和所述完整图像，则获取第三透明遮罩层，所述第三透明遮罩层包括第四非可视化区域和第三可视化区域，且所述第三可视化区域与所述第四非可视化区域之间相邻两边的距离小于所述预设距离阈值。

可选地，所述图像处理装置50还包括：

第三处理模块，用于确定所述目标灰色图像中包含无法在所述显示区域内完整显示的残余图像。

本公开实施例所提供的图像处理装置，可执行本公开实施例所提供的任意可应用于电子设备的图像处理方法，具备执行方法相应的功能模块和有益效果。本公开装置实施例中未详尽描述的内容可以参考本公开任意方法实施例中的描述。

本公开示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本公开实施例的图像处理方法。

本公开示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的图像处理方法。

本公开示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的图像处理方法。

参考图6，现将描述可以作为本公开的服务器或客户端的电子设备1100的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图6所示，电子设备1100包括计算单元1101，其可以根据存储在只读存储器(ROM)1102中的计算机程序或者从存储单元1108加载到随机访问存储器(RAM)1103中的计算机程序，来执行各种适当的动作和处理。在RAM1103中，还可存储设备1100操作所需的各种程序和数据。计算单元1101、ROM 1102以及RAM 1103通过总线1104彼此相连。输入/输出(I/O)接口1105也连接至总线1104。

电子设备1100中的多个部件连接至I/O接口1105，包括：输入单元1106、输出单元1107、存储单元1108以及通信单元1109。输入单元1106可以是能向电子设备1100输入信息的任何类型的设备，输入单元1106可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元1107可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1108可以包括但不限于磁盘、光盘。通信单元1109允许电子设备1100通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元1101可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1101的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1101执行上文所描述的各个方法和处理。例如，在一些实施例中，图像处理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1108。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1102和/或通信单元1109而被载入和/或安装到电子设备1100上。在一些实施例中，计算单元1101可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图像处理方法。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

如本公开使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

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

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

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

Claims (9)

1.一种图像处理方法，其中，所述方法包括：

接收用户对图像滚动列表中的滚动条的触发操作；

响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；

在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；

在所述图像滚动列表的显示区域内展示所述目标灰色图像；

其中，所述确定所述目标彩色图像满足预设的置灰显示条件，包括：

获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；

在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。

2.如权利要求1所述的图像处理方法，其中，所述方法还包括：

在所述彩色图像中包含所述目标彩色图像的情况下，确定所述目标彩色图像不满足所述置灰显示条件；

在所述图像滚动列表的显示区域内展示所述目标彩色图像。

3.如权利要求1或2所述的图像处理方法，其中，所述方法还包括：

从所述目标灰色图像中确定出能够在所述显示区域中完整显示的完整图像；

获取透明遮罩层，所述透明遮罩层包括可视化区域和非可视化区域；

利用所述透明遮罩层覆盖所述显示区域，其中，所述可视化区域覆盖所述显示区域内的所述完整图像，所述非可视化区域覆盖所述显示区域的其他区域。

4.如权利要求3所述的图像处理方法，其中，所述利用所述透明遮罩层覆盖所述显示区域，包括：

获取所述显示区域的第一位置信息和所述完整图像在所述显示区域中的第二位置信息；

根据所述第一位置信息和所述第二位置信息，确定所述显示区域中除所述完整图像外的其他区域对应的第三位置信息；

基于所述第二位置信息，将所述透明遮罩层的所述可视化区域覆盖显示在所述完整图像上；

基于所述第三位置信息，将所述透明遮罩层的所述非可视化区域覆盖显示在所述其他区域上。

5.如权利要求3所述的图像处理方法，其中，所述获取透明遮罩层，包括：

若所述目标灰色图像中包括所述完整图像和所述完整图像的后一张图像的部分图像，则获取第一透明遮罩层，所述第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与所述第一非可视化区域之间相邻两边的距离小于预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像、所述完整图像和所述完整图像的后一张图像的部分图像，则获取第二透明遮罩层，所述第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且所述第二非可视化区域与所述第一可视化区域之间相邻两边的距离小于所述预设距离阈值，且所述第二可视化区域与所述第三非可视化区域之间相邻两边的距离小于所述预设距离阈值；

若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像和所述完整图像，则获取第三透明遮罩层，所述第三透明遮罩层包括第四非可视化区域和第三可视化区域，且所述第三可视化区域与所述第四非可视化区域之间相邻两边的距离小于所述预设距离阈值。

6.如权利要求3所述的图像处理方法，其中，所述方法还包括：

确定所述目标灰色图像中包含无法在所述显示区域内完整显示的残余图像。

7.一种图像处理装置，包括：

接收模块，用于接收用户对图像滚动列表中的滚动条的触发操作；

确定模块，用于响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；

渲染模块，用于在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；

展示模块，用于在所述图像滚动列表的显示区域内展示所述目标灰色图像；

其中，所述装置还包括：

第一获取模块，用于获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；

判断模块，用于在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。

8.一种电子设备，包括：

处理器；以及

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1-6中任一项所述的图像处理方法。

9.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-6中任一项所述的图像处理方法。

Images