在线编码图像

使用 Aspose.SVG for .NET API 实时编码图像! 请从本地文件系统加载图像,您将立即获得数据 URI、Base64 图像源和 Base64 CSS 背景源的结果。 支持JPG、JPEG、PJP、PJPEG、PNG、BMP、XBM、GIF、TIFF、ICO、IFIF、WEBP等图片格式。

关于 URI 方案

数据 URI 是一种基于 Base64 编码将图像和其他文件作为文本字符串嵌入网页中的方法。数据 URI 方案允许您在 HTML、CSS、JSON 或 SVG 文档中包含任何二进制数据。例如,您可以将图像嵌入到网页中,就好像它们是从外部资源加载的一样,但不是指定文件的 URL,而是插入图像的 Base64 编码内容。数据 URI 方案在 RFC 2397 中定义,截至 2022 年,它被大多数主流浏览器完全支持。使用数据 URI 的主要优点是加快了页面加载速度,因为图像已经嵌入 HTML 文档中,因此浏览器不需要发出额外的 Web 请求来检索文件。

数据 URI 的语法如下:data:[<mime type>][;charset=<charset>][;base64],<encoded data>

由于 Base64 编码数据的大小增加了 33%,因此建议仅对小图像使用数据 URI。大型 Base64 图像会在 HTML 中生成大量代码,这会导致性能优势的损失。如果您需要将 Image 转换为 Base64 并使用编码字符串嵌入到文本文件中,请先了解所有优缺点。


如何在 C# 中将图像转换为 Base64

为了将 Image 转换为 Base64 字符串,我们使用 Aspose.SVG for .NET API,它是一个功能丰富、功能强大、易于使用的 API。使用 C# 平台的文档操作 API。我们考虑 PNG 图像到 Base64 编码并将 Base64 字符串作为数据 URI 嵌入到 SVG 文档中的示例。只需几行代码即可完成这些操作:


将 Image 转换为 Base64 字符串并将其嵌入到 SVG 文件中的 C# 代码

    // Open a binary file - raster image
    var bytes = File.ReadAllBytes(@"image.png");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert PNG image to Base64
    img.Href.BaseVal = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");



在 C# 中将图像转换为 Base64 的步骤

  1. 打开要转换的图像。使用 ReadAllBytes(path) 方法打开 PNG 图像并将文件内容读入字节数组。
  2. 初始化 SVGDocument 类的新实例。
  3. 使用SVGDocument类的 CreateElementNS(namespaceURI,qualifiedName) 方法创建一个图像实例。 namespaceURI 设置对 W3C SVG 规范的引用。 qualifiedName 必须包含图像元素的字符串标签名称。
  4. 将图像转换为 Base64。调用 ToBase64String(bytes) 方法将 8 位整数数组转换为以 base64 数字编码的等效字符串表示形式。
  5. 使用 AppendChild(node) 方法将图像元素添加到 SVG 文档中。
  6. 调用 Save(path) 方法保存SVG文档。

数据 URI 的优缺点

数据 URI 为我们提供了一种在网页上嵌入图像的明智方法。 URI 方案可以以多种方式使用。但无论如何,有利有弊。

  • 加快页面加载。浏览器不需要发出额外的 Web 请求来检索文件,因为图像已经嵌入到 HTML 文档中。
  • 性能改进。浏览器需要更少的 CPU 时间。
  • 网页变得独立于外部文件,即使离线也可以轻松共享。

优点:

  • Base64 编码数据的大小比二进制图像大 1/3。
  • 编码的图像不会被浏览器缓存,每次访问此类页面时都会下载。
  • 编码图像难以编辑,因为需要首先解码 Base64 字符串。
  • Base64 图像永远不会被 Google 索引,因为它不会出现在图像搜索结果中。

缺点:

在线 Base64 编码器

Aspose.SVG 提供免费的在线应用程序来编码和解码二进制数据:

  • Base64 编码器 是一组工具,可让您以各种输出格式对二进制数据进行编码:Plain Base64、JSON、XML、URI 或 CSS。
  • 图像 Base64 解码器 通过在输入控件中粘贴 URI 字符串,将包含 Base64 字符串的数据 URI 转换为图像。

我们基于浏览器的应用程序适用于所有平台,包括 Windows、Linux、Mac OS、Android 和 iOS。您无需注册、插件或软件安装。开始安全、可靠、轻松地使用我们的在线 Base64 编码/解码工具!

Base64 编码使用示例

将 Base64 图像嵌入 SVG 文档的 SVG 代码

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>

嵌入 Base64 图像的 HTML 代码

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

将 Base64 图像嵌入为背景图像的 CSS 代码

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

将 Base64 图像嵌入 XML 文档的 XML 代码

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

将 Base64 图像嵌入 JSON 文档的 JSON 代码

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}



常问问题

1. 如何将 Image 转换为 Base64?

Aspose.SVG 允许您以任何方式将 Image 转换为 Base64 字符串 - 在线或以编程方式。 例如,您可以使用在线 Image 编码器 动态编码 Image,以快速、高质量地转换文件。 上传、编码 Image 并在几秒钟内获得结果! 另一方面,您可以使用 Aspose.SVG for .NET API 以编程方式将 Image 转换为 Base64。

2. 为什么需要 Base64 编码?

从历史上看,许多数据传输和存储格式使用文本而不是二进制代码(HTML、XML、电子邮件等)。如果数据传输格式是基于文本的,但您需要传输二进制数据怎么办?这就是 Base64 编码的用武之地。为了防止在通过 Internet 发送数据时二进制符号被误解,有必要将它们编码为字符。 Base64 编码的一些典型应用:图像的数据 URI 方案(CSS、HTML、JavaScript);将图片和其他二进制数据传输到 XML;将图像存储在数据库中;将图像包含在电子邮件中。

3. 哪些浏览器支持数据 URI?

数据 URI 是在网页上嵌入图像和其他文件的最快、最简单的方法。主要现代浏览器支持数据 URI:Chrome、Firefox、Safari、Edge、Opera 和 IE8+。

4. 什么是 Base64 编码?

Base64 是一种二进制到文本的编码方案,以 ASCII 字符串格式表示二进制数据。 当需要对需要通过设计用于处理文本数据的介质进行存储和传输的二进制信息进行编码时,通常会使用 Base64 编码。

.NET SVG API 入门

从命令行安装为 nuget install Aspose.SVG 或通过 Visual Studio 的 Package Manager Console 使用 Install-Package Aspose.SVG 安装。 或者,从 下载 获取离线 MSI 安装程序或 DLL 的 ZIP 文件。用于 .NET API 的 Aspose.SVG 是一个独立库,不依赖于任何用于 SVG 文档处理的软件。 有关 C# 库安装和系统要求的更多详细信息,请参阅 Aspose.SVG 文档

其他支持的 Base64 编码器

您可以将 Image 转换为 Base64 字符串。支持 JPG、PNG、BMP、GIF、TIFF、ICO 和 SVG 格式:

JPG to Base64 (JPEG Image)
PNG to Base64 (Portable Network Graphics)
BMP to Base64 (Bitmap Image)
SVG to Base64 (Scalable Vector Graphics)
TIFF to Base64 (Tagged Image Format)
GIF TO Base64 (Graphical Interchange Format)
ICO to Base64 (Computer Icons Format)
Image to Base64 (Binary Image)