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:

Do you want to be a good trading in cTrader?   >> TRY IT! <<
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! 😃

Loading

Views: 173
Total Views: 1759 ,

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

Sign up to receive awesome content in your inbox.

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

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

Sign up to receive awesome content in your inbox.

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Thank you so much!