返回

轻松制作图片压缩工具:node高保真有妙招!

前端

手把手教你用node撸一个图片压缩工具:

  1. 工具介绍

    我们在这次项目中,要用到的工具是tinypng。tinypng是一款知名图片压缩工具,可以实现高质量的图片压缩。我们可以在其官网https://tinypng.com/压缩图片,手动点击上传,然而每次只能压缩20张图片。

  2. Node.js安装

    如果你没有安装node.js,那么首先需要安装它。可以到node.js官网下载。安装完成后,在终端中输入以下命令检查是否安装成功:

    node -v
    

    如果出现版本号,说明node.js安装成功。

  3. 项目初始化

    创建一个新的文件夹,比如叫image-compressor,然后在其中创建一个新的node.js项目。可以使用以下命令:

    npm init -y
    

    这将创建一个package.json文件和一个node_modules文件夹。

  4. 安装tinypng模块

    我们需要在项目中安装tinypng模块。可以在终端中输入以下命令:

    npm install tinypng --save
    

    这将把tinypng模块安装到你的项目中。

  5. 创建压缩脚本

    接下来,我们需要创建一个压缩脚本。在项目文件夹中创建一个新的文件,比如叫compress.js,然后在其中输入以下代码:

    const tinypng = require("tinypng");
    const fs = require("fs");
    
    // API密钥,需要注册tinypng获取
    const apiKey = "YOUR_API_KEY";
    
    // 读取要压缩的图片
    const imageBuffer = fs.readFileSync("image.png");
    
    // 压缩图片
    tinypng.optimize(imageBuffer, {apiKey: apiKey}).then((optimizedImageBuffer) => {
      // 保存压缩后的图片
      fs.writeFileSync("compressed-image.png", optimizedImageBuffer);
    });
    

    其中,YOUR_API_KEY需要替换成你的tinypng API密钥。

  6. 运行压缩脚本

    现在,你可以运行压缩脚本了。在终端中输入以下命令:

    node compress.js
    

    这将压缩image.png图片,并生成一个名为compressed-image.png的压缩后的图片。

  7. 创建压缩工具

    最后,我们可以创建一个压缩工具,以便可以轻松地压缩图片。在项目文件夹中创建一个新的文件,比如叫image-compressor.js,然后在其中输入以下代码:

    const tinypng = require("tinypng");
    const fs = require("fs");
    const readline = require("readline");
    
    // API密钥,需要注册tinypng获取
    const apiKey = "YOUR_API_KEY";
    
    // 创建readline接口
    const rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout
    });
    
    // 提示用户输入要压缩的图片路径
    rl.question("请输入要压缩的图片路径:", (imagePath) => {
      // 读取要压缩的图片
      const imageBuffer = fs.readFileSync(imagePath);
    
      // 压缩图片
      tinypng.optimize(imageBuffer, {apiKey: apiKey}).then((optimizedImageBuffer) => {
        // 保存压缩后的图片
        fs.writeFileSync("compressed-" + imagePath, optimizedImageBuffer);
    
        // 提示用户压缩完成
        console.log("压缩完成!压缩后的图片已保存到:" + "compressed-" + imagePath);
    
        // 退出readline接口
        rl.close();
      });
    });
    

    其中,YOUR_API_KEY需要替换成你的tinypng API密钥。

  8. 运行压缩工具

    现在,你可以运行压缩工具了。在终端中输入以下命令:

    node image-compressor.js
    

    这将提示你输入要压缩的图片路径。输入路径后,压缩工具将压缩图片,并生成一个名为compressed-image.png的压缩后的图片。

  9. 部署压缩工具

    如果你想将压缩工具部署到线上,可以使用一些云服务,比如Heroku或AWS。