使用 Node.js 提取 HTML 中的 Base64 图片并保存为文件（AI生成）

泠ling然
312 阅读4分钟

在现代 Web 开发中，Base64 编码的图片常常被直接嵌入到 HTML 文件中。这种方式虽然方便，但会导致 HTML 文件体积变大，影响加载性能。为了优化 HTML 文件，我们可以将 Base64 图片提取出来，保存为独立的图片文件，并更新 HTML 中的引用路径。

本文将介绍如何使用 Node.js 编写一个脚本来实现这一功能。

1. 准备工作

在开始之前，请确保你已经安装了 Node.js。如果尚未安装，可以从 Node.js 官网 下载并安装。

示例 HTML 文件

假设我们有一个 HTML 文件 example.html，内容如下：

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Base64 Images</h1>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..." />
</body>
</html>

运行 HTML

我们的目标是将这些 Base64 图片提取出来，保存为独立的图片文件（如 image_1.png 和 image_2.jpeg），并更新 HTML 文件中的 src 属性。

2. 编写 Node.js 脚本

以下是完整的 Node.js 脚本代码：

javascript

复制

const fs = require('fs');
const path = require('path');

// 指定HTML文件路径
const htmlFilePath = path.join(__dirname, 'example.html');

// 读取HTML文件内容
const htmlContent = fs.readFileSync(htmlFilePath, 'utf-8');

// 正则表达式匹配<img>标签的src属性（Base64格式）
const imgRegex = /<img[^>]+src="(data:image/(\w+);base64,([^">]+))"/g;

// 用于存储替换后的HTML内容
let updatedHtmlContent = htmlContent;

// 匹配所有<img>标签
let match;
let index = 0;
while ((match = imgRegex.exec(htmlContent)) !== null) {
    const fullMatch = match[1]; // 完整的src属性值
    const imageType = match[2];  // 图片类型（如png、jpeg）
    const base64Data = match[3]; // Base64数据

    // 生成图片文件名
    const imageFileName = `image_${index + 1}.${imageType}`;
    const imageFilePath = path.join(path.dirname(htmlFilePath), imageFileName);

    // 将Base64数据解码并保存为图片文件
    const imageBuffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(imageFilePath, imageBuffer);

    // 替换HTML中的src属性为新的图片文件路径
    updatedHtmlContent = updatedHtmlContent.replace(fullMatch, imageFileName);

    index++;
}

// 将更新后的HTML内容写回文件
fs.writeFileSync(htmlFilePath, updatedHtmlContent, 'utf-8');

console.log('图片提取和HTML更新完成！');

3. 脚本说明

3.1 读取 HTML 文件

使用 fs.readFileSync 方法读取 HTML 文件内容：

javascript

复制

const htmlContent = fs.readFileSync(htmlFilePath, 'utf-8');

3.2 正则表达式匹配

使用正则表达式匹配 <img> 标签中的 src 属性：

javascript

复制

const imgRegex = /<img[^>]+src="(data:image/(\w+);base64,([^">]+))"/g;
  • data:image/(\w+);base64,：匹配图片类型（如 png、jpeg）。
  • ([^">]+)：匹配 Base64 数据部分。

3.3 提取 Base64 数据

从匹配结果中提取图片类型和 Base64 数据：

javascript

复制

const imageType = match[2];  // 图片类型
const base64Data = match[3]; // Base64数据

3.4 保存图片文件

将 Base64 数据解码为二进制数据，并保存为图片文件：

javascript

复制

const imageBuffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync(imageFilePath, imageBuffer);

3.5 更新 HTML 内容

使用 replace 方法将 HTML 中的 Base64 src 替换为新的图片文件路径：

javascript

复制

updatedHtmlContent = updatedHtmlContent.replace(fullMatch, imageFileName);

3.6 保存更新后的 HTML

将修改后的 HTML 内容写回原文件：

javascript

复制

fs.writeFileSync(htmlFilePath, updatedHtmlContent, 'utf-8');

4. 运行脚本

将脚本保存为 extract-images.js，然后在终端中运行：

bash

复制

node extract-images.js

运行后，脚本会完成以下操作：

  1. 提取 Base64 图片并保存为独立的图片文件（如 image_1.png 和 image_2.jpeg）。
  2. 更新 HTML 文件中的 src 属性，指向新的图片文件路径。

5. 结果示例

原始 HTML 文件

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Base64 Images</h1>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..." />
</body>
</html>

运行 HTML

更新后的 HTML 文件

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Base64 Images</h1>
    <img src="image_1.png" />
    <img src="image_2.jpeg" />
</body>
</html>

运行 HTML

生成的图片文件

  • image_1.png
  • image_2.jpeg

6. 总结

通过这个脚本，我们可以轻松地将 HTML 文件中的 Base64 图片提取为独立的图片文件，并更新 HTML 文件中的引用路径。这种方法不仅优化了 HTML 文件的体积，还提高了页面的加载性能。

如果你有更复杂的需求（如处理其他格式的图片或优化性能），可以在此基础上进一步扩展脚本。希望本文对你有所帮助！

附：完整代码

javascript

复制

const fs = require('fs');
const path = require('path');

// 指定HTML文件路径
const htmlFilePath = path.join(__dirname, 'example.html');

// 读取HTML文件内容
const htmlContent = fs.readFileSync(htmlFilePath, 'utf-8');

// 正则表达式匹配<img>标签的src属性（Base64格式）
const imgRegex = /<img[^>]+src="(data:image/(\w+);base64,([^">]+))"/g;

// 用于存储替换后的HTML内容
let updatedHtmlContent = htmlContent;

// 匹配所有<img>标签
let match;
let index = 0;
while ((match = imgRegex.exec(htmlContent)) !== null) {
    const fullMatch = match[1]; // 完整的src属性值
    const imageType = match[2];  // 图片类型（如png、jpeg）
    const base64Data = match[3]; // Base64数据

    // 生成图片文件名
    const imageFileName = `image_${index + 1}.${imageType}`;
    const imageFilePath = path.join(path.dirname(htmlFilePath), imageFileName);

    // 将Base64数据解码并保存为图片文件
    const imageBuffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync(imageFilePath, imageBuffer);

    // 替换HTML中的src属性为新的图片文件路径
    updatedHtmlContent = updatedHtmlContent.replace(fullMatch, imageFileName);

    index++;
}

// 将更新后的HTML内容写回文件
fs.writeFileSync(htmlFilePath, updatedHtmlContent, 'utf-8');

console.log('图片提取和HTML更新完成！');

希望这篇文章能帮助你实现 Base64 图片的提取和 HTML 文件的优化！如果有任何问题，欢迎留言讨论。

avatar
文章
阅读
粉丝