如何从 Base64 (UWP) 中的字符串创建图像

Question

I am making a Note application where I can draw with Windows ink and also paste images. I want to save the images and ink in a single file. Therefore I am converting the image to a string in base64 format so that I can easily serialize it. My problem is when I try to recreate the image from the string.

My code to decode the image data into a base64 string:

var decoder = await BitmapDecoder.CreateAsync(imageStream);
var pixels = await decoder.GetPixelDataAsync();
var bytes = pixels.DetachPixelData();

base64String = Convert.ToBase64String(bytes);

My code to encode the base64 string into an image again ( This code does NOT work! The image is not added to the redCanvas ):

var bytes = Convert.FromBase64String(base64String);

BitmapImage bitmapImage = new BitmapImage();
using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
{
    await stream.WriteAsync(bytes.AsBuffer());
    stream.Seek(0);
    bitmapImage.SetSource(stream);
}
Image image = new Image();

image.Source = bitmapImage;

// Add the image to a second canvas
redCanvas.Children.Add(image);

Full code for pasting the image and creating the base64 string:

private async Task myButton_ClickAsync(object sender, RoutedEventArgs e)
{
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();
    if (dataPackageView.Contains(StandardDataFormats.Bitmap))
    {
        IRandomAccessStreamReference imageReceived = null;
        imageReceived = await dataPackageView.GetBitmapAsync();
        if (imageReceived != null)
        {
            using (var imageStream = await imageReceived.OpenReadAsync())
            {
                var bitmapImage = new BitmapImage();
                bitmapImage.SetSource(imageStream);

                var decoder = await BitmapDecoder.CreateAsync(imageStream);
                var pixels = await decoder.GetPixelDataAsync();
                var bytes = pixels.DetachPixelData();

                base64String = Convert.ToBase64String(bytes);

                TextBox_Image_Base64.Text = base64;
         
                Image image = new Image();
                        
                // Add the image to a list of Images
                ListImages.Add(image);

                blueCanvas.Children.Add(image);

                image.Source = bitmapImage;

                TextBlock_Status.Text = "Status : Image is retrieved from the 
                                                 clipboard and pasted successfully.";
            }
        }
    }
    else
    {
        TextBlock_Status.Text = "Status : Bitmap format is not available in clipboard";
    }
}

Anyone have any suggestions as to how I can recreate the image from the string?

Screenshot from my app showing that I am able to paste an image and decode it into a string

Answer 1

How to create Image from string in Base64 (UWP)

We suggest you convet stream buffer to Base64 from imageStream diteactly, but not from PixelData. you could use CryptographicBuffer class to approach.

using (var imageStream = await imageReceived.OpenReadAsync())
{
    var buffer = new Windows.Storage.Streams.Buffer((uint)imageStream.Size);

    await imageStream.ReadAsync(buffer, (uint)imageStream.Size, InputStreamOptions.None);

    String strBase64New = CryptographicBuffer.EncodeToBase64String(buffer);

   
}

Retrive from base64 string

public static async Task<BitmapImage> LoadBase64(string base64)
{
    byte[] bytes = Convert.FromBase64String(base64);
    var bitmap = new BitmapImage();
    using (MemoryStream ms = new MemoryStream(bytes))
    {
        await bitmap.SetSourceAsync(ms.AsRandomAccessStream());
    }
    return bitmap;
}