如何使用 C# 将图像转换为 Html 的数据 URI？

Posted 2023-03-05

【中文标题】如何使用 C# 将图像转换为 Html 的数据 URI？

【英文标题】：how to convert Image to Data URI for Html with C#?

【发布时间】：2011-10-13 04:09:57

【问题描述】：

我需要在 Win-application for html 中将图像转换为数据 URL（嵌入图像），我需要 图片的数据 URL（嵌入图片）。

【问题讨论】：

标题更好地解释了实际问题。

感谢 Jeff，我在本地磁盘中有很多图像，图像大小不同，有些图像大，有些图像小，我需要将某些图像转换为 HTML 并在 Web 浏览器中使用的解决方案？

【参考方案1】：

我的版本：

string GetBase64Uri(string imgFile)

    var ext = Path.GetExtension(imgFile);
    if(dicSupportedFormats.TryGetValue(ext, out var typeStr))
        return $"<img src=\"data:image/typeStr;base64,Convert.ToBase64String(File.ReadAllBytes(imgFile))\" />";
    else
        return null;


Dictionary<string, string> dicSupportedFormats = new Dictionary<string, string>
    ".jpg", "jpeg",
    ".jpeg", "jpeg",
    ".jfif", "jpeg",
    ".pjp", "jpeg",
    ".pjpeg", "jpeg",
    ".png", "png",
    ".svg", "svg+xml",
    ".webp", "webp",
    ".gif", "gif",
    ".avif", "avif",
    ".apng", "apng",
    ".ico", "x-icon",
    ".cur", "x-icon",
    ".tiff", "tiff",
    ".tif", "tiff",
;

【参考方案2】：

如果您使用的是 ASP.NET MVC，那么来自Ankur's answer 的代码可能会更方便：

public static string DataUriContent(this UrlHelper url, string path)

    var filePath = HttpContext.Current.Server.MapPath(path);
    var sb = new StringBuilder();
    sb.Append("data:image/")
        .Append((Path.GetExtension(filePath) ?? "png").Replace(".", ""))
        .Append(";base64,")
        .Append(Convert.ToBase64String(File.ReadAllBytes(filePath)));
    return sb.ToString();

以及用法（只需将@Url.Content 替换为@Url.DataUriContent）：

<img src="@Url.DataUriContent("~/Path/To/Image/yourImage.png")"/>

【参考方案3】：

        public static string GetDataURL(string imgFile)
        
            return "<img src=\"data:image/" 
                        + Path.GetExtension(imgFile).Replace(".","")
                        + ";base64," 
                        + Convert.ToBase64String(File.ReadAllBytes(imgFile)) + "\" />";
        

如果文件扩展名与文件的实际内容不匹配，

Path.GetExtension(imgFile).Replace(".","") 将不起作用 - 我认为 MIME Con​​tent-Type 应该作为参数传递。

【参考方案4】：

数据 URL 不就是图片 base 64 编码的吗？

那么这应该可以了。

var bytes = File.ReadAllBytes("C:\\somepath\\picture.png");
var b64String = Convert.ToBase64String(bytes);
var dataUrl = "data:image/png;base64," + b64String;