跳至主要內容

图片处理与显示优化

SunnyFan大约 10 分钟约 3140 字

图片处理与显示优化

简介

WPF 应用中图片处理涉及图片加载、显示优化、缩放裁剪和格式转换。WPF 的 BitmapImage/BitmapSource 提供了强大的图片处理能力，配合 DecodePixelWidth 控制解码尺寸、Freeze 冻结资源和异步加载，可以实现高性能的图片展示。在工业上位机中，图片处理常用于设备照片管理、报警截图、图表导出和仪表盘背景渲染。

WPF 图片处理体系

图片来源                 处理方式                显示控件
┌──────────┐           ┌──────────┐           ┌──────────┐
│ 文件系统   │           │ 加载优化   │           │ Image    │
│ 网络下载   │  → 流/字节  │ 缩放裁剪   │  → 位图  → │ ImageBrush│
│ 内存数据   │           │ 格式转换   │           │ Drawing  │
│ 数据库     │           │ 滤镜效果   │           │ Visual   │
└──────────┘           └──────────┘           └──────────┘

图片内存计算

图片内存占用 = 宽度 × 高度 × 每像素字节数 × DPI 缩放比例

示例（一张 4000x3000 的照片）：
- 原始加载：4000 × 3000 × 4 = 48MB（PBGRA32）
- DecodePixelWidth=800：800 × 600 × 4 = 1.92MB
- 缩放比：25 倍内存节省

关键：WPF 以 96 DPI 解码，但高 DPI 屏幕会自动缩放
设置 DecodePixelWidth 可以控制解码后的实际像素数

特点

实现

图片加载

基本加载方式

<!-- XAML 直接加载 -->
<Image Source="pack://application:,,,/Images/logo.png"
       Width="100" Height="100"
       Stretch="Uniform"
       RenderOptions.BitmapScalingMode="HighQuality"/>

<!-- 绑定加载 -->
<Image Source="{Binding Avatar}"
       Width="64" Height="64"
       Stretch="UniformToFill">
    <Image.Clip>
        <EllipseGeometry RadiusX="32" RadiusY="32" Center="32,32"/>
    </Image.Clip>
</Image>

<!-- 高 DPI 渲染优化 -->
<Image Source="{Binding Photo}"
       RenderOptions.BitmapScalingMode="HighQuality"
       RenderOptions.CachingHint="Cache"/>

图片加载工具类

// ========== 图片加载工具类 ==========

/// <summary>
/// 图片加载辅助类 — 统一管理图片加载、优化和缓存
/// </summary>
public static class ImageHelper
{
    /// <summary>
    /// 加载并优化尺寸（推荐方式）
    /// DecodePixelWidth 只解码到指定宽度，节省大量内存
    /// </summary>
    public static BitmapImage LoadOptimized(string filePath, int maxWidth = 800)
    {
        var bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.UriSource = new Uri(filePath, UriKind.RelativeOrAbsolute);
        bitmap.DecodePixelWidth = maxWidth;    // 核心：只解码到指定宽度
        bitmap.CacheOption = BitmapCacheOption.OnLoad; // 立即加载到内存
        bitmap.CreateOptions = BitmapCreateOptions.IgnoreColorProfile; // 忽略颜色配置
        bitmap.Rotation = Rotation.Rotate0;    // 自动处理 EXIF 旋转
        bitmap.EndInit();
        bitmap.Freeze();  // 核心：冻结使其可跨线程访问，且不可修改
        return bitmap;
    }

    /// <summary>
    /// 从流加载
    /// </summary>
    public static BitmapImage FromStream(Stream stream, int maxWidth = 800)
    {
        var bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.StreamSource = stream;
        bitmap.DecodePixelWidth = maxWidth;
        bitmap.CacheOption = BitmapCacheOption.OnLoad;
        bitmap.EndInit();
        bitmap.Freeze();
        return bitmap;
    }

    /// <summary>
    /// 从字节数组加载
    /// </summary>
    public static BitmapImage FromBytes(byte[] data, int maxWidth = 800)
    {
        using var stream = new MemoryStream(data);
        return FromStream(stream, maxWidth);
    }

    /// <summary>
    /// 异步加载（后台线程，不阻塞 UI）
    /// </summary>
    public static async Task<BitmapImage> LoadAsync(string filePath, int maxWidth = 800)
    {
        return await Task.Run(() => LoadOptimized(filePath, maxWidth))
            .ConfigureAwait(false);
    }

