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! 😃

 2,528 total views,  18 views today

Share your vote!


Do you like this post?
  • Fascinated
  • Happy
  • Sad
  • Angry
  • Bored
  • Afraid

You may also like...

shares