显示从其 URI 检索到的图像

Question

我在尝试序列化包含 BitmapSource 字段的对象时遇到了一些问题。

事实上，一开始，我有一个 ImageSource，但它似乎不可序列化。 所以我尝试使用关联的属性来存储一个字符串并将图像转换回字符串或从字符串转换回图像。但是现在没有显示图像:-(

这里是 XAML 图像标签：

<Image 
                        x:Name="bookCover"
                        Grid.Row="0"
                        Grid.RowSpan="1"
                        Grid.Column="0"
                        MaxWidth="200"
                        MaxHeight="320"
                        Margin="5"
                        Source="{Binding Image}" SizeChanged="bookCover_SizeChanged" >

                    </Image>

这是模型类中的 Image 属性和字段：

public string _image;

public BitmapSource Image
        {
            get => Base64ToImage(_image);
            set
            {
                _image =ImageToBase64(value);
                OnPropertyChanged("Image");
            }
        }

及其相关方法：

public static string ImageToBase64(BitmapSource bitmap)
        {

            var encoder = new JpegBitmapEncoder();
            var frame = BitmapFrame.Create(bitmap);
            encoder.Frames.Add(frame);
            using (var stream = new MemoryStream())
            {
                encoder.Save(stream);
                return Convert.ToBase64String(stream.ToArray());
            }
        }

        public static  BitmapSource Base64ToImage(string base64)
        {
            byte[] bytes = Convert.FromBase64String(base64);
            using (var stream = new MemoryStream(bytes))
            {
                return BitmapFrame.Create(stream);
            }

        }

这里我的程序通过它的 URI 从 Internet 检索图像并存储它：

var myUri=new Uri(book0.LargeImage.URL);
bookToInsert.Image = new BitmapImage(myUri);

谢谢。

Answer 1

当您从创建后立即关闭的流创建 BitmapSource 时，您必须设置 BitmapCacheOption.OnLoad。否则，流必须保持打开状态，直到实际使用 BitmapSource，例如显示在 Image 元素中。

public static BitmapSource Base64ToImage(string base64)
{
    using (var stream = new MemoryStream(Convert.FromBase64String(base64)))
    {
        return BitmapFrame.Create(
            stream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
    }
}

---

几点说明：

1. base64 编码和解码似乎没有必要。更好地序列化字节数组。
2. 最初不要从 URL 创建 BitmapImage。最好通过网络请求直接获取图片缓冲区。
3. 您不仅可以将 Image 元素的 Source 属性绑定到 ImageSource，还可以绑定到字符串、Uri 或字节数组。所以你的财产可能被声明为byte[] Image。

尝试一个更简单的视图模型，如下所示：

public class ViewModel : INotifyPropertyChanged
{
    private byte[] image;

    public byte[] Image
    {
        get => image;
        set
        {
            image = value;
            OnPropertyChanged(nameof(Image));
        }
    }
}

并像这样设置 Image 属性：

var webClient = new WebClient();
viewModel.Image = webClient.DownloadData(book0.LargeImage.URL);

或异步：

var httpClient = new HttpClient();
viewModel.Image = await httpClient.GetByteArrayAsync(book0.LargeImage.URL);