Merge pull request #16816 from ramezgerges/imagebrush_downscaling_blur

fix(imagebrush): downscaling images was very blurry

Author: ramezgerges

src/SamplesApp/UITests.Shared/Assets/ResizedLargeWisteria.png

@@ -9602,6 +9602,7 @@
     <Content Include="$(MSBuildThisFileDirectory)Assets\RemoteFonts\antikytheraoutline.woff" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\RemoteFonts\antikytheraoutlineital.woff" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\RemoteFonts\GALACTIC VANGUARDIAN NCV.woff" />
+    <Content Include="$(MSBuildThisFileDirectory)Assets\ResizedLargeWisteria.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\square100.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\testimage_exif_rotated.jpg" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\test_image_200_200.png" />

src/SamplesApp/UITests.Shared/UITests.Shared.projitems

@@ -79,13 +79,20 @@ internal override void UpdatePaint(SKPaint fillPaint, SKRect bounds)
 		{
 			if (TryGetSkiaCompositionSurface(Surface, out var scs))
 			{
-				var sourceImageSize = new Size(scs.Image!.Width, scs.Image.Height);
-				var backgroundArea = GetArrangedImageRect(sourceImageSize, bounds);
-				var matrix = Matrix3x2.CreateScale((float)(backgroundArea.Width / sourceImageSize.Width), (float)(backgroundArea.Height / sourceImageSize.Height));
-				matrix *= Matrix3x2.CreateTranslation((float)backgroundArea.Left, (float)backgroundArea.Top);
+				var backgroundArea = GetArrangedImageRect(new Size(scs.Image!.Width, scs.Image.Height), bounds);
+
+				// Adding image downscaling in the shader matrix directly is very blurry
+				// since the default downsampler in Skia is really low quality (but really fast).
+				// We force Lanczos instead.
+				// https://github.com/mono/SkiaSharp/issues/520#issuecomment-444973518
+#pragma warning disable CS0612 // Type or member is obsolete
+				var resizedBitmap = scs.Image.ToSKBitmap().Resize(scs.Image.Info.WithSize((int)backgroundArea.Size.Width, (int)backgroundArea.Size.Height), SKBitmapResizeMethod.Lanczos3.ToFilterQuality());
+#pragma warning restore CS0612 // Type or member is obsolete
+				var resizedImage = SKImage.FromBitmap(resizedBitmap);
+
+				var matrix = Matrix3x2.CreateTranslation((float)backgroundArea.Left, (float)backgroundArea.Top);
 				matrix *= TransformMatrix;
-
-				var imageShader = SKShader.CreateImage(scs.Image, SKShaderTileMode.Decal, SKShaderTileMode.Decal, matrix.ToSKMatrix());
+				var imageShader = SKShader.CreateImage(resizedImage, SKShaderTileMode.Decal, SKShaderTileMode.Decal, matrix.ToSKMatrix());
 
 				if (UsePaintColorToColorSurface)
 				{

src/Uno.UI.Composition/Composition/CompositionSurfaceBrush.skia.cs

@@ -15,7 +15,7 @@ namespace Uno.UI.RuntimeTests.Tests.Windows_UI_Xaml_Media
 {
 	[TestClass]
 	[RunsOnUIThread]
-	public class Given_ImageBrushStretch
+	public class Given_ImageBrush
 	{
 		[DataRow(Stretch.Fill, false)]
 		[DataRow(Stretch.Fill, true)]
@@ -100,10 +100,47 @@ public async Task When_Stretch(Stretch stretch, bool useRectangle)
 
 			var bitmap = await UITestHelper.ScreenShot(SUT);
 
-			ImageAssert.HasColorAt(bitmap, centerX, BorderOffset, expectations.Top, tolerance: 21);
-			ImageAssert.HasColorAt(bitmap, centerX, height - BorderOffset, expectations.Bottom, tolerance: 21);
-			ImageAssert.HasColorAt(bitmap, BorderOffset, centerY, expectations.Left, tolerance: 21);
-			ImageAssert.HasColorAt(bitmap, width - BorderOffset, centerY, expectations.Right, tolerance: 21);
+			ImageAssert.HasColorAt(bitmap, centerX, BorderOffset, expectations.Top, tolerance: 28);
+			ImageAssert.HasColorAt(bitmap, centerX, height - BorderOffset, expectations.Bottom, tolerance: 28);
+			ImageAssert.HasColorAt(bitmap, BorderOffset, centerY, expectations.Left, tolerance: 28);
+			ImageAssert.HasColorAt(bitmap, width - BorderOffset, centerY, expectations.Right, tolerance: 28);
 		}
+
+#if __SKIA__
+		[TestMethod]
+		public async Task When_DownSampling()
+		{
+			var border = new Border
+			{
+				Width = 100,
+				Height = 100,
+				Background = new ImageBrush
+				{
+					ImageSource = new Uri("ms-appx:/Assets/LargeWisteria.jpg")
+				}
+			};
+
+			var image = new Image
+			{
+				Width = 100,
+				Height = 100,
+				Source = new Uri("ms-appx:/Assets/ResizedLargeWisteria.png")
+			};
+
+			await UITestHelper.Load(new StackPanel
+			{
+				Children =
+				{
+					border,
+					image
+				}
+			});
+			await Task.Delay(1000); // wait for idle might not be enough here
+
+			var bitmap = await UITestHelper.ScreenShot(border);
+			var bitmap2 = await UITestHelper.ScreenShot(image);
+			await ImageAssert.AreEqualAsync(bitmap, bitmap2);
+		}
+#endif
 	}
 }