如何使用 .NET MAUI 跨平台“高斯”模糊圖像

Question

我按照這篇很棒的博客文章中給出的說明對 iOS 和 Android 上我的 .NET MAUI 應用程序中的圖像進行了模糊處理：

https://vladislavantonyuk.azurewebsites.net/articles/Creating-beautiful-image-effects-using-.NET-MAUI

但是，兩個平台上的結果截然不同。 我喜歡我 iPhone 上的結果，但我對 Android 上的模糊圖像感到失望。

查看用於兩個平台的實現，您是否可以建議更改 Android 代碼，使其看起來更像 iPhone 上的圖像？

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);
    }

Answer 1

事實證明，差異是兩種設備的顯示尺寸大不相同的結果。

一個是 iPhone 12 Mini，另一個是 HTC One M9。 因為背景圖像設置為居中並且最初大小為 1.200x1.200 像素，所以無論如何它在兩種設備上看起來都不一樣。

為了使圖像在兩個設備上匹配，我需要在我的 Android 設備上放大它。

此外，需要調整模糊半徑以達到相同的效果。

我想，我需要找到一種計算屏幕尺寸相關比例/半徑轉換比率的方法。 ;-)