.NET MAUI：如何从ImageSource加载图片并生成修改后的新ImageSource？

我是.NET MAUI新手，尝试从ImageSource加载图片，本以为这是件简单的事，结果却并非如此。四处查找后，始终找不到一种跨平台的图片加载方式，我的需求只是获取图片的二进制数据。

补充需求 #

我想通过ImageSource获取图片，对其进行修改后再生成另一个ImageSource——用经过轻微修改的图片替换原ImageSource，比如直接在图片上添加覆盖层，这是为我计划开发的自定义控件准备的。

具体场景 #

假设有如下控件：

<ctrl:MyControl
    Source="{Binding WhateverImageSource}">
</ctrl:MyControl>

由于这是一个控件，它有禁用状态。为了直观体现该状态，我希望显示的图片透明度为50%（alpha通道）。我的思路是获取图片二进制数据，应用转换后返回新的ImageSource。

[吐槽]
我不知道是谁设计的这个机制，也不清楚过度设计的动机是什么，但依我浅见，我会采用不同的设计思路。
不过我又懂什么呢？

解决方案 #

1. 跨平台获取ImageSource的二进制数据 #

针对不同类型的ImageSource，实现统一的字节数组获取逻辑：

using Microsoft.Maui.Graphics;
using Microsoft.Maui.Media;

public static async Task<byte[]> GetImageBytesFromSourceAsync(ImageSource source)
{
    if (source is FileImageSource fileSource)
    {
        return await File.ReadAllBytesAsync(fileSource.File);
    }
    else if (source is UriImageSource uriSource)
    {
        using var httpClient = new HttpClient();
        return await httpClient.GetByteArrayAsync(uriSource.Uri);
    }
    else if (source is StreamImageSource streamSource)
    {
        using var stream = await streamSource.Stream(CancellationToken.None);
        using var memoryStream = new MemoryStream();
        await stream.CopyToAsync(memoryStream);
        return memoryStream.ToArray();
    }
    else if (source is FontImageSource fontSource)
    {
        var fontManager = MauiProgram.Current.Services.GetRequiredService<IFontManager>();
        using var canvas = new Canvas();
        var paint = new Paint
        {
            Color = fontSource.Color ?? Colors.Black,
            Font = fontManager.GetFont(fontSource.FontFamily),
            FontSize = fontSource.Size
        };
        var text = new string(new[] { fontSource.Glyph });
        var size = canvas.GetStringSize(text, paint);
        canvas.Width = size.Width;
        canvas.Height = size.Height;
        canvas.DrawString(text, 0, size.Height, paint);
        using var imageStream = await canvas.AsImageStreamAsync();
        using var memoryStream = new MemoryStream();
        await imageStream.CopyToAsync(memoryStream);
        return memoryStream.ToArray();
    }
    throw new NotSupportedException("不支持的ImageSource类型");
}

2. 修改图片透明度并生成新ImageSource #

利用Microsoft.Maui.Graphics对图片应用alpha通道修改，再转换为StreamImageSource：

public static async Task<ImageSource> CreateTransparentImageSourceAsync(byte[] imageBytes, float alpha = 0.5f)
{
    using var stream = new MemoryStream(imageBytes);
    var image = await Image.FromStreamAsync(stream);
    
    using var canvas = new Canvas();
    canvas.Width = image.Width;
    canvas.Height = image.Height;
    
    var paint = new Paint
    {
        Alpha = alpha
    };
    canvas.DrawImage(image, 0, 0, image.Width, image.Height, paint);
    
    var resultStream = await canvas.AsImageStreamAsync();
    return ImageSource.FromStream(() => resultStream);
}

3. 在自定义控件中集成状态监听 #

在MyControl中监听禁用状态变化，自动触发图片转换：

public class MyControl : View
{
    public static readonly BindableProperty SourceProperty =
        BindableProperty.Create(nameof(Source), typeof(ImageSource), typeof(MyControl), propertyChanged: OnSourceChanged);
    
    public static readonly BindableProperty IsEnabledProperty =
        BindableProperty.Create(nameof(IsEnabled), typeof(bool), typeof(MyControl), true, propertyChanged: OnIsEnabledChanged);
    
    public ImageSource Source
    {
        get => (ImageSource)GetValue(SourceProperty);
        set => SetValue(SourceProperty, value);
    }
    
    public bool IsEnabled
    {
        get => (bool)GetValue(IsEnabledProperty);
        set => SetValue(IsEnabledProperty, value);
    }
    
    private async static void OnIsEnabledChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyControl)bindable;
        if (control.Source == null) return;
        
        var imageBytes = await GetImageBytesFromSourceAsync(control.Source);
        var newSource = await CreateTransparentImageSourceAsync(imageBytes, (bool)newValue ? 1f : 0.5f);
        control.Source = newSource;
    }
    
    private static void OnSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (MyControl)bindable;
        if (!control.IsEnabled)
        {
            _ = UpdateTransparentSource(control);
        }
    }
    
    private static async Task UpdateTransparentSource(MyControl control)
    {
        var imageBytes = await GetImageBytesFromSourceAsync(control.Source);
        control.Source = await CreateTransparentImageSourceAsync(imageBytes, 0.5f);
    }
}

更高效的替代方案：使用ValueConverter #

如果仅需调整显示透明度，无需修改原始图片数据，推荐直接用Opacity绑定+转换器：

public class EnabledToOpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? 1.0 : 0.5;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在控件布局中使用：

<Image Source="{Binding Source}" Opacity="{Binding IsEnabled, Converter={StaticResource EnabledToOpacityConverter}}" />

这种方式无需处理二进制数据，性能更优，也更贴合MAUI的设计逻辑。

内容的提问来源于stack exchange，提问作者Paulo Santos