图片URL参数（如format=auto&width=720）原理及Node.js+EJS实现咨询

这类参数的实现主要有三种常见方案，各有适用场景：

1. 预先存储多尺寸/格式的图片 #

提前用批量处理脚本把原图生成不同宽度、格式的版本，存在服务器对应目录（比如/images/720px/xxx.webp）。当用户请求带width=720&format=webp的URL时，后端直接返回预先生成好的文件。

• 优点：响应速度快，无需实时计算，适合访问量高的静态图片。
• 缺点：占用更多存储空间，新增尺寸/格式需要重新批量处理。

2. 前端触发适配，后端处理返回 #

前端不直接处理图片，而是根据当前设备屏幕宽度、浏览器支持的格式，动态拼接带参数的URL发送请求，由后端完成实际的图片处理。比如用srcset属性指定不同尺寸URL让浏览器自动选择，或用JS获取视口宽度后设置img的src。

3. 后端实时处理并返回 #

用户请求带参数后，后端读取原图，用图像处理库动态调整尺寸、转换格式，再返回处理后的图片。通常会配合缓存机制：把处理后的图片存临时目录或内存缓存，下次相同参数请求直接返回缓存文件。

• 优点：节省存储空间，支持任意尺寸/格式请求，适合动态内容或图片数量多的场景。
• 缺点：首次请求有处理延迟，需要服务器有一定CPU资源。

下面是基于Express+EJS+Sharp（Node.js常用图像处理库）的具体实现步骤：

1. 安装依赖 #

npm install express ejs sharp

2. 后端路由实现 #

创建app.js，编写处理图片请求的路由并配置EJS模板引擎：

const express = require('express');
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const app = express();

// 设置EJS为模板引擎
app.set('view engine', 'ejs');
// 静态文件目录（存放原图）
app.use(express.static('public'));

// 处理图片参数请求的路由
app.get('/img', async (req, res) => {
  const { width, format = 'jpeg', src } = req.query;
  
  // 校验必填参数
  if (!src) return res.status(400).send('缺少图片源路径');
  const imgPath = path.join(__dirname, 'public', src);
  if (!fs.existsSync(imgPath)) return res.status(404).send('原图不存在');

  try {
    let processor = sharp(imgPath);
    
    // 调整尺寸：按指定宽度等比例缩放
    if (width) {
      processor = processor.resize(parseInt(width), null, { fit: 'inside' });
    }
    
    // 处理format=auto：根据请求头判断浏览器支持的格式
    let outputFormat = format;
    if (format === 'auto') {
      const acceptHeader = req.headers.accept || '';
      outputFormat = acceptHeader.includes('image/webp') ? 'webp' : 'jpeg';
    }
    processor = processor.toFormat(outputFormat);

    // 设置响应头并返回图片
    res.set('Content-Type', `image/${outputFormat}`);
    processor.pipe(res);
  } catch (err) {
    console.error(err);
    res.status(500).send('图片处理失败');
  }
});

// 渲染首页（EJS模板）
app.get('/', (req, res) => {
  // 把原图路径传给模板
  res.render('index', { originalImg: 'demo.jpg' });
});

app.listen(3000, () => {
  console.log('服务启动：http://localhost:3000');
});

3. EJS模板使用（views/index.ejs） #

在模板里可以静态指定参数，也可以用JS动态适配屏幕：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应图片示例</title>
</head>
<body>
  <!-- 静态生成指定尺寸的图片 -->
  <h3>静态720px宽度图片</h3>
  <img src="/img?src=<%= originalImg %>&width=720&format=webp" alt="静态示例">

  <!-- 动态适配屏幕宽度 -->
  <h3>动态适配屏幕的图片</h3>
  <img id="dynamic-img" data-src="<%= originalImg %>" alt="动态示例">

  <script>
    const img = document.getElementById('dynamic-img');
    // 获取屏幕宽度，取90%作为图片宽度（避免超出屏幕）
    const targetWidth = Math.floor(window.innerWidth * 0.9);
    // 拼接URL，使用format=auto让后端判断格式
    img.src = `/img?src=${img.dataset.src}&width=${targetWidth}&format=auto`;
  </script>
</body>
</html>

4. 优化建议 #

• 添加缓存：可用express-cache-controller中间件设置缓存头，或把处理后的图片存public/cache目录，下次请求先检查缓存文件是否存在，存在则直接返回。
• 限制参数范围：比如限制width最大值，避免超大尺寸请求占用过多资源；限制允许的格式（仅webp/jpeg/png），防止恶意请求。
• 批量预生成：对于访问量高的图片，可在启动服务时批量生成常用尺寸的缓存文件，提升首次请求速度。

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