用两种方法将图片资源转换为 base64 格式

2023-09-24 02:06:50

引言

图片资源在现代 web 开发中无处不在，将其转换为 base64 格式是一种常见的需求。base64 格式是一种将二进制数据编码为 ASCII 字符串的方法，这使得将图片嵌入 HTML 和 CSS 等文本文件中成为可能。在这篇文章中，我们将探讨两种将图片资源转换为 base64 格式的方法：本地直接选择图片和第三方资源图片。

方法一：本地直接选择图片

步骤 1：选择要转换的图片

打开您喜欢的图像编辑软件（例如 Photoshop、GIMP 或 Paint）。
打开要转换为 base64 格式的图片文件。

步骤 2：导出为 base64

不同的图像编辑软件导出为 base64 的方式可能略有不同。一般来说，您需要寻找一个名为“导出为”或“另存为”的选项。
在导出格式中，选择“base64”。

步骤 3：复制 base64 字符串

导出完成后，图像编辑软件将生成一个 base64 字符串。
复制此字符串并将其粘贴到您的 HTML 或 CSS 文件中。

代码示例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAjkjwql4iwAAACFJREFUCNdjYGBg+MDixzzHeJhGZhcBpYAAJ2LsIC/n2/oAAAAASUVORK5CYII=">

方法二：第三方资源图片

步骤 1：获取图片 URL

右键单击要转换的图片，然后选择“复制图片地址”。

步骤 2：使用在线工具

访问在线 base64 编码工具（例如 https://www.base64encode.org/）。
将复制的图片 URL 粘贴到文本框中。

步骤 3：生成 base64 字符串

单击“编码”按钮。
工具将生成一个 base64 字符串。

步骤 4：复制 base64 字符串

复制此字符串并将其粘贴到您的 HTML 或 CSS 文件中。

代码示例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAjkjwql4iwAAACFJREFUCNdjYGBg+MDixzzHeJhGZhcBpYAAJ2LsIC/n2/oAAAAASUVORK5CYII=">

结论

我们已经讨论了两种将图片资源转换为 base64 格式的方法：本地直接选择图片和第三方资源图片。选择哪种方法取决于您的具体需求和可用的资源。

将图片转换为 base64 格式在许多场景下都有用处，例如：