Nodejs 小玩具image-index,为包含很多图片的文件夹生成000.html文件

Nodejs 小玩具image-index,为包含很多图片的文件夹生成000.html文件

我发觉用chrome看图比用本地的看图软件更爽…于是就是这个了…

github : https://github.com/magicdawn/image-index npm :　https://www.npmjs.org/package/image-index

安装 :　全局安装，命令行imgdx 使用,切换到你的包含图片的目录,允许imgdx,生成000.html , 并用浏览器打开…

如https://github.com/magicdawn/image-index/tree/master/example


2 回复

Nodejs 小玩具 image-index，为包含很多图片的文件夹生成 000.html 文件

我发觉用 Chrome 看图比用本地的看图软件更爽…于是就有了这个小工具。它能为包含大量图片的文件夹生成一个 HTML 文件，方便你通过浏览器查看这些图片。

GitHub 和 npm 链接

安装

你可以全局安装这个工具，只需运行以下命令：

npm install -g image-index

使用方法

  1. 切换到包含图片的目录。
  2. 运行 imgdx 命令，它会为你生成一个名为 000.html 的文件，并自动在浏览器中打开。

例如：

cd /path/to/your/images
imgdx

示例代码

如果你想手动实现这个功能，可以参考以下 Node.js 脚本。这个脚本会遍历指定目录中的所有图片文件，并将它们嵌入到一个 HTML 文件中。

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

// 指定图片所在的目录
const directoryPath = path.join(__dirname, 'images');

// 创建或清空000.html文件
fs.writeFileSync(path.join(directoryPath, '000.html'), '');

// 获取目录中的所有文件
fs.readdir(directoryPath, function (err, files) {
    if (err) {
        return console.log('Unable to scan directory: ' + err);
    } 

    // 遍历所有文件
    files.forEach(function (file) {
        const filePath = path.join(directoryPath, file);
        
        // 检查是否为图片文件
        if (filePath.toLowerCase().endsWith('.jpg') || 
            filePath.toLowerCase().endsWith('.jpeg') ||
            filePath.toLowerCase().endsWith('.png') ||
            filePath.toLowerCase().endsWith('.gif')) {

            // 将图片路径添加到HTML文件中
            fs.appendFileSync(
                path.join(directoryPath, '000.html'), 
                `<img src="${filePath}" style="max-width: 100%; height: auto; margin: 10px 0;">\n`
            );
        }
    });

    console.log('000.html has been generated.');
    
    // 自动打开生成的HTML文件
    require('child_process').exec(`start ${path.join(directoryPath, '000.html')}`);
});

解释

  1. 引入模块：我们引入了 fs 和 path 模块来处理文件系统操作。
  2. 指定目录：定义了包含图片的目录路径。
  3. 创建/清空文件：使用 fs.writeFileSync 清空或创建 000.html 文件。
  4. 读取目录：使用 fs.readdir 读取目录中的所有文件。
  5. 遍历文件：对每个文件进行检查，判断其是否为图片文件（支持 .jpg, .jpeg, .png, .gif）。
  6. 写入HTML：将图片路径追加到 000.html 文件中。
  7. 自动打开：使用 child_process.exec 打开生成的 HTML 文件。

这样，你就可以通过浏览器查看目录中的所有图片了。


根据你的描述，这个 Node.js 小工具 image-index 的功能是为一个包含许多图片的文件夹生成一个 000.html 文件，并且提供了一个命令行工具 imgdx 来实现这个功能。下面我会提供一个简单的示例来说明如何实现这一功能。

示例代码

首先，我们需要安装必要的依赖：

npm install --save image-index

然后，创建一个简单的脚本来生成 000.html 文件：

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

// 获取当前目录下的所有图片文件
function getImages(dir) {
    return fs.readdirSync(dir)
        .filter(file => ['.jpg', '.jpeg', '.png', '.gif'].includes(path.extname(file).toLowerCase()))
        .map(file => path.join(dir, file));
}

// 创建HTML文件
function createHtmlFile(images, outputDir) {
    const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Index</title>
    <style>
        img { max-width: 100%; }
    </style>
</head>
<body>
    ${images.map(img => `<img src="${img}" alt="Image">`).join('')}
</body>
</html>
`;

    fs.writeFileSync(path.join(outputDir, '000.html'), htmlContent);
}

// 主函数
function main() {
    const images = getImages(process.cwd()); // 获取当前目录下的所有图片
    createHtmlFile(images, process.cwd()); // 生成HTML文件
}

main();

解释

  1. 获取图片文件：通过 fs.readdirSync 方法读取指定目录下的所有文件，并过滤出扩展名为 .jpg, .jpeg, .png, .gif 的图片文件。
  2. 创建HTML文件：构建一个基本的HTML结构，其中包含所有图片的 <img> 标签。将生成的HTML内容写入到指定路径的 000.html 文件中。
  3. 主函数：从当前工作目录中获取图片文件并调用 createHtmlFile 函数生成 000.html 文件。

使用方法

你可以把这个脚本保存为 generateIndex.js，然后在包含图片的目录下运行它：

node generateIndex.js

这将会生成一个 000.html 文件，可以在浏览器中打开查看所有图片。

回到顶部