.NET MAUI跨平台高斯模糊iOS与Android效果不一致，如何调整Android代码？

我按照博客说明在.NET MAUI应用中实现了iOS和Android平台的图片模糊效果，但两个平台效果差异极大——iPhone上的模糊效果符合预期，Android端的效果却不尽人意。希望能修改Android端代码，让其效果更接近iOS端。

效果对比 #

iOS版本效果	Android版本效果

相关代码 #

MainPage.xaml #

<Grid>
    <Image 
        Source="c64.png"
        Aspect="Center">
        <Image.Behaviors>
            <blur:BlurBehavior Radius="66" />
        </Image.Behaviors>
    </Image>
    <Grid>
        <Image 
            VerticalOptions="Start"
            Margin="0,100,0,0"
            Source="c64.png"                  
            HeightRequest="300" 
            WidthRequest="300">
            <Image.Clip>
                <RoundRectangleGeometry CornerRadius="20" Rect="0,0,300,300" />
            </Image.Clip>
            <Image.Shadow>
                <Shadow 
                    Brush="Black"
                    Offset="0,0"
                    Radius="20"
                    Opacity="0.5" />
            </Image.Shadow>
        </Image>           
    </Grid>
</Grid>

Android端渲染代码 #

void SetRendererEffect(ImageView imageView, float radius)
{
    if (OperatingSystem.IsAndroidVersionAtLeast(31))
    {
        var renderEffect = radius > 0 ? GetEffect(radius) : null;
        imageView.SetRenderEffect(renderEffect);
    }
}

static RenderEffect? GetEffect(float radius)
{
    return OperatingSystem.IsAndroidVersionAtLeast(31) ?
        RenderEffect.CreateBlurEffect(radius, radius, Shader.TileMode.Decal!) :
        null;
}

iOS端渲染代码 #

void SetRendererEffect(UIImageView imageView, float radius)
{
    if (originalImage is null)
    {
        return;
    }

    var myContext = CIContext.Create();
    var inputImage = new CIImage(originalImage);
    var filter = new CIGaussianBlur
    {
        InputImage = inputImage,
        Radius = radius
    };
    var resultImage = myContext.CreateCGImage(filter.OutputImage!, inputImage.Extent);
    SetImage(imageView, resultImage);
}

Android端效果优化建议 #

1. 适配模糊半径等效值 #

iOS的CIGaussianBlur与Android的CreateBlurEffect半径并非1:1对应，Android的模糊强度偏弱。可以尝试将传入Android的半径放大1.5~2倍，找到和iOS匹配的效果：

var adjustedRadius = radius * 1.8f; // 可根据实际效果调整倍数
var renderEffect = RenderEffect.CreateBlurEffect(adjustedRadius, adjustedRadius, Shader.TileMode.Decal!);

2. 改用RenderScript实现高斯模糊 #

Android 31+的RenderEffect算法和iOS高斯模糊存在差异，用RenderScript实现的模糊效果更接近iOS，同时兼容更低版本：

using Android.Renderscripts;

Bitmap ApplyGaussianBlur(Bitmap bitmap, float radius)
{
    RenderScript rs = RenderScript.Create(imageView.Context);
    Allocation input = Allocation.CreateFromBitmap(rs, bitmap);
    Allocation output = Allocation.CreateTyped(rs, input.Type);
    ScriptIntrinsicBlur script = ScriptIntrinsicBlur.Create(rs, Element.U8_4(rs));

    script.SetRadius(radius);
    script.SetInput(input);
    script.ForEach(output);
    output.CopyTo(bitmap);
    rs.Destroy();
    return bitmap;
}

// 修改SetRendererEffect方法
void SetRendererEffect(ImageView imageView, float radius)
{
    if (originalImage == null) return;
    Bitmap bitmap = ((BitmapDrawable)originalImage).Bitmap;
    Bitmap blurredBitmap = ApplyGaussianBlur(bitmap, radius * 1.5f); // 调整半径倍数
    imageView.SetImageBitmap(blurredBitmap);
}

注意：需在Android项目的build.gradle中添加RenderScript支持：

android {
    ...
    defaultConfig {
        ...
        renderscriptTargetApi 33
        renderscriptSupportModeEnabled true
    }
}

3. 调整TileMode优化边缘效果 #

当前使用的Shader.TileMode.Decal会在边缘停止模糊，iOS的模糊会自然延伸边缘像素。改用Shader.TileMode.Clamp可让边缘像素重复，效果更自然：

RenderEffect.CreateBlurEffect(adjustedRadius, adjustedRadius, Shader.TileMode.Clamp!)

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