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

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

Info

Publication number
WO2023232014A1
WO2023232014A1 PCT/CN2023/097058 CN2023097058W WO2023232014A1 WO 2023232014 A1 WO2023232014 A1 WO 2023232014A1 CN 2023097058 W CN2023097058 W CN 2023097058W WO 2023232014 A1 WO2023232014 A1 WO 2023232014A1
Authority
WO
WIPO (PCT)
Prior art keywords
image
area
gray
mask layer
display
Prior art date
Application number
PCT/CN2023/097058
Other languages
English (en)
French (fr)
Inventor
闫晓林
吕鸿瑞
Original Assignee
北京新唐思创教育科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京新唐思创教育科技有限公司 filed Critical 北京新唐思创教育科技有限公司
Publication of WO2023232014A1 publication Critical patent/WO2023232014A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • G06T15/20—Perspective computation
    • G06T15/205—Image-based rendering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars

Definitions

  • the present disclosure relates to the field of image processing technology, and in particular, to an image processing method, device, electronic device and storage medium.
  • the resource package contains two sets of image resources, and the images contain the same content, with only differences in color. Duplicate resources lead to an increase in the size of the resource package and occupy larger storage resources.
  • embodiments of the present disclosure provide an image processing method, device, electronic device and storage medium.
  • an image processing method including:
  • the target gray image is displayed within the display area of the image scroll list.
  • an image processing device including:
  • the receiving module is used to receive the user's trigger operation on the scroll bar in the image scrolling list
  • a determination module configured to determine the target color image to be displayed in the image scrolling list in response to the end instruction of the trigger operation
  • a rendering module configured to perform rendering processing on the target color image based on a preset gray shader to obtain a target gray image when it is determined that the target color image satisfies the preset gray display conditions
  • a display module configured to display the target gray image in the display area of the image scrolling list.
  • an electronic device including:
  • the program includes instructions that, when executed by the processor, cause the processor to execute the image processing method according to the foregoing aspect.
  • a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute the image processing method according to the foregoing aspect.
  • a computer program product including a computer program, wherein the computer program implements the image processing method described in the foregoing aspect when executed by a processor.
  • One or more technical solutions provided in the embodiments of the present disclosure obtain the target color image by using a preset gray shader to render the target color image when the target color image to be displayed satisfies the preset gray display conditions.
  • the gray image is displayed in the display area of the image scrolling list, and the gray shader is used to render the target color image that needs to be displayed in gray, thereby eliminating the need to add a corresponding gray image for each color image in the resource package. This effectively reduces the size of the resource package and saves storage resources.
  • Figure 1 shows a flowchart of an image processing method according to an exemplary embodiment of the present disclosure
  • Figure 2 shows an example of the display effect in which the target color image includes three images and all meet the gray display conditions in an exemplary embodiment of the present disclosure
  • FIG. 3 shows a flowchart of an image processing method according to another exemplary embodiment of the present disclosure
  • Figure 4 shows a schematic diagram of the effect of the transparent mask layer covering the display area according to an exemplary embodiment of the present disclosure
  • FIG. 5 shows a schematic block diagram of an image processing device according to an exemplary embodiment of the present disclosure
  • FIG. 6 shows a structural block diagram of an exemplary electronic device that can be used to implement embodiments of the present disclosure.
  • the term “include” and its variations are open-ended, ie, “including but not limited to.”
  • the term “based on” means “based at least in part on.”
  • the term “one embodiment” means “at least one embodiment”; the term “another embodiment” means “at least one additional embodiment”; and the term “some embodiments” means “at least some embodiments”.
  • Relevant definitions of other terms will be given in the description below. It should be noted that concepts such as “first” and “second” mentioned in this disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units. Or interdependence.
  • the present disclosure provides an image processing method.
  • the preset gray shader is used to render the target color image to obtain the target color image.
  • the gray image is displayed in the display area of the image scrolling list, and the gray shader is used to render the target color image that needs to be displayed in gray, thereby eliminating the need to add a corresponding gray image for each color image in the resource package.
  • a gray image can be obtained by rendering gray based on the preset gray shader, avoiding the development work of replacing the image, thereby alleviating The workload of developers; the graying method provided by the present disclosure will not change the RGB channel parameters of the original color image, and can gray out the image to obtain a gray image without affecting the quality of the original image, which improves the quality of the gray image. Visual effect.
  • FIG. 1 shows a flowchart of an image processing method according to an exemplary embodiment of the present disclosure.
  • the method can be implemented by the present disclosure.
  • the image processing device provided in the embodiment is executed, where the device can be implemented using software and/or hardware, and can generally be integrated in electronic equipment, including but not limited to computers, mobile phones, servers and other equipment.
  • the image processing method may include the following steps:
  • Step 101 Receive the user's trigger operation on the scroll bar in the image scroll list.
  • the image scrolling list can be any image scrolling list displayed on the monitor.
  • it can be an image scrolling list when the image resources in the resource package are displayed in the application that the user is currently logged in.
  • the image scrolling list Each image in the resource package is displayed in the form of a list, where the resource package contains multiple color images.
  • the user can perform a triggering operation on the scroll bar in the image scrolling list to switch the images displayed in the display area of the image scrolling list.
  • the scroll bar includes a scroll slider, a blank area of the scroll bar, and arrows at both ends of the scroll bar.
  • the triggering operation of the scroll bar includes but is not limited to the drag operation of the scroll slider, the blank area of the scroll bar, or the arrows at both ends of the scroll bar. Click operations, etc., users can trigger operations on the scroll bar through mouse, stylus, fingers, etc.
  • Step 102 In response to the end instruction of the trigger operation, determine the target color image to be displayed in the image scroll list.
  • the electronic device when the user performs a trigger operation on the scroll bar in the image scroll list, the electronic device receives the trigger operation and monitors the end instruction of the trigger operation. For example, when it is detected that a finger touches the scroll slider, the tracking attribute of the scroll bar changes to yes. When it is detected that the finger moves on the screen, the drag attribute of the scroll bar changes to yes. When it is detected that the finger leaves the screen, the scroll bar The tracking attribute and drag attribute of the bar both change to no. At this time, the end command of the touch operation is confirmed to be monitored.
  • the target color image to be displayed in the image scroll list is determined in response to the end instruction.
  • the determined target color image contains at least one image. It can be understood that when the target color image contains multiple images, the multiple images may not be fully displayed in the display area of the image scrolling list due to the size limit of the display area of the image scrolling list. For example, if the target color image contains three images, only the second image may be fully displayed in the display area, only the bottom part of the first image may be displayed, and only the top part of the third image may be displayed. content.
  • the currently commonly used method of determining the target content displayed in the scrolling list based on the triggering operation of the scroll bar can be used to determine the target color image to be displayed in the image scrolling list, which will not be discussed here. Detailed description.
  • Step 103 When it is determined that the target color image satisfies the preset gray display conditions, render the target color image based on the preset gray shader to obtain a target gray image.
  • the gray-setting shader is preset, and the gray-setting shader gives modified gray parameters.
  • the color image can be rendered in gray without affecting the image quality of the color image, and we get Gray image.
  • the target color image to be displayed after the target color image to be displayed is determined, it can be further determined whether the target color image satisfies the preset gray display conditions, and for the target color image that satisfies the gray display conditions, based on the preset gray display conditions The shader renders to gray to obtain the target gray image.
  • the gray display conditions can be preset according to the application scenario and actual needs.
  • the gray display condition can be set to the user not studying the corresponding course.
  • the target color image it can be determined whether the user has studied the course corresponding to the target color image. If he has studied, it is determined that the gray display condition is not met. If he has not studied, it is determined that the gray display condition is met, and based on the gray coloring The device renders the target color image to obtain the corresponding target gray image.
  • the target color image contains multiple images
  • the gray rendering is performed based on the gray shader to obtain the corresponding target gray image.
  • the original color is retained and no gray processing is performed.
  • Step 104 Display the target gray image in the display area of the image scrolling list.
  • the target gray image after the target gray image is obtained, the target gray image can be displayed in the display area of the image scrolling list.
  • the target color image will be displayed in the display area of the image scroll list.
  • some of the multiple images may meet the gray display conditions and some may not meet the gray display conditions, then only the images that meet the gray display conditions will be processed based on the gray shader.
  • the corresponding gray image is obtained by rendering and graying, and during display, the grayed out image is displayed for images that meet the grayed out display conditions, and the original color image is displayed for images that do not meet the grayed out display conditions.
  • each image may not be displayed completely in the display area.
  • the display effect example is as shown in the figure.
  • Figure 2 it can be seen from Figure 2 that only the middle gray image (Image B) can be completely displayed in the display area of the image scrolling list.
  • Image B For the previous image (Image A) and the next image (Image C) ), only part of the content can be displayed.
  • the image processing method of the embodiment of the present disclosure by receiving the user's trigger operation on the scroll bar in the image scroll list, And in response to the end instruction of the trigger operation, determine the target color image to be displayed in the image scrolling list, and when it is determined that the target color image satisfies the preset gray display condition, perform the target color based on the preset gray shader.
  • the image is rendered and processed to obtain the target gray image, and then the target gray image is displayed in the display area of the image scroll list.
  • Adopting the solution of the present disclosure it is possible to use the gray shader to render gray the target color image that needs to be displayed in gray, so that there is no need to add a corresponding gray image to each color image in the resource package, thereby effectively reducing the cost of the resource package. size, which can save storage resources.
  • the props, task cards, medals and other materials that the user has received will be displayed in the user's backpack.
  • the images of the materials that the user has received will be lit up, that is, a color image will be displayed.
  • the image corresponding to the received material is grayed out, that is, a gray image is displayed. Therefore, in the embodiment of the present disclosure, whether the image meets the grayed out display condition can be determined based on the receiving status of the image. Therefore, in an optional implementation of the present disclosure, the method further includes:
  • the backpack information includes color images of the materials that the user has received
  • the target color image is not included in the color image, it is determined that the target color image satisfies the gray display condition.
  • the current virtual scene includes but is not limited to virtual classroom scene, virtual game scene, etc.
  • the type and content of the material can be different depending on the current virtual scene.
  • the materials can be courses, knowledge cards, etc. included in the virtual classroom scene; if the current virtual scene is a virtual game scene, the materials can be levels, props, etc. in the virtual game scene.
  • the user's backpack information in the current virtual scene can be obtained based on the user's login information on the premise of obtaining the user's authorization.
  • the backpack information includes the color image of the material that the user has received, and the target color to be displayed is The image is matched with the color image in the backpack information to determine whether the color image contains the target color image.
  • the matching can be performed through image recognition, image logo comparison, etc.
  • the present disclosure does not limit the specific matching method. If the matching result shows that the color image does not contain the target color image, it can be determined that the material corresponding to the target color image has not been claimed by the user, and it is determined that the target color image meets the preset gray display conditions.
  • the color image contains a target color image
  • the backpack information includes the color image of the material that the user has received, and when the color image does not contain the target color image, it is determined that the target color image satisfies
  • the gray display condition is used to gray out the target color image and display the corresponding target gray image; or, when the color image contains the target color image, it is determined that the target color image does not meet the gray display condition, and the target color image is grayed out when the image is scrolled.
  • the target color image is displayed in the display area of the dynamic list, thereby realizing whether the target color image meets the gray display condition according to the material collection status in the virtual scene, and displaying the image of the corresponding color according to the material collection status.
  • the present disclosure also proposes an image processing method. By masking the image that cannot be fully displayed, the image that cannot be fully displayed is invisible to the user, and the user can only see the fully displayed image. Images in the display area of the image scroll list, thereby improving the image display effect and enhancing the user's visual experience. This solution will be described in detail below with reference to Figure 3.
  • the image processing method may also include the following steps:
  • Step 201 Determine a complete image that can be completely displayed in the display area from the target gray image.
  • the images in the target gray image that can be completely displayed in the display area can be determined based on the order of the images included in the target gray image, the size of each image, and the size of the display area of the image scrolling list.
  • the image can be called a complete image.
  • the position information of the complete image currently displayed in the display area of the image scroll list when the trigger operation on the scroll bar is received For example, the position information of the complete image currently displayed in the display area of the image scroll list when the trigger operation on the scroll bar is received, the offset of the scroll slider when the end instruction of the trigger operation is received, and the position information of each image. Size information, etc., determine the target color image to be displayed and the color image that can be completely displayed in the display area, determine the color image that can be completely displayed, and determine the complete image of the target gray image that can be completely displayed in the display area.
  • Step 202 Obtain a transparent mask layer, which includes a visible area and a non-visualized area.
  • the transparent mask layer may be preset, and the transparent mask layer includes a visual area and a non-visual area, and the coordinates, length and width of the visual area and the non-visual area can be flexibly adjusted as needed.
  • Step 203 Use the transparent mask layer to cover the display area, wherein the visualization area covers the complete image in the display area, and the non-visualization area covers other areas of the display area.
  • the transparent mask layer can be used to cover the display area of the image scrolling list, where the visual area of the transparent mask layer covers the complete image in the display area of the image scrolling list, and is not
  • the visualization area covers other areas within the display area of the image scroll list except the area where the complete image is located, so that the complete image within the display area is visible to the user, while other areas are invisible to the user.
  • the coordinates and size of the visualization area of the transparent mask layer can be flexibly adjusted according to the display position of the complete image in the display area, so that the visualization area matches the display area of the complete image, so that the visualization area only covers the full image. The effect makes the full image visible.
  • the behavior and size of the non-visualized area can be flexibly adjusted so that the non-visualized area and the display area are perfectly aligned. Match other areas outside the area where the entire image is located, so that the non-visual area covers other areas, making the images displayed in other areas invisible.
  • the image processing method of the embodiment of the present disclosure obtains a transparent mask layer by determining a complete image that can be completely displayed in the display area from the target gray image.
  • the transparent mask layer includes a visible area and a non-visualized area, and then utilizes the transparent mask layer.
  • the overlay covers the display area, where the visualization area covers the complete image within the display area, and the non-visualization area covers other areas of the display area.
  • the incomplete image displayed in the display area is masked to make the incomplete image invisible, and only the fully displayed image is visible to the user, thereby avoiding the display of incomplete half-sections in the image scrolling list.
  • the phenomenon of images improves the image display effect and is conducive to enhancing the user's visual experience.
  • a corresponding transparent mask layer can be set in advance according to the different positional relationships between the complete image and the image that cannot be fully displayed in the target gray image, so that the corresponding transparent mask layer can be used to cover the display of the image scrolling list area to reduce processing complexity when covering. Therefore, in an optional implementation of the present disclosure, obtaining the transparent mask layer may include:
  • the target gray image includes the complete image and a partial image of the subsequent image of the complete image
  • a first transparent mask layer is obtained, and the first transparent mask layer includes a first visualization area and a third a non-visualized area, and the distance between two adjacent sides between the first visible area and the first non-visualized area is less than a preset distance threshold;
  • a second transparent mask layer is obtained,
  • the second transparent mask layer includes a second non-visualized area, a second visible area and a third non-visible area, and the distance between two adjacent sides of the second non-visible area and the first visible area is less than the predetermined area.
  • the target gray image includes a partial image of the previous image of the complete image and the complete image
  • a third transparent mask layer is obtained, and the third transparent mask layer includes a fourth non-visualized area and A third visual area, and the distance between two adjacent sides between the third visual area and the fourth non-visual area is less than the preset distance threshold.
  • the preset distance threshold can be set according to actual needs.
  • the preset distance threshold can be set according to the interval between two adjacent images in the image scrolling list, where the preset distance threshold is not greater than the two adjacent images.
  • the interval between images is to avoid the phenomenon that the visual area cannot completely cover the complete image or the non-visualized area cannot completely cover part of the image.
  • the interval between two adjacent images refers to the distance between the bottom edge of the previous image and the top edge of the next image; when the image When the scrolling list is a horizontal list, the interval between two adjacent images refers to the distance between the right side of the previous image and the left side of the next image.
  • the target gray image when it is necessary to obtain a transparent mask layer, it can first be determined that the target gray image can be completely The positional relationship between the complete image displayed in the display area of the image scrolling list and the partial image that cannot be fully displayed is determined, and then an appropriate transparent mask layer is selected to cover the display area based on the determined positional relationship. Specifically, if the target gray image includes a complete image and a partial image of the image after the complete image, that is, the positional relationship between the complete image and the partial image is that the complete image is in front of the partial image, then the first transparent mask is obtained.
  • the first transparent cover layer includes a first visible area and a first non-visible area, and the distance between two adjacent sides of the first visible area and the first non-visual area is less than a preset distance threshold. If the target gray image includes a partial image of the previous image of the complete image, a complete image and a partial image of the subsequent image of the complete image, that is to say, the positional relationship between the complete image and the partial image is that the partial image is arranged in the complete image. On both sides of the image, a second transparent mask layer is obtained.
  • the second transparent mask layer includes a second non-visualized area, a second visual area and a third non-visualized area, and the second non-visualized area and the first visible area are The distance between two adjacent sides is less than a preset distance threshold, and the distance between two adjacent sides between the second visualization area and the third non-visualization area is less than the preset distance threshold.
  • the target gray image includes a partial image and a complete image of the previous image of the complete image, that is, the positional relationship between the complete image and the partial image is that the partial image is in front of the complete image
  • obtain the third transparent mask layer The third transparent mask layer includes a fourth non-visualized area and a third visible area, and the distance between two adjacent sides of the third visible area and the fourth non-visualized area is less than a preset distance threshold.
  • the front and back are determined according to the order in which the images appear in the image scrolling list. The image that appears first is in the front, and the image that appears later is in the back.
  • the selection of an appropriate transparent mask layer is achieved To cover the display area, it is helpful to improve the flexibility of the method.
  • the first position information of the display area and the complete image that can be completely displayed in the display area can be obtained first The second position information in the display area, and based on the first position information and the second position information, determine the third position information corresponding to other areas in the display area except the complete image, and then based on the second position information, the transparent mask The visible area of the mask layer is overlaid and displayed on the complete image, and the non-visualized area of the transparent mask layer is overlaid and displayed on other areas based on the third position information.
  • the location information can be expressed in the form of two-dimensional coordinates.
  • the transparent mask layer is further modified based on the second position information.
  • the visual area coverage is displayed on the complete image, and the non-visualized area coverage is displayed based on the third position information.
  • the target gray image contains part of the image that cannot be fully displayed, it is necessary to mask part of the image to make it invisible to the user to improve the display effect of the image; when the target gray image only contains parts that can be displayed When the complete image of the display area is fully displayed, it is meaningless to use a transparent mask layer to mask the display area. Therefore, in an optional implementation of the present disclosure, before obtaining the transparent mask layer to cover the display area, it can first be determined whether the target gray image contains a residual image that cannot be completely displayed in the display area, and then determine The step of obtaining a transparent mask layer to cover the display area of the image scroll list in the above embodiment is only performed when the target gray image contains a residual image that cannot be completely displayed in the display area.
  • the target gray image may be determined based on the size of the display area of the image scrolling list and the total size of each image in the target gray image. contains residual images that cannot be fully displayed. For example, taking a vertically oriented image scrolling list as an example, you can obtain the height of the display area of the image scrolling list, the number of images contained in the target gray image, and the height of each image, and then based on the height of each image. height and the preset interval between two adjacent images to determine the total height required to display the target gray image. If the total height is greater than the height of the display area, it is determined that the target gray image contains content that cannot be fully displayed in the display area. residual image.
  • the target gray image contains a residual image that cannot be completely displayed in the display area, and then the transparent mask layer is obtained to cover the display area.
  • the masking operation is only performed when the target gray image contains an image that cannot be fully displayed.
  • the above solution when a color image is displayed in the display area of the image scrolling list, the above solution can also be used to mask the displayed incomplete color image, so that only the fully displayed color image It is obvious to the user that the above embodiment only takes masking the incomplete gray image displayed in the display area as an example to explain the present disclosure and cannot be used as a limitation on the present disclosure.
  • FIG. 4 shows a schematic diagram of the effect of the transparent mask layer covering the display area according to an exemplary embodiment of the present disclosure.
  • image A and image C only display part of the image, which affects the aesthetics. Therefore, using the solution of the present disclosure, a transparent mask layer can be obtained to cover part of the image A and image C. , so that the user can only see the fully displayed image B.
  • the overlay display effect is shown in Figure 4.
  • the dotted line represents the non-visualized area of the transparent mask layer. It can be understood that in actual applications, the dotted line is not Yes, Figure 4 only utilizes the dashed box to indicate the covered invisible area, rather than actually displaying the content. It can be seen from Figure 4 that image A and image C, which only display part of the image, are invisible to the user, which improves the image display effect and enhances the aesthetics.
  • FIG. 5 shows a schematic block diagram of an image processing device according to an exemplary embodiment of the present disclosure.
  • the image processing device 50 includes: a receiving module 501, a determining module 502, a rendering module 503 and a display module 504.
  • the receiving module 501 is used to receive the user's trigger operation on the scroll bar in the image scroll list;
  • Determining module 502 configured to determine the target color image to be displayed in the image scrolling list in response to the end instruction of the triggering operation
  • the rendering module 503 is configured to perform rendering processing on the target color image based on the preset gray shader to obtain a target gray image when it is determined that the target color image satisfies the preset gray display conditions;
  • Display module 504 configured to display the target gray image in the display area of the image scrolling list.
  • the image processing device 50 further includes:
  • the first acquisition module is used to acquire the user's backpack information in the current virtual scene, where the backpack information includes color images of materials that the user has received;
  • a judgment module configured to determine that the target color image satisfies the gray display condition when the color image does not include the target color image.
  • the judgment module is also used to:
  • the target color image When the target color image is included in the color image, it is determined that the target color image does not satisfy the gray display condition
  • the display module 504 is also used to:
  • the target color image is displayed within the display area of the image scroll list.
  • the image processing device 50 further includes:
  • a first processing module configured to determine a complete image that can be completely displayed in the display area from the target gray image
  • the second acquisition module is used to acquire a transparent mask layer, where the transparent mask layer includes a visible area and a non-visualized area;
  • the second processing module is configured to use the transparent mask layer to cover the display area, wherein the visualization area covers the complete image in the display area, and the non-visualization area covers other parts of the display area. area.
  • the second processing module is also used to:
  • the visible area of the transparent mask layer is covered and displayed on the complete image.
  • the visible area of the transparent mask layer is covered and displayed on the complete image.
  • the non-visualized area of the transparent mask layer is covered and displayed on the other areas.
  • the second acquisition module is also used to:
  • the target gray image includes the complete image and a partial image of the subsequent image of the complete image
  • a first transparent mask layer is obtained, and the first transparent mask layer includes a first visualization area and a third a non-visualized area, and the distance between two adjacent sides between the first visible area and the first non-visualized area is less than a preset distance threshold;
  • a second transparent mask layer is obtained,
  • the second transparent mask layer includes a second non-visualized area, a second visible area and a third non-visible area, and the distance between two adjacent sides of the second non-visible area and the first visible area is less than the predetermined area.
  • the target gray image includes a partial image of the previous image of the complete image and the complete image
  • a third transparent mask layer is obtained, and the third transparent mask layer includes a fourth non-visualized area and A third visual area, and the distance between two adjacent sides between the third visual area and the fourth non-visual area is less than the preset distance threshold.
  • the image processing device 50 further includes:
  • the third processing module is used to determine that the target gray image contains a residual image that cannot be completely displayed in the display area.
  • the image processing device provided by the embodiments of the present disclosure can execute any image processing method provided by the embodiments of the present disclosure that can be applied to electronic devices, and has functional modules and beneficial effects corresponding to the execution method.
  • Contents that are not described in detail in the device embodiments of the present disclosure may refer to the descriptions in any method embodiments of the present disclosure.
  • Exemplary embodiments of the present disclosure also provide an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor.
  • the memory stores a computer program that can be executed by the at least one processor, and when executed by the at least one processor, the computer program is used to cause the electronic device to execute:
  • determining that the target color image satisfies the preset gray display conditions includes: obtaining the user's backpack information in the current virtual scene, where the backpack information includes the color image of the material that the user has received; and the color image does not contain the target color image. In the case of images, it is determined that the target color image satisfies the gray display condition.
  • the computer program when executed by the at least one processor, it is also used to cause the electronic device to execute: when the color image contains a target color image, determine that the target color image does not satisfy the gray display. Condition; display the target color image within the display area of the image scroll list.
  • the computer program when executed by the at least one processor, is also used to cause the electronic device to: determine a complete image that can be fully displayed in the display area from the target gray image; obtain a transparent mask; Cover layer, the transparent cover layer includes a visual area and a non-visual area; the transparent cover layer is used to cover the display area, where the visual area covers the complete image in the display area, and the non-visual area covers other areas of the display area.
  • using a transparent mask layer to cover the display area includes: obtaining the first position information of the display area and the second position information of the complete image in the display area; and determining the display area based on the first position information and the second position information.
  • the third position information corresponding to other areas except the complete image; based on the second position information, the visible area of the transparent mask layer is covered and displayed on the complete image; based on the third position information, the non-visualized area of the transparent mask layer is displayed Area overlays appear over other areas.
  • a transparent mask layer including:
  • a first transparent mask layer is obtained, and the first transparent mask layer includes a first visible area and a first non-visualized area, and the first The distance between two adjacent sides between the visual area and the first non-visualized area is less than a preset distance threshold;
  • the target gray image includes a partial image of the previous image of the complete image, a complete image, and a partial image of the subsequent image of the complete image
  • a second transparent mask layer is obtained, and the second transparent mask layer includes a second non- The visual area, the second visual area and the third non-visual area, and the distance between the two adjacent sides of the second non-visual area and the first visual area is less than the preset distance threshold, and the distance between the second visual area and the third non-visual area The distance between two adjacent sides is less than the preset distance threshold;
  • the target gray image includes a partial image and a complete image of the previous image of the complete image
  • a third transparent mask layer is obtained, and the third transparent mask layer includes a fourth non-visualized area and a third visible area, and the third The distance between two adjacent sides between the visualization area and the fourth non-visualization area is less than a preset distance threshold.
  • the computer program when executed by the at least one processor, is further configured to cause the electronic device to perform: determining that the target gray image contains a residual image that cannot be completely displayed in the display area.
  • Exemplary embodiments of the present disclosure also provide a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause the computer to execute:
  • determining that the target color image satisfies the preset gray display conditions includes: obtaining the user's backpack information in the current virtual scene, where the backpack information includes the color image of the material that the user has received; and the color image does not contain the target color image. In the case of images, it is determined that the target color image satisfies the gray display conditions.
  • the computer instructions are also used to cause the computer to perform: when the color image contains a target color image, determine that the target color image does not meet the gray display condition; display the target in the display area of the image scroll list Color image.
  • the computer instructions are also used to cause the computer to perform: determine a complete image that can be completely displayed in the display area from the target gray image; obtain a transparent mask layer, the transparent mask layer includes the visual area and the non-visible area. Visualization area; use a transparent mask layer to cover the display area, where the visualization area covers the complete image in the display area, and the non-visualization area covers other areas of the display area.
  • using a transparent mask layer to cover the display area includes: obtaining the first position information of the display area and the second position information of the complete image in the display area; and determining the display area based on the first position information and the second position information.
  • the third position information corresponding to other areas except the complete image; based on the second position information, the visible area of the transparent mask layer is covered and displayed on the complete image; based on the third position information, the non-visualized area of the transparent mask layer is displayed Area overlays appear over other areas.
  • a transparent mask layer including:
  • a first transparent mask layer is obtained, and the first transparent mask layer includes a first visible area and a first non-visualized area, and the first The distance between two adjacent sides between the visual area and the first non-visualized area is less than a preset distance threshold;
  • the target gray image includes a partial image of the previous image of the complete image, a complete image, and a partial image of the subsequent image of the complete image
  • a second transparent mask layer is obtained, and the second transparent mask layer includes a second non- The visual area, the second visual area and the third non-visual area, and the distance between the two adjacent sides of the second non-visual area and the first visual area is less than the preset distance threshold, and the distance between the second visual area and the third non-visual area The distance between two adjacent sides is less than the preset distance threshold;
  • the target gray image includes a partial image and a complete image of the previous image of the complete image
  • a third transparent mask layer is obtained, and the third transparent mask layer includes a fourth non-visualized area and a third visible area, and the third The distance between two adjacent sides between the visualization area and the fourth non-visualization area is less than a preset distance threshold.
  • the computer instructions are also used to cause the computer to perform: determining that the target gray image contains a residual image that cannot be completely displayed in the display area.
  • Exemplary embodiments of the present disclosure also provide a computer program product, including a computer program, wherein the computer program, when executed by a processor of a computer, is used to cause the computer to perform the image processing method according to embodiments of the present disclosure.
  • Electronic devices are intended to refer to various forms of digital electronic computing equipment, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices.
  • the components shown herein, their connections and relationships, and their functions are examples only and are not intended to limit implementations of the disclosure described and/or claimed herein.
  • the electronic device 1100 includes a computing unit 1101 that can perform calculations according to a computer program stored in a read-only memory (ROM) 1102 or loaded from a storage unit 1108 into a random access memory (RAM) 1103 . Perform various appropriate actions and processing.
  • RAM random access memory
  • various programs and data required for the operation of the device 1100 can also be stored.
  • Computing unit 1101, ROM 1102 and RAM 1103 are connected to each other via bus 1104.
  • An input/output (I/O) interface 1105 is also connected to bus 1104.
  • the input unit 1106 may be any type of device capable of inputting information to the electronic device 1100.
  • the input unit 1106 may receive input numeric or character information and generate key signal input related to user settings and/or function control of the electronic device.
  • Output unit 1107 may be any type of device capable of presenting information, and may include, but is not limited to, a display, speakers, video/audio output terminal, vibrator, and/or printer.
  • the storage unit 1108 may include, but is not limited to, magnetic disks and optical disks.
  • the communication unit 1109 allows the electronic device 1100 to exchange information/data with other devices through a computer network such as the Internet and/or various telecommunications networks, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver and/or a chip Groups such as BluetoothTM devices, WiFi devices, WiMax devices, cellular communications devices and/or the like.
  • Computing unit 1101 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of computing units 1101 include, but are not limited to, central processing units (CPUs), graphics processing units (GPUs), various dedicated artificial intelligence (AI) computing chips, various computing units that run machine learning model algorithms, digital signal processing processor (DSP), and any appropriate processor, controller, microcontroller, etc.
  • the computing unit 1101 performs various methods and processes described above.
  • the image processing method may be implemented as a computer software program that is tangibly embodied in a machine-readable medium, such as the storage unit 1108.
  • part or all of the computer program may be loaded and/or installed onto the electronic device 1100 via the ROM 1102 and/or the communication unit 1109.
  • the computing unit 1101 may be configured to perform the image processing method in any other suitable manner (eg, by means of firmware).
  • Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or processor of a general-purpose computer, special-purpose computer or other programmable data processing device. Controller such that the program code, when executed by the processor or controller, causes the functions/operations specified in the flowchart and/or block diagram to be performed.
  • the program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.
  • a machine-readable medium may be a tangible medium that may contain or store a program for use by or in connection with an instruction execution system, apparatus, or device.
  • the machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium.
  • Machine-readable media may include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any suitable combination of the foregoing.
  • machine-readable storage media would include one or more wire-based electrical connections, laptop disks, hard drives, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • RAM random access memory
  • ROM read only memory
  • EPROM or flash memory erasable programmable read only memory
  • CD-ROM portable compact disk read-only memory
  • magnetic storage device or any suitable combination of the above.
  • machine-readable medium and “computer-readable medium” refer to any computer program product, apparatus, and/or means for providing machine instructions and/or data to a programmable processor (eg, magnetic disk, optical disk, memory, programmable logic device (PLD)), including machine-readable media that receive machine instructions as machine-readable signals.
  • machine-readable signal refers to any signal used to provide machine instructions and/or data to a programmable processor.
  • the systems and techniques described herein may be implemented on a computer having a display device (eg, a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user ); and a keyboard and pointing device (eg, a mouse or a trackball) through which a user can provide input to the computer.
  • a display device eg, a CRT (cathode ray tube) or LCD (liquid crystal display) monitor
  • a keyboard and pointing device eg, a mouse or a trackball
  • Other kinds of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and may be provided in any form, including Acoustic input, voice input or tactile input) to receive input from the user.
  • the systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., A user's computer having a graphical user interface or web browser through which the user can interact with implementations of the systems and technologies described herein), or including such backend components, middleware components, or any combination of front-end components in a computing system.
  • the components of the system may be interconnected by any form or medium of digital data communication (eg, a communications network). Examples of communication networks include: local area network (LAN), wide area network (WAN), and the Internet.
  • Computer systems may include clients and servers.
  • Clients and servers are generally remote from each other and typically interact over a communications network.
  • the relationship of client and server is created by computer programs running on corresponding computers and having a client-server relationship with each other.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

