AsyncImage alpha issue

[Samael-TLB]

Software Versions

• Python: 3.8
• OS: Windows
• Kivy: 2.2.1
• Kivy installation method: pip

Describe the bug When a png with some translucent colors is loaded with AsyncImage, the resultant image shown in the display looses the alpha channel of the translucent colors. This behaviour is not present in Image widget, which loads and displays the picture correctly. the issue seems to be only for AsyncImage widget. On further investigation, I found the underlying core image data to have the alpha channels for AsyncImage, and the colors having alpha equal to 0, that is fully transparent are shown correctly, only the translucent colors seem to loose their alpha information and seems to be having alpha channel changed to 1 that is fully opaque. Tried with a few different translucent color images and in every image the issue is present with AsyncImage but not with Image widget.

It may be due to the use of a loading image in AsyncImage due to which the canvas alpha channels behave as either 1 or 0, and don't allow any other value for alpha channel.

In short, it seems that the alpha channel on asynchronously loaded images is turned into a binary - either the pixel is present or not - rather than a scale, and that that makes the yellow circle on the left(below) appear to be completely present, rather than a little translucent on the right(below).

Expected behavior

As you can see above, the same image is being loaded once with AsyncImage (left) and once with Image(right). There's a striking difference in the image color due to the translucent colors loosing their alpha channel value and being set to 1. Correct behaviour should be the right image.

To Reproduce A short, runnable example that reproduces the issue with latest kivy master. Anyone can use the above image to test the issue.

Code and Logs and screenshots

from kivy.app import App

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image, AsyncImage

class TestApp(App):
    
    def build(self):
        box_layout = BoxLayout()
        normal_image = Image(source = "test.png") # test.png is any image with translucent colors just like the given red rectangle
        async_image = AsyncImage(source = "test.png")
        box_layout.add_widget(normal_image)
        box_layout.add_widget(async_image)
        return box_layout 
TestApp().run()  

Additional context On running the above code, the below picture highlights the result obtained.

[Julian-O]

Hi @Samael-TLB: There is some confusing parts of this bug report. Please clarify the issue so it can be reproduced.

I think what you are saying is that the alpha channel on asynchronously loaded images is turned into a binary - either the pixel is present or not - rather than a scale, and that that makes the yellow circle on the left appear to be completely present, rather than a little translucent on the right. Is that correct?

Can you produce a short runnable example showing us the difference on our computers. You have uploaded a red rectangle, but that isn't sufficient?

[Samael-TLB]

I think what you are saying is that the alpha channel on asynchronously loaded images is turned into a binary - either the pixel is present or not - rather than a scale, and that that makes the yellow circle on the left appear to be completely present, rather than a little translucent on the right. Is that correct?

Hi @Julian-O , yes you are correct. I have edited my initial bug report for more clarity and also added the runnable example.

[Julian-O]

I have edited my initial bug report for more clarity and also added the runnable example.

Nice. I think this is an excellent demonstration. Thank you.

[Samael-TLB]

Happy to help.