前端批量处理图片

前言

在前端日常开发中，我们经常会遇到图片处理的情况，比如为了加快浏览器的渲染，我们一般会进行图片压缩。而我们最常使用的应该就是手动上传到图片压缩网站上进行压缩，例如 tinyong网站。可是处理几张照片可以这样手动上传处理，要是几十上百张的话，处理起来就很麻烦了。所以，我利用node机制实现了批量处理图片的压缩，从而提高我们整体的研发效率。

第一步：模块引入

首先，我们需要安装几个node模块以便于我们的开发。这里我主要用到的模块有：

1.fs

fs模块是Node.js内置的文件读写系统模块，主要负责实现对对应路径上文件的读写任务。同时，fs模块具有异步和同步的方法可供使用。在本功能中，我们需要使用该模块进行文件图片操作。

2.path

path模块是Node.js内置的路径读写系统模块，主要用于处理文件/目录路径的一个模块。在本功能中，我们需要用到它来实现对应图片路径的读取操作。

3.sharp

sharp模块是一个利用Node.js实现图片编辑操作的高性能图片处理模块，例如裁剪、压缩等。本功能基于此模块去处理图片的压缩功能。（由于这个是第三方模块，所以在使用的时候需要先安装）

第二步：功能实现

1.定义三个常量

const inputDir = './src/assets' // 输入目录，包含要压缩的图片文件
const outputDir = './dist/images' // 输出目录，用于存储压缩后的图片
const compressionQuality = 70 // 压缩质量设置，介于 0 到 100 之间

2. 定义递归实现函数

//该函数接收两次参数，源文件夹目录以及输出文件夹目录
function traverseDirectory(dir, outputDirPath=outputDir) {
    ......
}

3. 具体实现

第一步：读取目录下的所有文件

fs.readdir(dir, (err, files) => {
    //如果读取失败则返回并打印失败信息
    if (err) {
      console.error('Error reading directory:', err)
      return
    }
    ......
}

第二步：遍历文件列表

files.forEach((file) => {
    const filePath = path.join(dir, file) // 获取文件的完整路径
      fs.stat(filePath, (err, stats) => {
      // 检查文件的状态,如果读取失败则返回并打印失败信息
        if (err) {
          console.error('Error retrieving file stats:', err)
          return
        }
        ......
       }
}

第三步：判断是否是子文件夹还是图片文件，如果是子文件夹则创建对应的子文件夹，对应源文件夹结构，否则进行文件处理

if (stats.isDirectory()) {
  // 创建对应子文件夹，对应源文件夹结构
  const newOutputDirPath = path.join(outputDirPath, file)
  fs.mkdirSync(newOutputDirPath, { recursive: true })
  // 如果是子目录，则递归遍历该目录
  traverseDirectory(filePath, newOutputDirPath)
} else if (['.jpg', '.jpeg', '.png'].includes(path.extname(file).toLowerCase())) {
  // 判断输出文件夹是否存在，不存在的话自动创建对应输出文件夹
  if (!fs.existsSync(outputDirPath)) {
    fs.mkdirSync(outputDirPath, { recursive: true })
  }
  // 如果是图片文件，则压缩并保存
  const outputPath = path.join(outputDirPath, file) // 输出文件的完整路径

  sharp(filePath)
    .jpeg({ quality: compressionQuality }) // 根据文件类型设置压缩质量
    .png({ quality: compressionQuality })
    .toFile(outputPath, (err, info) => {
      if (err) {
        console.error('Error compressing image:', err)
        return
      }
      console.log('Image compressed:', info)
    })
}

结语

这篇好文章是转载于：学新通技术网