图像处理方法、装置、电子设备及存储介质
本申请要求申请日为2022年6月2日，申请号为“202210625319.8”，专利名称为“图像处理方法、装置、电子设备及存储介质”的发明申请的优先权，其全部内容在此引入作为参考。
技术领域
本公开涉及图像处理技术领域，尤其涉及一种图像处理方法、装置、电子设备及存储介质。
背景技术
在一些应用场景中，经常需要交替显示同一图像的彩色状态和灰色状态，比如，当某个按钮不可用时，显示灰色的按钮图像，当按钮可用时，显示彩色的按钮图像。
目前，相关技术中，对于需要交替显示彩色和灰色两种不同颜色的图像的场景，通常是针对每张彩色图像，增加一张灰色图像与其对应，这就使得场景的资源包中包含内容相同但颜色不同的两套图像，当需要置灰或点亮时，从资源包中选择合适的图像资源进行替换显示。
然而，上述方案中，资源包中包含两套图像资源，且图像包含的内容相同，仅颜色存在差异，重复的资源导致资源包的包体增大，会占用较大的存储资源。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题，本公开实施例提供了一种图像处理方法、装置、电子设备及存储介质。
根据本公开的一方面，提供了一种图像处理方法，包括：
接收用户对图像滚动列表中的滚动条的触发操作；
响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；
在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；
在所述图像滚动列表的显示区域内展示所述目标灰色图像。
根据本公开的另一方面，提供了一种图像处理装置，包括：
接收模块，用于接收用户对图像滚动列表中的滚动条的触发操作；
确定模块，用于响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；
渲染模块，用于在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；
展示模块，用于在所述图像滚动列表的显示区域内展示所述目标灰色图像。
根据本公开的另一方面，提供了一种电子设备，包括：
处理器；以及
存储程序的存储器，
其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据前述一方面所述的图像处理方法。
根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据前述一方面所述的图像处理方法。
根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现前述一方面所述的图像处理方法。
本公开实施例中提供的一个或多个技术方案，通过在待显示的目标彩色图像满足预设的置灰显示条件时，利用预设的置灰着色器对目标彩色图像进行渲染处理，得到目标灰色图像并显示在图像滚动列表的显示区域内，实现了利用置灰着色器对需要灰色显示的目标彩色图像进行渲染置灰，从而无需在资源包中为每张彩色图像增加对应的灰色图像，从而有效减小了资源包的大小，能够节约存储资源。
附图说明
在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：
图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 (16)

  1. 一种图像处理方法，所述方法包括：
    接收用户对图像滚动列表中的滚动条的触发操作；
    响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；
    在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；
    在所述图像滚动列表的显示区域内展示所述目标灰色图像。
  2. 如权利要求1所述的图像处理方法，其中，所述确定所述目标彩色图像满足预设的置灰显示条件，包括：
    获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；
    在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。
  3. 如权利要求1或2所述的图像处理方法，其中，所述方法还包括：
    在所述彩色图像中包含所述目标彩色图像的情况下，确定所述目标彩色图像不满足所述置灰显示条件；
    在所述图像滚动列表的显示区域内展示所述目标彩色图像。
  4. 如权利要求1-3中任一项所述的图像处理方法，其中，所述方法还包括：
    从所述目标灰色图像中确定出能够在所述显示区域中完整显示的完整图像；
    获取透明遮罩层，所述透明遮罩层包括可视化区域和非可视化区域；
    利用所述透明遮罩层覆盖所述显示区域，其中，所述可视化区域覆盖所述显示区域内的所述完整图像，所述非可视化区域覆盖所述显示区域的其他区域。
  5. 如权利要求4所述的图像处理方法，其中，所述利用所述透明遮罩层覆盖所述显示区域，包括：
    获取所述显示区域的第一位置信息和所述完整图像在所述显示区域中的第二位置信息；
    根据所述第一位置信息和所述第二位置信息，确定所述显示区域中除所述完整图像外的其他区域对应的第三位置信息；
    基于所述第二位置信息，将所述透明遮罩层的所述可视化区域覆盖显示在所述完整图像上；
    基于所述第三位置信息，将所述透明遮罩层的所述非可视化区域覆盖显示在所述其他区域上。
  6. 如权利要求4或5所述的图像处理方法，其中，所述获取透明遮罩层，包括：
    若所述目标灰色图像中包括所述完整图像和所述完整图像的后一张图像的部分图像，则获取第一透明遮罩层，所述第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与所述第一非可视化区域之间相邻两边的距离小于预设距离阈值；
    若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像、所述完整图像和所述完整图像的后一张图像的部分图像，则获取第二透明遮罩层，所述第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且所述第二非可视化区域与所述第一可视化区域之间相邻两边的距离小于所述预设距离阈值，且所述第二可视化区域与所述第三非可视化区域之间相邻两边的距离小于所述预设距离阈值；
    若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像和所述完整图像，则获取第三透明遮罩层，所述第三透明遮罩层包括第四非可视化区域和第三可视化区域，且所述第三可视化区域与所述第四非可视化区域之间相邻两边的距离小于所述预设距离阈值。
  7. 如权利要求4-6中任一项所述的图像处理方法，其中，所述方法还包括：
    确定所述目标灰色图像中包含无法在所述显示区域内完整显示的残余图像。
  8. 一种图像处理装置，包括：
    接收模块，用于接收用户对图像滚动列表中的滚动条的触发操作；
    确定模块，用于响应于所述触发操作的结束指令，确定所述图像滚动列表中待显示的目标彩色图像；
    渲染模块，用于在确定所述目标彩色图像满足预设的置灰显示条件的情况下，基于预设的置灰着色器对所述目标彩色图像进行渲染处理，得到目标灰色图像；
    展示模块，用于在所述图像滚动列表的显示区域内展示所述目标灰色图像。
  9. 如权利要求8所述的图像处理装置，其中，所述图像处理装置还包括：
    第一获取模块，用于获取所述用户在当前虚拟场景中的背包信息，所述背包信息中包括所述用户已领取素材的彩色图像；
    判断模块，用于在所述彩色图像中不包含所述目标彩色图像的情况下，确定所述目标彩色图像满足所述置灰显示条件。
  10. 如权利要求9所述的图像处理装置，其中，所述判断模块还用于：在所述彩色图像中包含所述目标彩色图像的情况下，确定所述目标彩色图像不满足所述置灰显示条件；
    所述展示模块还用于：在所述图像滚动列表的显示区域内展示所述目标彩色图像。
  11. 如权利要求8-10中任一项所述的图像处理装置，其中，所述装置还包括：
    第一处理模块，用于从所述目标灰色图像中确定出能够在所述显示区域中完整显示的 完整图像；
    第二获取模块，用于获取透明遮罩层，所述透明遮罩层包括可视化区域和非可视化区域；
    第二处理模块，用于利用所述透明遮罩层覆盖所述显示区域，其中，所述可视化区域覆盖所述显示区域内的所述完整图像，所述非可视化区域覆盖所述显示区域的其他区域。
  12. 如权利要求11所述的图像处理装置，其中，所述第二处理模块，还用于：
    获取所述显示区域的第一位置信息和所述完整图像在所述显示区域中的第二位置信息；根据所述第一位置信息和所述第二位置信息，确定所述显示区域中除所述完整图像外的其他区域对应的第三位置信息；基于所述第二位置信息，将所述透明遮罩层的所述可视化区域覆盖显示在所述完整图像上；基于所述第三位置信息，将所述透明遮罩层的所述非可视化区域覆盖显示在所述其他区域上。
  13. 如权利要求11或12所述的图像处理装置，其中，所述第二获取模块，还用于：
    若所述目标灰色图像中包括所述完整图像和所述完整图像的后一张图像的部分图像，则获取第一透明遮罩层，所述第一透明遮罩层包括第一可视化区域和第一非可视化区域，且所述第一可视化区域与所述第一非可视化区域之间相邻两边的距离小于预设距离阈值；
    若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像、所述完整图像和所述完整图像的后一张图像的部分图像，则获取第二透明遮罩层，所述第二透明遮罩层包括第二非可视化区域、第二可视化区域和第三非可视化区域，且所述第二非可视化区域与所述第一可视化区域之间相邻两边的距离小于所述预设距离阈值，且所述第二可视化区域与所述第三非可视化区域之间相邻两边的距离小于所述预设距离阈值；
    若所述目标灰色图像中包括所述完整图像的前一张图像的部分图像和所述完整图像，则获取第三透明遮罩层，所述第三透明遮罩层包括第四非可视化区域和第三可视化区域，且所述第三可视化区域与所述第四非可视化区域之间相邻两边的距离小于所述预设距离阈值。
  14. 如权利要求11-13中任一项所述的图像处理装置，其中，所述装置还包括：
    第三处理模块，用于确定所述目标灰色图像中包含无法在所述显示区域内完整显示的残余图像。
  15. 一种电子设备，包括：
    处理器；以及
    存储程序的存储器，
    其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1-7中任一项所述的图像处理方法。
  16. 一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一项所述的图像处理方法。
