具有透明背景的 PNG 在 ImageSource 中变黑

Question

编辑：我的问题是在使用 SkiaSharp 缩小图像大小时，我将其编码为 Jpeg 而不是 PNG。 编码为 PNG 使背景透明。

---

我正在从 HTTP 端点加载图像，将图像存储在数据库中，并在 ImageSource 中显示图像。 我有一个透明背景的PNG。 显示图像时，背景变为黑色。 我不确定我哪里出错了。

• 我正在做的事情甚至可能吗？ 从 HTTP 下载具有透明背景的 PNG，将 PNG 保存为数据库中的 byte[]，并在具有透明背景的ContentPage中显示图像？
• 我应该放弃此图像的数据库存储并将其保存在文件系统中吗？

---

将图像下载为ByteArray并转换为ImageSource

public ImageSource Image { get; set;} // NotifyPropertyChange is implemented

...

// download image
var client = new HttpClient();
var imageByteArray = await client.GetByteArrayAsync(url);

// convert ByteArray to ImageSource
Image = ImageSource.FromStream(() => new MemoryStream(imageByteArray));

XAML ImageSource

<Image x:Name="image"
       Source="{Binding Image}" />

Sqlite DB Model 属性和从 ByteArray 到 ImageSource 的转换

public byte[] ImageByteArray { get; set; }

...

// convert ByteArray to ImageSource in Model
Image = ImageSource.FromStream(() => new MemoryStream(ImageByteArray));

Answer 1

提问者在评论中指出，实际问题是他们使用 SkiaSharp 将图像缩放到更小的尺寸。 在这一步，他们将生成的图像编码为 JPEG——因此它不再具有透明度。

“将编码更改为 PNG 解决了我的问题。”

---

顺便说一句，如果不存在透明度，那么检查从图像创建到存储在服务器上再到传输到客户端到最终显示的每个步骤的过程很重要。 检查每一步的output，确定是still.png格式，并且有透明度。 （例如，获取字节，将它们存储在文件中，在显示透明区域的图像查看器中手动查看该文件。）