Node.js - 如何将图像转换为 base64 编码的数据 URL - Javascript

有时我们需要将图像转换为base64编码的数据URL。这可以使数据url内嵌在HTML和CSS中，从而减少了对服务器的请求和响应次数，还可以用于在网页上显示图片。

使用Node.js将图像转换为base64编码

下面是一个用Node.js将图像转换为base64编码的代码片段：

const fs = require('fs');

const image = fs.readFileSync('./image.jpg');
const encoded = image.toString('base64');
const dataUri = `data:image/jpeg;base64,${encoded}`;

上面的代码首先使用Node.js内置的fs模块读取了一个名为image.jpg的文件，然后使用toString()方法将其转换为base64编码。接下来，我们将数据URI的前缀和图像的base64编码连接起来生成完整的数据URI。

将图像转换为base64编码的数据URL的用途

将图像转换为base64编码的数据URL，可以用于以下场景：

• 在网页中显示图片
• 将图片作为CSS中的背景图片
• 将图片内嵌在HTML邮件中

在HTML中使用base64编码的数据URL

在HTML中，我们可以使用标签来显示图像，如下所示：

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAAAAAAAAAADAAAAAwAAAAEAAQAAAQAAAAD/7QA4UGhvdG9..."/>

将src属性设置为图像的base64编码数据URL即可。需要注意的是，base64编码的数据URL大小会增加30%～40%，因此可能会影响网页的性能。

在CSS中使用base64编码的数据URL

在CSS中，我们可以设置背景图片为base64编码的数据URL，如下所示：

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

同样是将URL设置为图像的base64数据URL，需要注意的是，由于CSS中背景图片会使用浏览器缓存，因此如果图像较大，建议不要使用base64编码的数据URL。

总结

本文介绍了如何使用Node.js将图像转换为base64编码的数据URL，并简单讲述了其用途和在HTML和CSS中的使用方式。需要注意的是，对于大型图片，不建议使用base64编码的数据URL，因为可能会影响网页的性能。