PCT/CN2023/097058 2022-06-02 2023-05-30 图像处理方法、装置、电子设备及存储介质 WO2023232014A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210625319.8 2022-06-02
CN202210625319.8A CN114863008B (zh) 2022-06-02 2022-06-02 图像处理方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
WO2023232014A1 true WO2023232014A1 (zh) 2023-12-07

Family

ID=82623884

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/097058 WO2023232014A1 (zh) 2022-06-02 2023-05-30 图像处理方法、装置、电子设备及存储介质

Country Status (2)

Country Link
CN (1) CN114863008B (zh)
WO (1) WO2023232014A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114863008B (zh) * 2022-06-02 2023-03-10 北京新唐思创教育科技有限公司 图像处理方法、装置、电子设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2675171A1 (en) * 2012-06-11 2013-12-18 BlackBerry Limited Transparency information in image or video format not natively supporting transparency
US9800852B1 (en) * 2016-09-07 2017-10-24 Essential Products, Inc. Color reconstruction
CN114399437A (zh) * 2021-12-31 2022-04-26 上海米哈游璃月科技有限公司 一种图像处理方法、装置、电子设备及存储介质
CN114863008A (zh) * 2022-06-02 2022-08-05 北京新唐思创教育科技有限公司 图像处理方法、装置、电子设备及存储介质

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN111967702A (zh) * 2019-05-20 2020-11-20 阿里巴巴集团控股有限公司 数据处理方法和系统
CN110717005B (zh) * 2019-10-10 2022-06-24 支付宝(杭州)信息技术有限公司 一种热力图纹理的生成方法、装置及设备
CN110992867B (zh) * 2019-12-18 2023-02-28 京东方科技集团股份有限公司 图像处理方法和显示装置
CN111858986A (zh) * 2020-06-28 2020-10-30 深圳市维度统计咨询股份有限公司 图片浏览方法、系统及存储介质
CN112184595B (zh) * 2020-10-23 2023-03-14 青岛海信移动通信技术股份有限公司 移动终端及其图像显示方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2675171A1 (en) * 2012-06-11 2013-12-18 BlackBerry Limited Transparency information in image or video format not natively supporting transparency
US9800852B1 (en) * 2016-09-07 2017-10-24 Essential Products, Inc. Color reconstruction
CN114399437A (zh) * 2021-12-31 2022-04-26 上海米哈游璃月科技有限公司 一种图像处理方法、装置、电子设备及存储介质
CN114863008A (zh) * 2022-06-02 2022-08-05 北京新唐思创教育科技有限公司 图像处理方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN114863008B (zh) 2023-03-10
CN114863008A (zh) 2022-08-05

