[QUESTION] Image loses quality when saving it after editing

[EPRmdr]

I'm trying to load big size image (39.1 MB, dimensions: 5494x5839) into a SKCanvas, enable drawing on it, and save the canvas as new .png image.
But the new image loses the quality, it's saved as 1.71 MB size with the device dimensions.
Why the canvas is saved as lower resolution than the original image? Does SKCanvas not supported big size images?

[ziriax]

I'm doing exactly the same, with way larger images, and I don't see any issue.

I only noticed that quality degrades when downscaling images more than 50%, not when saving a large canvas.

Can you share code?

[EPRmdr]

I saw that the image is saved according to the device screen size, so if the image size is more than 50% of the screen size, the quality decreases? (my device size: 1146x750), and how can I fix it?

[ziriax]

If you want a large canvas, then create one. For example:

using System;
using System.Diagnostics;
using System.IO;
using System.Net;
using SkiaSharp;

public class Program
{
	public static void Main()
	{
		Console.WriteLine("Downloading photo...");
		using var wc = new WebClient();
		using var stream = wc.OpenRead("https://upload.wikimedia.org/wikipedia/commons/4/47/Colletes_inaequalis%2C_female%2C_back1_2012-08-10-15.38.49_ZS_PMax_%287918574678%29.jpg");
		using var photo = SKBitmap.Decode(stream);

		Console.WriteLine("Drawing photo at 50%..");
		using var target = new SKBitmap(photo.Width / 2, photo.Height / 2);
		using var canvas = new SKCanvas(target);
		using var paint = new SKPaint
		{
			FilterQuality = SKFilterQuality.Low
		};
		canvas.DrawBitmap(photo, new SKRect(0, 0, target.Width, target.Height), paint);

		Console.WriteLine("Saving photo...");
		using var data = target.Encode(SKEncodedImageFormat.Jpeg, 92);
		using var output = File.Create(Path.Combine(Path.GetTempPath(), "output.jpg"));
		data.SaveTo(output);
		output.Close();

		Console.WriteLine("Opening photo...");
		Process.Start(new ProcessStartInfo(output.Name) { UseShellExecute = true });
	}
}

[ziriax]

But yet, IMHO Skia makes photos blurry when downscaling >50%, but that is subjective.

To work around this, I created a high quality downscaler, that is slower than Skia, but higher quality.

[EPRmdr]

Is there a solution for Xamarin.Forms? I'm using Xamarin.Forms

[ziriax]

You should be able to create a large SKCanvas on any platform, so my code should just work with Xamarin. What error do you get?

[EPRmdr]

How can I save this large SKCanvas? My problem occures when I'm saving the canvas :

private void CanvasImageView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            //Draw image
            SKCanvas canvas = e.Surface.Canvas;
            var paint = new SKPaint
            {
                FilterQuality = SKFilterQuality.High
            };
            SKRect rect = new SKRect(-9, 93, 750, 890); //Some calculate dimensions from the image size
            canvas.DrawImage(originalImage, rect, paint);

            //Save canvas as image
            var snapshot = e.Surface.Snapshot();
            var data = snapshot.Encode(SKEncodedImageFormat.Png, 100);
            var bytes = data.ToArray();
            DependencyService.Get<IFiles>().SaveFile(bytes); //Save the image to local gallery
        }

That's the code in short, In the example above the original image is saved, so what's the benefit of creating the large canvas without saving it?

[ziriax]

Sorry I don't understand what you are trying to do then.

In my example, I create a large canvas backed by a raster bitmap and save it.

In your code, you use the canvas associated with the device screen, and you save that.

So I don't get what you mean with "what's the benefit of creating the large canvas without saving it?"

[EPRmdr]

In your example you created a large canvas but did not save the canvas, just save the bitmap, no? That's the meaning.