    /// <summary>
    /// 从 URI 异步加载
    /// </summary>
    public static async Task<BitmapImage> LoadFromUriAsync(Uri uri, int maxWidth = 800)
    {
        return await Task.Run(() =>
        {
            var bitmap = new BitmapImage();
            bitmap.BeginInit();
            bitmap.UriSource = uri;
            bitmap.DecodePixelWidth = maxWidth;
            bitmap.CacheOption = BitmapCacheOption.OnLoad;
            bitmap.EndInit();
            bitmap.Freeze();
            return bitmap;
        }).ConfigureAwait(false);
    }

    /// <summary>
    /// 截取 UIElement 为图片
    /// </summary>
    public static BitmapSource CaptureVisual(UIElement element, double dpi = 96)
    {
        var renderSize = new Size(element.RenderSize.Width, element.RenderSize.Height);
        var renderTarget = new RenderTargetBitmap(
            (int)renderSize.Width, (int)renderSize.Height, dpi, dpi, PixelFormats.Pbgra32);

        renderTarget.Render(element);
        renderTarget.Freeze();
        return renderTarget;
    }

    /// <summary>
    /// 截取整个窗口
    /// </summary>
    public static BitmapSource CaptureWindow(Window window, double dpi = 96)
    {
        var transform = window.TransformToVisual(window);
        var size = transform.TransformBounds(new Rect(window.RenderSize));

        var renderTarget = new RenderTargetBitmap(
            (int)size.Width, (int)size.Height, dpi, dpi, PixelFormats.Pbgra32);

        var visual = new DrawingVisual();
        using (var dc = visual.RenderOpen())
        {
            var brush = new VisualBrush(window);
            dc.DrawRectangle(brush, null, new Rect(new Point(), size));
        }

        renderTarget.Render(visual);
        renderTarget.Freeze();
        return renderTarget;
    }
}

图片缩放与裁剪

// ========== 图片变换操作 ==========

/// <summary>
/// 图片变换工具类 — 缩放、裁剪、旋转、翻转
/// </summary>
public static class ImageTransform
{
    /// <summary>
    /// 缩放图片（高质量双线性插值）
    /// </summary>
    public static BitmapSource Resize(BitmapSource source, int width, int height)
    {
        var group = new DrawingGroup();
        RenderOptions.SetBitmapScalingMode(group, BitmapScalingMode.HighQuality);

        group.Children.Add(new ImageDrawing(source, new Rect(0, 0, width, height)));

        var target = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
        target.Render(group);
        target.Freeze();
        return target;
    }

    /// <summary>
    /// 按比例缩放
    /// </summary>
    public static BitmapSource ResizeByScale(BitmapSource source, double scale)
    {
        int newWidth = Math.Max(1, (int)(source.PixelWidth * scale));
        int newHeight = Math.Max(1, (int)(source.PixelHeight * scale));
        return Resize(source, newWidth, newHeight);
    }

    /// <summary>
    /// 裁剪图片
    /// </summary>
    public static BitmapSource Crop(BitmapSource source, int x, int y, int width, int height)
    {
        // 边界检查
        x = Math.Max(0, Math.Min(x, source.PixelWidth - 1));
        y = Math.Max(0, Math.Min(y, source.PixelHeight - 1));
        width = Math.Min(width, source.PixelWidth - x);
        height = Math.Min(height, source.PixelHeight - y);

        var cropRect = new Int32Rect(x, y, width, height);
        var cropped = new CroppedBitmap(source, cropRect);
        cropped.Freeze();
        return cropped;
    }

    /// <summary>
    /// 旋转图片（90 度倍数）
    /// </summary>
    public static BitmapSource Rotate(BitmapSource source, Rotation angle)
    {
        var rotated = new TransformedBitmap(source, new RotateTransform((double)angle));
        rotated.Freeze();
        return rotated;
    }

    /// <summary>
    /// 水平翻转
    /// </summary>
    public static BitmapSource FlipHorizontal(BitmapSource source)
    {
        var flipped = new TransformedBitmap(source, new ScaleTransform(-1, 1));
        flipped.Freeze();
        return flipped;
    }

    /// <summary>
    /// 垂直翻转
    /// </summary>
    public static BitmapSource FlipVertical(BitmapSource source)
    {
        var flipped = new TransformedBitmap(source, new ScaleTransform(1, -1));
        flipped.Freeze();
        return flipped;
    }