Similar Documents

Publication Publication Date Title
US11875010B2 (en) Systems, methods, and computer-readable media for managing collaboration on a virtual work of art
US20220319139A1 (en) Multi-endpoint mixed-reality meetings
RU2491609C2 (ru) Прокрутка изображения виртуального рабочего стола
US20180067756A1 (en) Low-latency visual response to input via pre-generation of alternative graphical representations of application elements and input handling on a graphical processing unit
CN107977141B (zh) 交互控制方法、装置、电子设备及存储介质
CN109102560B (zh) 三维模型渲染方法及装置
US20180101298A1 (en) Graph display apparatus, graph display method and storage medium
CN104903832A (zh) 用于低等待时间用户输入处理和反馈的混合型系统和方法
CN104111793A (zh) 利用图像覆盖来减小显示滞后的系统、方法和装置
EP2686761A1 (en) Superimposed annotation output
US10238960B2 (en) Dual input multilayer keyboard
EP4268913A1 (en) Position adjustment method and apparatus for operation controls, and terminal, and storage medium
WO2023232014A1 (zh) 图像处理方法、装置、电子设备及存储介质
US20220221970A1 (en) User interface modification
US20210064397A1 (en) Operation display apparatus and operation display program
CN112114734A (zh) 在线文档的显示方法、装置、终端及存储介质
WO2024037419A1 (zh) 显示控制方法、装置、电子设备及可读存储介质
US20170017632A1 (en) Methods and Systems of Annotating Local and Remote Display Screens
CN115079919A (zh) 一种多窗口控制方法和装置、电子设备及存储介质
CN113360228A (zh) 屏幕显示控制方法、装置、电子设备和存储介质
CN112584065B (zh) 一种课件的显示方法、系统、设备和存储介质
CN103853470A (zh) 数据处理和显示方法、装置及系统
CN115858056A (zh) 窗口化批注方法、装置、存储介质以及电子设备
CN112579015B (zh) 一种课件的显示方法、系统、设备和存储介质
CN112584063B (zh) 一种视频信号的处理方法、系统、设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23815193

Country of ref document: EP

Kind code of ref document: A1