RenderTargetBitmap renders low quality image of the UIElement

Imman Kumar 6

Hi,

I have a Xamarin.Forms application deployed in UWP, in which I have added Xamarin.Forms.Image to the page and trying to convert the UIElement to image using RenderTargetBitmap, the converted image quality is reduced. Again I have added the converted image to the page as Xamarin.Forms.Image and converting the same again to image with RenderTargetBitmap. The quality of the converted image is degrading progressively when doing this multiple times.

var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(element);
var pixelBuffer = await bitmap.GetPixelsAsync();
var pixels = pixelBuffer.ToArray();
var logicalDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
using (randomAccessStream = new InMemoryRandomAccessStream())
{
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, randomAccessStream);
    encoder.SetPixelData(
    BitmapPixelFormat.Bgra8,
    BitmapAlphaMode.Straight,
    (uint)bitmap.PixelWidth,
    (uint)bitmap.PixelHeight,
    logicalDpi,
    logicalDpi,
    pixels);
    await encoder.FlushAsync();
}

Viorel 118.4K Reputation points

2023-01-18T17:42:59.2533333+00:00

Maybe it is possible to avoid such conversions.
Imman Kumar 6 Reputation points

2023-01-19T17:22:09.5833333+00:00

Is there any alternate way to get the image stream from UIElement?
Viorel 118.4K Reputation points

2023-01-20T12:16:36.3833333+00:00

If you have the initial image, why do you need to re-copy it multiple times. What kind of features are you implementing?
Imman Kumar 6 Reputation points

2023-01-25T11:55:16.8066667+00:00

In my application, I have a canvas where I can add images and manipulate them, like resizing or moving them. In that application, the canvas can be saved as an image. While saving, the quality of the image is reduced. In a different case, we can save the canvas and restore it. When saving and restoring multiple times, the image quality is reduced with each save.
ManojKumar 0 Reputation points

2023-07-20T06:26:33.96+00:00

Hi Team,
Any update on this issue?
simonberrurier-7045 41 Reputation points

2023-07-20T08:13:39.4033333+00:00

It has been answered with a working sample...
ManojKumar 0 Reputation points

2023-07-24T13:28:34.9533333+00:00

Sorry, the sample is not applicable to our case for multiple loading cases. The image quality becomes worse on successive saves (say 3 successive loads and save).
ManojKumar 0 Reputation points

2024-06-13T07:56:50.83+00:00

Is there any alternate way to get the image stream from UIElement?

1 answer

Castorix31 86,051

You don't need an encoder if you don't save the image to a file

You can use a WriteableBitmap :

                RenderTargetBitmap rtb = new RenderTargetBitmap();
                await rtb.RenderAsync(img1);
                // Test copy directly the RTB to another Image control
                // img2.Source = rtb;
                var pixelBuffer = await rtb.GetPixelsAsync();
                byte[] pixelArray = pixelBuffer.ToArray();  // BGRA8 format

                var wb = new WriteableBitmap((int)rtb.PixelWidth, (int)rtb.PixelHeight);
                await wb.PixelBuffer.AsStream().WriteAsync(pixelArray, 0, pixelArray.Length);
                // Test copy the image to another Image control from WriteableBitmap
                img2.Source = wb;

Imman Kumar 6 Reputation points

2023-01-20T11:32:03.5966667+00:00

How can we get the image stream from WritableBitmap, as we need to save the image to a file?

Castorix31 86,051

You already get it in PixelBuffer.AsStream()

For example, in a WinUI 3 function I had posted :

        public async void SaveCapture(Windows.Storage.StorageFile file)
        {
            if (m_hWriteableBitmapCapture != null)
            {
                Guid guidCodec = Guid.Empty;
                switch (file.FileType)
                {
                    case ".jpg":
                        guidCodec = Windows.Graphics.Imaging.BitmapEncoder.JpegEncoderId;
                        break;
                    case ".png":
                        guidCodec = Windows.Graphics.Imaging.BitmapEncoder.PngEncoderId;
                        break;
                    case ".gif":
                        guidCodec = Windows.Graphics.Imaging.BitmapEncoder.GifEncoderId;
                        break;
                    case ".bmp":
                        guidCodec = Windows.Graphics.Imaging.BitmapEncoder.BmpEncoderId;
                        break;
                    case ".tif":
                        guidCodec = Windows.Graphics.Imaging.BitmapEncoder.TiffEncoderId;
                        break;                 
                }
                using (var ras = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite, Windows.Storage.StorageOpenOptions.None))
                {
                    var stream = m_hWriteableBitmapCapture.PixelBuffer.AsStream();
                    byte[] pBytes = new byte[stream.Length];
                    await stream.ReadAsync(pBytes, 0, pBytes.Length);
                    Windows.Graphics.Imaging.BitmapEncoder encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateAsync(guidCodec, ras);
                    encoder.SetPixelData(Windows.Graphics.Imaging.BitmapPixelFormat.Bgra8, Windows.Graphics.Imaging.BitmapAlphaMode.Straight, (uint)m_hWriteableBitmapCapture.PixelWidth, (uint)m_hWriteableBitmapCapture.PixelHeight, 96.0, 96.0, pBytes);
                    await encoder.FlushAsync();
                }
            }
        }

Imman Kumar 6 Reputation points

2023-07-24T05:38:45.3433333+00:00

I can able to get the image stream from the UIElement using RederTargetBitmap and able to save the image as file. But when I open the image file again in the application and save the image to file, the image quality degrades. The image quality becomes worse on successive saves (say 3 successive load and save).
Castorix31 86,051 Reputation points

2024-06-13T08:12:21.0333333+00:00

Did you try with JPEG ? (the quality can be changed with ImageQuality)
ManojKumar 0 Reputation points

2024-11-23T07:14:27.24+00:00

Hi Castorix,

We have tried to save it as both PNG and JPEG but the quality of the image is still degrading as the image from the view itself is of lower quality than original image added.

Share via

RenderTargetBitmap renders low quality image of the UIElement

1 answer

Your answer