How can I scale an SKBitmap to the screen size?

hkidd

I have tried SKBitmap.Resize with all of the different SKBitmapResizeMethods, but it doesn't resize it. I want to be able to scale the bitmap image to the native screen size - I am developing a cross-platform application with .NET 2.0 Standard.

JGoldberger

@hkidd

Did you also change the size of the SKCanvasView that is drawing the bitmap?

To resize an SKBitmap to fill an SKCanvasView. you can do this:

void SkiaSharpView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        SKImageInfo info = e.Info;
        SKSurface surface = e.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        // Get image form an embedded resource
        string resourceID = "AppName.image.png";
        Assembly assembly = GetType().GetTypeInfo().Assembly;

        using (Stream stream = assembly.GetManifestResourceStream(resourceID))
        {
            resourceBitmap = SKBitmap.Decode(stream);
        }

        if (resourceBitmap != null)
        {
            var resizedBitmap = resourceBitmap.Resize(info, SKBitmapResizeMethod.Box);

            canvas.DrawBitmap(resizedBitmap,info.Width / 2 - resizedBitmap.Width / 2, info.Height / 2 - resizedBitmap.Height / 2);
        }

    }

So with the above code, as long as your SKCanvasView is full screen, your bitmap will fill it, stretching or squishing the image to make it fill the SKCanvasView.

If you need AspectFill like behavior, you will need to make a new SKImageInfo object and calculate the needed width and height for your image to match what AspectFill would do and then pass that SKImageInfo object into the Resize method.

Try this:

if (resourceBitmap != null)
        {
            // Create new SKIMmageInfo object using values from canvas info object
            SKImageInfo resizeInfo = new SKImageInfo(info.Width, info.Height, info.ColorType, info.AlphaType, info.ColorSpace);

            // Test whether there is more room in width or height
            if (Math.Abs(resourceBitmap.Width - info.Width) > Math.Abs(resourceBitmap.Height - info.Height)){     
                // More room in width, so leave image width set to canvas width
                // and increase/decrease height by same ratio
                double widthRatio = (double)info.Width / (double)resourceBitmap.Width;
                int newHeight = (int)Math.Floor(resourceBitmap.Height * widthRatio);

                resizeInfo.Height = newHeight;
            }
            else {   
                // More room in height, so leave image height set to canvas height
                // and increase/decrease width by same ratio                 
                double heightRatio = (double)info.Height / (double)resourceBitmap.Height;
                int newWidth = (int)Math.Floor(resourceBitmap.Width * heightRatio);

                resizeInfo.Width = newWidth;
            }

            var resizedBitmap = resourceBitmap.Resize(resizeInfo, SKBitmapResizeMethod.Box);

            canvas.DrawBitmap(resizedBitmap,info.Width / 2 - resizedBitmap.Width / 2, info.Height / 2 - resizedBitmap.Height / 2);
        }

hkidd

Is there a better way than using Bitmap.Resize() ? Is there any way to do something similar to the Image.AspectFill property for the Xamarin.Forms.Image type?

JGoldberger

@hkidd

Did you also change the size of the SKCanvasView that is drawing the bitmap?

To resize an SKBitmap to fill an SKCanvasView. you can do this:

void SkiaSharpView_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        SKImageInfo info = e.Info;
        SKSurface surface = e.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        // Get image form an embedded resource
        string resourceID = "AppName.image.png";
        Assembly assembly = GetType().GetTypeInfo().Assembly;

        using (Stream stream = assembly.GetManifestResourceStream(resourceID))
        {
            resourceBitmap = SKBitmap.Decode(stream);
        }

        if (resourceBitmap != null)
        {
            var resizedBitmap = resourceBitmap.Resize(info, SKBitmapResizeMethod.Box);

            canvas.DrawBitmap(resizedBitmap,info.Width / 2 - resizedBitmap.Width / 2, info.Height / 2 - resizedBitmap.Height / 2);
        }

    }

So with the above code, as long as your SKCanvasView is full screen, your bitmap will fill it, stretching or squishing the image to make it fill the SKCanvasView.

If you need AspectFill like behavior, you will need to make a new SKImageInfo object and calculate the needed width and height for your image to match what AspectFill would do and then pass that SKImageInfo object into the Resize method.

Try this:

if (resourceBitmap != null)
        {
            // Create new SKIMmageInfo object using values from canvas info object
            SKImageInfo resizeInfo = new SKImageInfo(info.Width, info.Height, info.ColorType, info.AlphaType, info.ColorSpace);

            // Test whether there is more room in width or height
            if (Math.Abs(resourceBitmap.Width - info.Width) > Math.Abs(resourceBitmap.Height - info.Height)){     
                // More room in width, so leave image width set to canvas width
                // and increase/decrease height by same ratio
                double widthRatio = (double)info.Width / (double)resourceBitmap.Width;
                int newHeight = (int)Math.Floor(resourceBitmap.Height * widthRatio);

                resizeInfo.Height = newHeight;
            }
            else {   
                // More room in height, so leave image height set to canvas height
                // and increase/decrease width by same ratio                 
                double heightRatio = (double)info.Height / (double)resourceBitmap.Height;
                int newWidth = (int)Math.Floor(resourceBitmap.Width * heightRatio);

                resizeInfo.Width = newWidth;
            }

            var resizedBitmap = resourceBitmap.Resize(resizeInfo, SKBitmapResizeMethod.Box);

            canvas.DrawBitmap(resizedBitmap,info.Width / 2 - resizedBitmap.Width / 2, info.Height / 2 - resizedBitmap.Height / 2);
        }

hkidd

Thank you so much!!