如何在显示multer-gridfs-storage存储的图片时调整尺寸？

当然可以在这个路由里实现图片尺寸调整！最方便高效的方案是用sharp这个Node.js图片处理库——它性能优异、API简洁，完美适配这种流式处理场景。下面是具体实现步骤：

1. 安装依赖 #

首先安装sharp模块：

npm install sharp

2. 修改路由代码 #

先引入sharp，然后在读取文件流的环节加入尺寸处理逻辑。同时我会修正你原代码里的一个小bug（img/png的类型判断错误）：

const sharp = require('sharp');
// ... 保留你原有的其他依赖引入

router.get("/image/:filename", (req, res) => {
  gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
    if (err) {
      return res.status(500).json({ err: '查询文件失败' });
    }
    if (!file || file.length === 0) {
      return res.status(404).json({ err: "No file exist" });
    }

    // 修正图片类型判断的错误，确保覆盖正确的MIME类型
    const validImageTypes = ['image/jpeg', 'image/png'];
    if (!validImageTypes.includes(file.contentType)) {
      return res.status(404).json({ err: "Not an image" });
    }

    // 创建GridFS读取流
    const readstream = gfs.createReadStream(file.filename);

    // 用sharp调整尺寸：这里示例设置宽度为300px，高度自适应
    // 你可以根据需求修改参数，比如固定宽高、裁剪、调整质量等
    const imageProcessor = sharp().resize(300);

    // 流式处理：读取流 → sharp处理 → 输出到响应
    readstream.pipe(imageProcessor)
      .on('error', (processErr) => {
        console.error('图片处理错误:', processErr);
        res.status(500).json({ err: '图片处理失败' });
      })
      .pipe(res);
  });
});

3. 扩展：支持前端自定义尺寸 #

如果想让前端请求时指定图片尺寸，可以通过URL查询参数实现：

router.get("/image/:filename", (req, res) => {
  // 从query参数获取尺寸，默认宽度300px
  const width = parseInt(req.query.width) || 300;
  // 高度可选，不传入则按比例自适应
  const height = req.query.height ? parseInt(req.query.height) : undefined;

  // ... 保留前面的文件查询、类型判断逻辑

  // 根据参数调整尺寸
  const imageProcessor = sharp().resize(width, height);

  // ... 后续流式处理逻辑不变
});

前端就可以通过/image/avatar.jpg?width=500&height=400这样的URL请求指定尺寸的图片了。

4. 更多sharp配置示例 #

• 固定宽高并裁剪超出部分：

  sharp().resize(300, 300, { fit: 'cover', position: 'center' })
  

• 调整JPEG图片质量（节省带宽）：

  sharp().resize(300).jpeg({ quality: 80 })
  

内容的提问来源于stack exchange，提问作者user11720628