Win 2D在直接應用於文件時產生不同的效果級別UIElement

Question

我將Win2D高斯模糊應用於圖像文件（存儲文件）並直接應用於UIElement - Image（這是一個XAML圖像），並且我看到爲BlurAmount我正在用於存儲文件輸出和XAML圖像不同的輸出相同的值..

原始圖像

當施加到XAML圖片100％模糊（輸出或者任何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

如果像素都ok，嘗試圖像元素上設置StretchMode到None。

<Image Stretch="None" /> 

我只是在視覺樹的某個地方像素化的懷疑。

說明

你需要適應DPI規模。您的屏幕可能設置爲200％。所以，如果你有一個尺寸爲100x100的Image控件，你實際上需要200x200像素的圖片來填充它。如果你給它一個100x100的位圖源，那麼它會將其拉伸以適應。這就是你得到像素化的原因。

因此，要解決您的問題，請禁用圖像上的任何拉伸，或按DPI比例縮小的源大小調整其大小。也就是說，在200％DPI比例下，將圖像寬度和高度設置爲100x100像素圖像的50x50。

DPI可以使用UI線程上獲得規模：

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