Win 2D在直接应用于文件时产生不同的效果级别UIElement
问题描述:
我将Win2D高斯模糊应用于图像文件(存储文件)并直接应用于UIElement - Image(这是一个XAML图像),并且我看到为BlurAmount我正在用于存储文件输出和XAML图像不同的输出相同的值..Win 2D在直接应用于文件时产生不同的效果级别UIElement
原始图像
当施加到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);
}
问:这是预期的行为?如果是的话,我怎样才能使这两个案件有相同的输出?如果不是,我做错了什么?
答
你可以尝试使用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;
谢谢您的回答..你建议作为之前生产的完全一样的输出1日2种方法..但设置'StretchMode'到无似乎已经解决了区别..所以,只是为了澄清,文件和xaml图像的实际像素属性变得不同时,图像呈现适合一个特定的大小..? – Pratyay
我添加了一个解释为什么你正在经历像素化。 – Laith
谢谢..这是非常有益的..! – Pratyay