如何在C#中从Data URL下载图片（Blazor Hybrid场景）

Data URL并非标准HTTP/HTTPS协议的URL，所以HttpClient无法直接识别处理。要在C#中提取其中的图片内容，核心思路是解析Data URL的结构，提取内嵌的Base64编码内容并转换为字节数组，再进行本地保存。

步骤1：解析Data URL并转换为字节数组 #

Data URL的格式为data:[<mediatype>][;base64],<data>，我们需要分离出Base64部分并解码：

public static byte[] DataUrlToBytes(string dataUrl)
{
    var splitIndex = dataUrl.IndexOf(',');
    if (splitIndex == -1)
        throw new ArgumentException("无效的Data URL格式");
    
    var base64Content = dataUrl.Substring(splitIndex + 1);
    // 处理URL安全的Base64编码（部分场景会将+/-替换为-_）
    base64Content = base64Content.Replace('-', '+').Replace('_', '/');
    return Convert.FromBase64String(base64Content);
}

步骤2：在Blazor组件中完整实现 #

结合你的Blazor Hybrid场景，从JS获取Data URL后，调用上面的方法转换，再保存到本地：

@inject IJSRuntime JS
@inject IFileSaver FileSaver // 需要安装CommunityToolkit.Maui包

<button @onclick="SaveCanvasImage">保存图片</button>

@code {
    private async Task SaveCanvasImage()
    {
        // 通过JS互操作获取canvas的Data URL
        var dataUrl = await JS.InvokeAsync<string>("getCanvasDataUrl");
        
        // 转换为字节数组
        byte[] imageBytes;
        try
        {
            imageBytes = DataUrlToBytes(dataUrl);
        }
        catch (Exception ex)
        {
            await JS.InvokeVoidAsync("alert", $"解析Data URL失败: {ex.Message}");
            return;
        }
        
        // 保存到本地，使用CommunityToolkit.Maui的FileSaver适配多平台
        var saveResult = await FileSaver.SaveAsync(
            "painting.png", 
            new MemoryStream(imageBytes)
        );
        
        if (saveResult.IsSuccessful)
        {
            await JS.InvokeVoidAsync("alert", $"图片已保存至: {saveResult.FilePath}");
        }
        else
        {
            await JS.InvokeVoidAsync("alert", $"保存失败: {saveResult.Exception.Message}");
        }
    }
    
    private static byte[] DataUrlToBytes(string dataUrl)
    {
        var splitIndex = dataUrl.IndexOf(',');
        if (splitIndex == -1)
            throw new ArgumentException("无效的Data URL格式");
        
        var base64Content = dataUrl.Substring(splitIndex + 1);
        base64Content = base64Content.Replace('-', '+').Replace('_', '/');
        return Convert.FromBase64String(base64Content);
    }
}

配套的JavaScript代码 #

确保你的JS函数正确返回canvas的Data URL：

window.getCanvasDataUrl = () => {
    const canvas = document.getElementById("your-canvas-id");
    return canvas.toDataURL("image/png"); // 可指定格式如image/jpeg，需对应保存的文件名后缀
};

关键注意事项 #

• 平台权限：在Android平台，Android 13及以下需在AndroidManifest.xml中声明WRITE_EXTERNAL_STORAGE权限；Android 13+无需额外权限，FileSaver会自动适配系统存储规则。
• 格式匹配：如果使用toDataURL("image/jpeg")生成Data URL，保存时需将文件名改为painting.jpg，保证文件格式与编码内容一致。
• Canvas状态：调用toDataURL前确保Canvas已完成渲染，避免生成空的Data URL。

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