    /// <summary>
    /// 生成缩略图（保持比例）
    /// </summary>
    public static BitmapSource Thumbnail(BitmapSource source, int size = 128)
    {
        double ratio = Math.Min((double)size / source.PixelWidth, (double)size / source.PixelHeight);
        int newWidth = Math.Max(1, (int)(source.PixelWidth * ratio));
        int newHeight = Math.Max(1, (int)(source.PixelHeight * ratio));
        return Resize(source, newWidth, newHeight);
    }

    /// <summary>
    /// 居中裁剪（正方形裁剪）
    /// </summary>
    public static BitmapSource CenterCrop(BitmapSource source, int targetSize)
    {
        int minSide = Math.Min(source.PixelWidth, source.PixelHeight);
        int x = (source.PixelWidth - minSide) / 2;
        int y = (source.PixelHeight - minSide) / 2;
        var cropped = Crop(source, x, y, minSide, minSide);
        return Resize(cropped, targetSize, targetSize);
    }
}

格式转换

// ========== 图片格式转换和保存 ==========

/// <summary>
/// 图片格式转换工具类
/// </summary>
public static class ImageConverter
{
    /// <summary>
    /// BitmapSource → byte[]（PNG 格式，无损）
    /// </summary>
    public static byte[] ToPngBytes(BitmapSource bitmap)
    {
        using var stream = new MemoryStream();
        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bitmap));
        encoder.Save(stream);
        return stream.ToArray();
    }

    /// <summary>
    /// BitmapSource → byte[]（JPEG 格式，有损）
    /// </summary>
    public static byte[] ToJpgBytes(BitmapSource bitmap, int quality = 90)
    {
        using var stream = new MemoryStream();
        var encoder = new JpegBitmapEncoder { QualityLevel = quality };
        encoder.Frames.Add(BitmapFrame.Create(bitmap));
        encoder.Save(stream);
        return stream.ToArray();
    }

    /// <summary>
    /// BitmapSource → byte[]（BMP 格式）
    /// </summary>
    public static byte[] ToBmpBytes(BitmapSource bitmap)
    {
        using var stream = new MemoryStream();
        var encoder = new BmpBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bitmap));
        encoder.Save(stream);
        return stream.ToArray();
    }

    /// <summary>
    /// 保存到文件（自动识别格式）
    /// </summary>
    public static void SaveToFile(BitmapSource bitmap, string filePath)
    {
        var extension = Path.GetExtension(filePath).ToLower();
        BitmapEncoder encoder = extension switch
        {
            ".png" => new PngBitmapEncoder(),
            ".jpg" or ".jpeg" => new JpegBitmapEncoder { QualityLevel = 90 },
            ".bmp" => new BmpBitmapEncoder(),
            ".gif" => new GifBitmapEncoder(),
            ".tiff" or ".tif" => new TiffBitmapEncoder(),
            _ => new PngBitmapEncoder()
        };

        encoder.Frames.Add(BitmapFrame.Create(bitmap));
        using var stream = File.Create(filePath);
        encoder.Save(stream);
    }

    /// <summary>
    /// Base64 ↔ BitmapSource
    /// </summary>
    public static string ToBase64(BitmapSource bitmap)
    {
        var bytes = ToPngBytes(bitmap);
        return Convert.ToBase64String(bytes);
    }

    public static BitmapImage FromBase64(string base64)
    {
        var bytes = Convert.FromBase64String(base64);
        return ImageHelper.FromBytes(bytes);
    }

    /// <summary>
    /// 图片格式转换
    /// </summary>
    public static void ConvertFormat(string sourcePath, string targetPath)
    {
        var bitmap = ImageHelper.LoadOptimized(sourcePath);
        SaveToFile(bitmap, targetPath);
    }
}

图片缓存与列表

内存缓存服务

// ========== 图片缓存服务 ==========

/// <summary>
/// 图片缓存服务 — 缓存已加载的 BitmapImage，避免重复加载
/// 使用 LRU 策略限制内存占用
/// </summary>
public class ImageCacheService
{
    private readonly ConcurrentDictionary<string, BitmapImage> _cache = new();
    private readonly SemaphoreSlim _semaphore = new(4); // 并发加载限制
    private readonly int _maxCacheSize;
    private readonly LinkedList<string> _lruList = new();

    public ImageCacheService(int maxCacheSize = 500)
    {
        _maxCacheSize = maxCacheSize;
    }

