Base64 图像 HTML 示例 - Html

在 HTML 中，如果需要使用图片，一般会通过 <img> 标签来实现。但是，有些情况下我们可能需要在 HTML 中使用 Base64 图像来代替外部图片文件，比如：

• 减少 http 请求次数，提升页面性能
• 图像文件较小，不需要单独存储
• 因为网速等问题，无法加载外部图片文件

本文将会介绍如何在 HTML 中使用 Base64 图像，并提供一些实用的示例。

如何生成 Base64 图像数据

首先，我们需要将要使用的图像文件转成 Base64 编码。这可以通过多种方式来实现，下面是两种常见的方式：

1. 使用在线 Base64 图像转换工具。比如 Base64 图像转换器 可以将本地图像文件转成 Base64 编码。
2. 使用编程语言，比如 JavaScript，在代码中生成 Base64 数据。比如下面这个示例：

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
var base64Data = canvas.toDataURL();
console.log(base64Data);

这段代码生成了一个 100x100 的黑色矩形，并将结果输出为 Base64 数据。

在 HTML 中使用 Base64 图像

在 HTML 中使用 Base64 图像其实很简单，只需要将 Base64 数据作为 src 属性的值即可。比如下面这个示例：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAF0lEQVQI12O4/eBAO4DMCw4P+8DQfQALO7A9XtFJAAAAABJRU5ErkJggg==">

这个示例展示了一个 1x1 的 PNG 图像，使用的就是上面生成的 Base64 数据。

需要注意的是，src 属性的值必须以 "data:" 开头，后面接着是图像的 MIME 类型和 Base64 编码的数据。比如，上面示例中使用的 MIME 类型是 image/png。

一些实用的示例

直接在 HTML 中定义 Base64 数据

如果图片文件本身很小，或者你希望在 HTML 中直接定义图片，可以使用下面的方式：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
      AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgl
      jNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

这一种方法可以直接嵌入图像数据到 HTML 中，无需外部文件即可展示图片。

以背景图像的形式使用 Base64 数据

可以通过 css 的 background-image 属性来以背景图像的形式使用 Base64 数据。比如下面这个示例：

<div style="width: 500px; height: 500px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgl
jNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==)"></div>

这个示例展示了一个 500x500 的矩形，背景图片为一个 1x1 的 PNG 图像。

在 canvas 中展示 Base64 数据

如果要在 canvas 中展示 Base64 数据，可以通过下面的方式：

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;

var img = new Image();
img.onload = function() {
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
};
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAF0lEQVQI12O4/e
BAO4DMCw4P+8DQfQALO7A9XtFJAAAAABJRU5ErkJggg==";

这个示例展示了一个 500x500 的 canvas，绘制的图像为一个 1x1 的 PNG 图像。

总结

本文介绍了在 HTML 中使用 Base64 图像的方式，并提供了一些实用的示例。使用 Base64 图像可以减少 http 请求次数，提升页面性能，也可以用于展示一些小的图像文件。