How to convert the image to byte in xamarin form

If you want to upload an image to remote server, then you need to convert the image object to byte. But there is no direct way to do that in xamarin, so we need to create a custom renderer for handle it.

1. Create a ByteImage.cs file in the xamarin form project:

using System;
using Xamarin.Forms;

namespace CustomImage.Renderers
{
    public class ByteImage : Image
    {
        public Func<byte[]> GetBytes { get; set; }
    }
}

2. Create the ByteImageRenderer.cs in Anddroid project:

using System;
using System.IO;
using Android.Graphics;
using CustomImage.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Application = Android.App.Application;

[assembly: ExportRenderer(typeof(CustomImage.Renderers.ByteImage), typeof(CustomImage.Droid.ByteImageRenderer))]

namespace CustomImage.Droid
{
    public class ByteImageRenderer : ImageRenderer
    {
        public ByteImageRenderer() : base(Application.Context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            var newImage = e.NewElement as ByteImage;
            if (newImage != null)
            {
                newImage.GetBytes = () =>
                {
                    var drawable = this.Control.Drawable;
                    var bitmap = Bitmap.CreateBitmap(drawable.IntrinsicWidth, drawable.IntrinsicHeight, Bitmap.Config.Argb8888);
                    drawable.Draw(new Canvas(bitmap));
                    using (var ms = new MemoryStream())
                    {
                        bitmap.Compress(Bitmap.CompressFormat.Png, 100, ms);
                        return ms.ToArray();
                    }
                };
            }

            var oldImage = e.OldElement as ByteImage;
            if (oldImage != null)
            {
                oldImage.GetBytes = null;
            }
        }
    }
}

3. Create the ByteImageRenderer.cs in iOS project:

using System;
using CustomImage.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomImage.Renderers.ByteImage), typeof(CustomImage.iOS.ByteImageRenderer))]

namespace CustomImage.iOS
{
    public class ByteImageRenderer: ImageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            var newImage = e.NewElement as ByteImage;
            if (newImage != null)
            {
                newImage.GetBytes = () =>
                {
                    return this.Control.Image.AsPNG().ToArray();
                };
            }

            var oldImage = e.OldElement as ByteImage;
            if (oldImage != null)
            {
                oldImage.GetBytes = null;
            }
        }
    }
}

4. Add the renderer to xaml file:

xmlns:renderer="clr-namespace:CustomImage.Renderers"

...

<renderer:ByteImage x:Name="Logo" HeightRequest="100"
  VerticalOptions="CenterAndExpand" />

5. I use the MediaPlugin for pick a photo, this plugin can easy to help you to get the image object:

var file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
{
    PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
});
if (file == null)
    return;
Logo.Source = ImageSource.FromStream(() =>
{
    var stream = file.GetStream();
    file.Dispose();
    return stream;
});

6. After get the image, we can use the below method to convert the image to byte[]:

await UploadImage(Logo.GetBytes?.Invoke());

The UploadImage function will handle the upload process, and I will show you the detail for how to upload the image in my next post! 😃

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive awesome content in your inbox.

Email Address *

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.

Related posts:

Some of my thoughts for Xamarin Form and why I love it! .NET Conf 2022 in a Nutshell🥜 (Key Highlights to Know) Introducing MAUI: Microsoft’s Next-Gen Multi-Platform UI Framework Create the Http service for support SSL both on Android and iOS with Xamarin Form Use the risk and reward tool to trade the Forex