    /// <summary>
    /// 获取或加载图片（带缓存）
    /// </summary>
    public async Task<BitmapImage> GetOrLoadAsync(string path, int thumbnailSize = 200)
    {
        if (_cache.TryGetValue(path, out var cached))
            return cached;

        await _semaphore.WaitAsync();
        try
        {
            // 双重检查
            if (_cache.TryGetValue(path, out cached))
                return cached;

            var bitmap = await Task.Run(() =>
                ImageHelper.LoadOptimized(path, thumbnailSize));

            // LRU 更新
            lock (_lruList)
            {
                _lruList.Remove(path);
                _lruList.AddFirst(path);

                // 淘汰旧缓存
                while (_cache.Count >= _maxCacheSize && _lruList.Count > 0)
                {
                    var oldest = _lruList.Last!.Value;
                    _cache.TryRemove(oldest, out _);
                    _lruList.RemoveLast();
                }
            }

            _cache[path] = bitmap;
            return bitmap;
        }
        finally
        {
            _semaphore.Release();
        }
    }

    /// <summary>
    /// 预加载图片列表
    /// </summary>
    public async Task PreloadAsync(IEnumerable<string> paths, int thumbnailSize = 200)
    {
        var tasks = paths.Select(p => GetOrLoadAsync(p, thumbnailSize));
        await Task.WhenAll(tasks);
    }

    /// <summary>
    /// 清空缓存
    /// </summary>
    public void Clear()
    {
        _cache.Clear();
        lock (_lruList) { _lruList.Clear(); }
    }

    /// <summary>
    /// 获取缓存统计
    /// </summary>
    public int CacheCount => _cache.Count;
}

图片列表 ViewModel

// ========== 图片列表 ViewModel ==========

/// <summary>
/// 图片库 ViewModel — 支持异步加载和缓存
/// </summary>
public class ImageGalleryViewModel : ObservableObject, IDisposable
{
    private readonly ImageCacheService _cache;
    private readonly SemaphoreSlim _loadSemaphore = new(2);

    public ObservableCollection<ImageItemViewModel> Images { get; } = new();

    [ObservableProperty]
    private bool _isLoading;

    [ObservableProperty]
    private string _statusText = "就绪";

    public ImageGalleryViewModel(ImageCacheService cache)
    {
        _cache = cache;
    }

    /// <summary>
    /// 加载图片文件夹
    /// </summary>
    [RelayCommand]
    public async Task LoadFolderAsync(string folderPath)
    {
        IsLoading = true;
        StatusText = "正在加载图片...";

        try
        {
            var files = Directory.GetFiles(folderPath, "*.*")
                .Where(f => IsImageFile(f))
                .ToList();

            Images.Clear();
            StatusText = $"找到 {files.Count} 张图片，正在加载...";

            // 分批加载，避免一次性加载过多
            for (int i = 0; i < files.Count; i++)
            {
                var vm = new ImageItemViewModel(files[i], _cache);
                Images.Add(vm);

                // 异步加载缩略图
                _ = vm.LoadThumbnailAsync();

                if (i % 20 == 0)
                    StatusText = $"已加载 {i + 1}/{files.Count}";
            }

            StatusText = $"已加载 {files.Count} 张图片";
        }
        catch (Exception ex)
        {
            StatusText = $"加载失败: {ex.Message}";
        }
        finally
        {
            IsLoading = false;
        }
    }

    private static bool IsImageFile(string path)
    {
        var ext = Path.GetExtension(path).ToLower();
        return ext is ".png" or ".jpg" or ".jpeg" or ".bmp" or ".gif" or ".tiff" or ".webp";
    }

    public void Dispose()
    {
        _loadSemaphore.Dispose();
        foreach (var item in Images)
            item.Dispose();
    }
}

public class ImageItemViewModel : ObservableObject, IDisposable
{
    private readonly string _filePath;
    private readonly ImageCacheService _cache;

    [ObservableProperty]
    private BitmapImage? _thumbnail;

    [ObservableProperty]
    private bool _isLoaded;

    public string FileName => Path.GetFileName(_filePath);
    public string FilePath => _filePath;

    public ImageItemViewModel(string filePath, ImageCacheService cache)
    {
        _filePath = filePath;
        _cache = cache;
    }

    public async Task LoadThumbnailAsync()
    {
        try
        {
            Thumbnail = await _cache.GetOrLoadAsync(_filePath, 200);
            IsLoaded = true;
        }
        catch
        {
            // 加载失败时忽略
        }
    }

    public void Dispose()
    {
        Thumbnail = null;
    }
}

图片显示优化

// ========== WPF 图片显示优化技巧 ==========

