如何用C#/.NET实现客户端本地CT图像管理及Bootstrap表格展示

一、技术栈选型 #

优先采用ASP.NET Core Blazor Hybrid（Windows平台）：既能用C#统一编写业务逻辑，又能直接复用Bootstrap构建UI（含表格展示），同时原生支持本地文件系统访问；若偏好传统桌面应用框架，也可选择Windows Forms/WPF + WebView2嵌入Bootstrap页面。云端数据库推荐Azure SQL Server或Cosmos DB，用Entity Framework Core做数据访问层。

二、核心功能实现 #

1. 本地CT图像存储与读取 #

（1）初始化本地存储目录

先检查目标目录是否存在，不存在则自动创建：

private readonly string _localImageDir = @"C:\uploadedimages";

public LocalImageManager()
{
    if (!Directory.Exists(_localImageDir))
    {
        Directory.CreateDirectory(_localImageDir);
    }
}

（2）上传图像到本地

处理用户选择的CT文件（支持DICOM、JPG/PNG等），生成唯一文件名避免冲突后写入本地目录：

public async Task<string> UploadImageToLocal(IBrowserFile file) // Blazor场景用IBrowserFile
{
    var uniqueFileName = $"{Guid.NewGuid()}_{Path.GetFileName(file.Name)}";
    var savePath = Path.Combine(_localImageDir, uniqueFileName);
    
    using (var stream = new FileStream(savePath, FileMode.Create))
    {
        await file.OpenReadStream().CopyToAsync(stream);
    }
    
    return uniqueFileName; // 返回唯一文件名，用于关联云端元数据
}

WinForms/WPF场景替换为OpenFileDialog选择文件，逻辑一致。

2. 云端元数据存储 #

（1）定义元数据模型

public class CtImageMeta
{
    public int Id { get; set; }
    public string LocalFileName { get; set; } // 关联本地图像的唯一标识
    public string PatientName { get; set; }
    public int PatientAge { get; set; }
    public DateTime UploadTime { get; set; } = DateTime.UtcNow;
}

（2）配置数据库上下文

public class CtDbContext : DbContext
{
    public DbSet<CtImageMeta> CtImageMetas { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        // 替换为你的云端数据库连接字符串
        optionsBuilder.UseSqlServer("Server=tcp:your-cloud-server.database.windows.net,1433;Initial Catalog=your-db;User ID=your-account;Password=your-pass;Encrypt=True;");
    }
}

（3）保存/同步元数据到云端

public async Task SyncMetaToCloud(CtImageMeta meta)
{
    using (var context = new CtDbContext())
    {
        context.CtImageMetas.Add(meta);
        await context.SaveChangesAsync();
    }
}

public async Task<List<CtImageMeta>> GetAllCloudMeta()
{
    using (var context = new CtDbContext())
    {
        return await context.CtImageMetas.ToListAsync();
    }
}

3. 图像编辑功能 #

用跨平台图像库SixLabors.ImageSharp处理编辑操作（避免System.Drawing.Common的平台限制），示例裁剪功能：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;

public void EditLocalImage(string fileName, int cropX, int cropY, int cropW, int cropH)
{
    var imagePath = Path.Combine(_localImageDir, fileName);
    using (var image = Image.Load(imagePath))
    {
        image.Mutate(x => x.Crop(new Rectangle(cropX, cropY, cropW, cropH)));
        image.Save(imagePath); // 覆盖原文件，也可另存为新文件
    }
}

若处理DICOM格式CT图，需改用fo-dicom专业库解析图像数据。

4. Bootstrap表格展示本地图像 #

Blazor Hybrid场景直接在Razor组件中编写Bootstrap表格，绑定云端元数据与本地图像：

@page "/"
@inject LocalImageManager ImageManager
@inject CloudMetaManager MetaManager

<div class="container mt-4">
    <h3>CT图像管理列表</h3>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>患者姓名</th>
                <th>年龄</th>
                <th>上传时间</th>
                <th>图像预览</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var meta in MetaList)
            {
                <tr>
                    <td>@meta.PatientName</td>
                    <td>@meta.PatientAge</td>
                    <td>@meta.UploadTime.ToLocalTime().ToString("yyyy-MM-dd HH:mm")</td>
                    <td>
                        <img src="data:image/png;base64,@GetImageBase64(meta.LocalFileName)" width="120" />
                    </td>
                    <td>
                        <button class="btn btn-sm btn-primary" @onclick="() => EditImage(meta.LocalFileName)">编辑</button>
                        <button class="btn btn-sm btn-success" @onclick="() => SaveEdit(meta)">保存</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@code {
    private List<CtImageMeta> MetaList { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 启动时拉取云端最新元数据
        MetaList = await MetaManager.GetAllCloudMeta();
    }

    private string GetImageBase64(string fileName)
    {
        var imageBytes = File.ReadAllBytes(Path.Combine(@"C:\uploadedimages", fileName));
        return Convert.ToBase64String(imageBytes);
    }

    private void EditImage(string fileName)
    {
        // 可弹出编辑弹窗，传入自定义裁剪/调整参数
        ImageManager.EditLocalImage(fileName, 50, 50, 600, 600);
    }

    private async Task SaveEdit(CtImageMeta meta)
    {
        // 同步编辑后的元数据到云端
        await MetaManager.SyncMetaToCloud(meta);
    }
}

三、关键注意事项 #

• 本地权限：确保应用拥有C:\uploadedimages的读写权限，建议优先选择用户目录（如Environment.GetFolderPath(Environment.SpecialFolder.MyPictures)\CTImages）替代系统盘根目录，避免权限问题。
• 多设备同步：元数据可跨设备访问，但本地图像需用户自行同步（如通过OneDrive），或在元数据中增加文件哈希值用于校验。
• 性能优化：大尺寸CT图预览时，可生成缩略图存储，避免直接加载原图导致卡顿。

内容的提问来源于stack exchange，提问作者Fillo