Serialize and Store an Image in an XML File

Question

Got a little bit of a problem. I have a program that builds an observable collection of Users. The User has a Firstname, Lastname, and Image. I can add the user to the observable collection, but I also want to save the collection and load it everytime I reopen the program.

My problem is that while its fairly easy to save a firstname and lastname, the writer can't write the image to the xml file. Is there any way around this?

Here's what I have so far:

the observable collection:

ObservableCollection<VendorClass> ProfileList = new ObservableCollection<VendorClass>();

the problematic writer:

XmlSerializer xs = new XmlSerializer(typeof(ObservableCollection<VendorClass>));
        using (StreamWriter wr = new StreamWriter("vendors.xml")) //Data/customers.xml
        {
            xs.Serialize(wr, ProfileList);
        }

Any ideas? And if there does exist a solution to write in an image, is there a viable way to read it out again?

Solution 1

XmlSerializer can't serialize or deserialize the WPF image types like BitmapImage etc. It is however able to (de)serialize byte arrays. So you may add a byte[] ImageBuffer property to your Person class, which contains the binary image data. You would then also set the XmlIgnore attribute on the Image property to suppress its (de)serialization, and set XmlElement("Image") on the ImageBuffer properties to (de)serialize it as <Image>...</Image>.

public class User
{
    public string FirstName { get; set; }
    public string LastName { get; set; }

    [XmlIgnore]
    public BitmapSource Image { get; set; }

    [XmlElement("Image")]
    public byte[] ImageBuffer
    {
        get
        {
            byte[] imageBuffer = null;

            if (Image != null)
            {
                using (var stream = new MemoryStream())
                {
                    var encoder = new PngBitmapEncoder(); // or some other encoder
                    encoder.Frames.Add(BitmapFrame.Create(Image));
                    encoder.Save(stream);
                    imageBuffer = stream.ToArray();
                }
            }

            return imageBuffer;
        }
        set
        {
            if (value == null)
            {
                Image = null;
            }
            else
            {
                using (var stream = new MemoryStream(value))
                {
                    var decoder = BitmapDecoder.Create(stream,
                        BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
                    Image = decoder.Frames[0];
                }
            }
        }
    }
}

This approach has also been suggested for properties of type Bitmap in this answer.

Solution 2

You would base64 encode the image to convert it to a string and then write that into a CDATA section. See How do you serialize a string as CDATA using XmlSerializer?