/// <summary>
/// 图片显示优化建议汇总
/// </summary>
public static class ImageOptimizationTips
{
    // 1. 设置 DecodePixelWidth — 最重要的优化
    // 只解码需要的尺寸，而非原始尺寸
    /*
    <Image Source="{Binding Photo}" Width="200">
        <Image.Source>
            <BitmapImage DecodePixelWidth="200" UriSource="{Binding PhotoPath}"/>
        </Image.Source>
    </Image>
    */

    // 2. 使用 Freeze 冻结图片 — 允许跨线程使用
    // bitmap.Freeze();

    // 3. 设置 BitmapScalingMode
    // Uniform — 高质量缩放
    // HighQuality — 最高质量（但更慢）
    // Linear — 线性插值
    /*
    RenderOptions.BitmapScalingMode="HighQuality"
    */

    // 4. 设置 CachingHint
    // Cache — 渲染后的位图缓存
    /*
    RenderOptions.CachingHint="Cache"
    */

    // 5. 使用 Stretch.Uniform 避免变形
    /*
    <Image Stretch="Uniform"/>
    */

    // 6. 使用 CacheOption.OnLoad 立即加载
    // bitmap.CacheOption = BitmapCacheOption.OnLoad;

    // 7. 大列表使用虚拟化
    /*
    <ListBox VirtualizingPanel.IsVirtualizing="True"
             VirtualizingPanel.VirtualizationMode="Recycling"/>
    */

    // 8. 释放不再使用的图片引用
    // thumbnail = null; GC 会回收
}

优点

缺点

总结

WPF 图片处理核心：用 DecodePixelWidth 控制解码尺寸节省内存，Freeze 冻结资源防止泄漏和跨线程安全，异步加载避免卡 UI。缩略图列表场景建议缓存 BitmapImage 实例并使用虚拟化。图片保存用 BitmapEncoder 子类（PngBitmapEncoder/JpegBitmapEncoder）。复杂图像处理建议使用 SkiaSharp。

关键知识点

  • DecodePixelWidth 是最关键的内存优化手段。
  • Freeze() 使 BitmapImage 不可修改且可跨线程访问。
  • BitmapCacheOption.OnLoad 立即加载到内存，释放文件锁。
  • RenderOptions.BitmapScalingMode 控制缩放质量。
  • RenderTargetBitmap 可将任何 Visual 截图为图片。
  • PngBitmapEncoder 无损，JpegBitmapEncoder 有损但文件小。

项目落地视角

  • 所有图片加载都应使用 DecodePixelWidth 控制尺寸。
  • 使用 ImageCacheService 缓存常用图片。
  • 大列表使用虚拟化 + 缩略图缓存。
  • 图片加载放在后台线程（Task.Run）。
  • 不再使用的图片引用及时置 null。

常见误区

  • 加载原始尺寸大图导致内存暴涨。
  • 忘记 Freeze 导致跨线程异常。
  • 在 UI 线程同步加载大图导致界面卡顿。
  • 使用 CacheOption.Default 而不是 OnLoad 导致文件锁。
  • 图片列表没有虚拟化导致内存和性能问题。

进阶路线

  • 学习 SkiaSharp 实现更强大的图像处理（滤镜、特效）。
  • 研究 Direct2D/DirectWrite 实现硬件加速图像渲染。
  • 实现 WebP/HEIC 格式支持（通过第三方解码器）。
  • 学习ImageSharp 库的服务端图片处理。

适用场景

  • 设备照片管理和缩略图展示。
  • 报警截图保存和查看。
  • 图表和报表导出为图片。
  • 仪表盘和看板的背景图渲染。

落地建议

  • 封装 ImageHelper 和 ImageCacheService 为项目通用工具。
  • 为图片加载添加异常处理和占位图。
  • 大图查看器使用异步加载和内存优化。
  • 图片导出支持 PNG（无损）和 JPEG（有损）两种格式。

排错清单

  • 检查图片路径是否正确（相对路径 vs 绝对路径 vs pack URI）。
  • 确认 DecodePixelWidth 是否设置（防止加载原始大图）。
  • 检查 Freeze 是否在非 UI 线程调用前设置。
  • 确认文件格式是否被 WPF 原生支持。

复盘问题

  • 如果把《图片处理与显示优化》放进你的当前项目，最先要验证的输入、输出和失败路径分别是什么？
  • 《图片处理与显示优化》最容易在什么规模、什么边界条件下暴露问题？
  • 相比默认实现或替代方案，采用《图片处理与显示优化》最大的收益和代价分别是什么？

延伸阅读

Copyright © 2026 SunnyFan