Blazor（.NET 6）中BASE64图片剪贴板复制与本地存储问题咨询

1. 将Base64图片复制到剪贴板 #

Blazor属于Web环境，直接用C#无法操作剪贴板，需结合JS互操作实现，步骤如下：

• 先编写JS处理逻辑（可放在wwwroot/utils.js或直接通过IJSRuntime执行内联代码）
• 在Blazor组件中注入IJSRuntime调用该JS函数

代码示例 #

JS函数（wwwroot/utils.js）

window.copyBase64ImageToClipboard = async (base64String) => {
    // 移除Base64前缀（如data:image/png;base64,）
    const pureBase64 = base64String.replace(/^data:image\/\w+;base64,/, '');
    const byteChars = atob(pureBase64);
    const byteNumbers = new Array(byteChars.length);
    
    for (let i = 0; i < byteChars.length; i++) {
        byteNumbers[i] = byteChars.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: 'image/png' }); // 根据图片实际类型调整
    const clipboardItem = new ClipboardItem({ 'image/png': blob });
    
    await navigator.clipboard.write([clipboardItem]);
};

Blazor组件C#代码

@inject IJSRuntime JSRuntime

<button @onclick="CopyImageToClipboard">复制图片到剪贴板</button>

@code {
    // 你的Base64图片变量，替换为实际值
    private string _base64Image = "data:image/png;base64,xxxxxx...";

    private async Task CopyImageToClipboard()
    {
        await JSRuntime.InvokeVoidAsync("copyBase64ImageToClipboard", _base64Image);
    }
}

注意事项 #

• 浏览器需支持navigator.clipboard API，生产环境需HTTPS（本地localhost例外）
• 需根据图片实际格式调整Blob的type参数（如image/jpeg、image/gif）

2. 将Base64图片保存到本地磁盘 #

分Blazor WebAssembly和Blazor Server两种场景处理：

场景一：Blazor WebAssembly（客户端操作） #

直接通过JS调用浏览器下载功能：

JS函数（wwwroot/utils.js）

window.downloadBase64Image = (base64String, fileName) => {
    const downloadLink = document.createElement('a');
    downloadLink.href = base64String;
    downloadLink.download = fileName;
    
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
};

Blazor组件C#代码

@inject IJSRuntime JSRuntime

<button @onclick="SaveImageToLocal">保存图片到本地</button>

@code {
    private string _base64Image = "data:image/png;base64,xxxxxx...";

    private async Task SaveImageToLocal()
    {
        // 自定义保存的文件名
        await JSRuntime.InvokeVoidAsync("downloadBase64Image", _base64Image, "my-saved-image.png");
    }
}

场景二：Blazor Server（服务器端保存） #

C#代码运行在服务器，直接将Base64转字节数组后写入磁盘：

private void SaveImageToServerDisk()
{
    // 移除Base64前缀
    var pureBase64 = _base64Image.Split(',')[1];
    var imageBytes = Convert.FromBase64String(pureBase64);
    
    // 定义保存路径，可根据实际需求调整
    var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "saved-images", "server-saved-image.png");
    
    // 确保目标目录存在
    Directory.CreateDirectory(Path.GetDirectoryName(savePath));
    File.WriteAllBytes(savePath, imageBytes);
}

如果需要让客户端下载服务器保存的文件，可返回FileResult：

private IActionResult DownloadServerImage()
{
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "saved-images", "server-saved-image.png");
    var fileBytes = System.IO.File.ReadAllBytes(filePath);
    
    return File(fileBytes, "image/png", "server-saved-image.png");
}

适用的免费NuGet包 #

原生方案已满足需求，若想简化操作或扩展功能，可考虑以下包：

• Blazor.Extensions.Clipboard：封装Blazor剪贴板操作，减少JS互操作代码量
• SixLabors.ImageSharp：用于Base64图片的格式转换、压缩等预处理，完全开源免费

安装命令 #

# 安装Blazor.Extensions.Clipboard
Install-Package Blazor.Extensions.Clipboard

# 安装SixLabors.ImageSharp
Install-Package SixLabors.ImageSharp

示例：用Blazor.Extensions.Clipboard复制图片 #

@inject IClipboardService ClipboardService
@using SixLabors.ImageSharp;
@using SixLabors.ImageSharp.Formats.Png;

private async Task CopyImageWithNuGet()
{
    var pureBase64 = _base64Image.Split(',')[1];
    var imageBytes = Convert.FromBase64String(pureBase64);
    
    using var stream = new MemoryStream(imageBytes);
    using var image = Image.Load(stream);
    
    using var outputStream = new MemoryStream();
    image.Save(outputStream, new PngEncoder());
    outputStream.Position = 0;
    
    await ClipboardService.WriteImageAsync(outputStream, "image/png");
}

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