Question

我在图像文件（存储文件）上直接应用Win2D高斯模糊，直接在UIElement - 图像（这是一个XAML图像）上应用，我看到对于BlurAmount的相同值，我得到了不同的存储输出文件输出和XAML图像..

原始图片

将100％模糊应用于XAML图像（或任何UIElement）时的输出

将100％模糊应用于存储文件时的输出

相关代码：

对于图像文件：

using (var stream = await originalFile.OpenAsync(FileAccessMode.Read))
 {
    var device = new CanvasDevice();
    var bitmap = await CanvasBitmap.LoadAsync(device, stream);
    var renderer = new CanvasRenderTarget(device, bitmap.SizeInPixels.Width, bitmap.SizeInPixels.Height, bitmap.Dpi);

    using (var ds = renderer.CreateDrawingSession())
    {
      var blur = new GaussianBlurEffect();
      blur.BlurAmount = eo.effectAmount1;
      blur.BorderMode = EffectBorderMode.Hard;                       
      blur.Source = bitmap;
      ds.DrawImage(blur);                    
    }
    var saveFile = await ApplicationData.Current.TemporaryFolder.CreateFileAsync("ImageName.jpg", CreationCollisionOption.GenerateUniqueName);

    using (var outStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
    {
       await renderer.SaveAsync(outStream, CanvasBitmapFileFormat.Png,1.0f);
    }
 }

对于 UIElement（XAML图像）：

using (var stream = await sourceElement.RenderToRandomAccessStream())               
 {
   var device = new CanvasDevice();
   var bitmap = await CanvasBitmap.LoadAsync(device, stream);

   var renderer = new CanvasRenderTarget(device,bitmap.SizeInPixels.Width,
                                                          bitmap.SizeInPixels.Height,
                                                          bitmap.Dpi);

     using (var ds = renderer.CreateDrawingSession())
     {
       var blur = new GaussianBlurEffect();
       blur.BlurAmount = blurAmount;
       blur.Source = bitmap;
       blur.BorderMode = EffectBorderMode.Hard;
       ds.DrawImage(blur);
      }

      stream.Seek(0);
      await renderer.SaveAsync(stream, CanvasBitmapFileFormat.Png);

   }

问题：这是预期的行为吗？如果是，我怎样才能使两个案例具有相同的输出？如果不是，我做错了什么？

Answer 1

您可以尝试使用bitmap.Size代替bitmap.SizeInPixels吗？

var renderer = new CanvasRenderTarget(bitmap, bitmap.Size);

我猜你正在经历模糊效果加上像素化。

修改1

如果这不起作用，请在创建渲染器后设置此断言。 SizeInPixels需要匹配：

Debug.Assert(
    bitmap.SizeInPixels.Width == renderer.SizeInPixels.Width 
    && bitmap.SizeInPixels.Height == renderer.SizeInPixels.Height
);

修改2

如果像素没问题，请尝试将图片元素上的StretchMode设置为None。

<Image Stretch="None" />

我只是怀疑视觉树中某处的像素化。

<强>解释

您需要适应DPI规模。您的屏幕可能设置为200％。因此，如果您的尺寸为100x100的Image控件，则实际需要200x200像素的图像来填充它。如果你给它一个100x100位图源，那么它将拉伸它以适应。这就是你得到像素化的原因。

因此，要解决您的问题，请禁用图像上的任何拉伸，或者按照DPI比例缩小的源尺寸调整其大小。也就是说，对于100x100像素图像，以200％DPI标度将图像宽度和高度设置为50x50。

可以使用以下方法在UI线程上获取DPI比例：

var dpiScale = DisplayInformation.GetForCurrentView().LogicalDpi / 96f;

当直接应用于文件和UIElement时，赢取2D生成不同的效果级别

1 个答案: