如何在Node.js中用sharpjs或图像处理库通过Color Matrix实现图像滤镜？

一、使用Sharp.js实现（优先推荐） #

Sharp是高性能Node.js图像处理库，从v0.30.0版本开始原生支持4×5颜色矩阵变换，完全匹配前端feColorMatrix的逻辑。

操作步骤： #

1. 安装Sharp

npm install sharp

2. 代码示例

const sharp = require('sharp');

// 你的4×5颜色矩阵，按行展开为一维数组（红通道行、绿通道行、蓝通道行、alpha通道行）
const colorMatrix = [
  1, 0, 0, 0, 0,   // R = R*1 + G*0 + B*0 + A*0 + 0
  0, 1, 0, 0, 0,   // G = R*0 + G*1 + B*0 + A*0 + 0
  0, 0, 1, 0, 0,   // B = R*0 + G*0 + B*1 + A*0 + 0
  0, 0, 0, 1, 0    // A = R*0 + G*0 + B*0 + A*1 + 0
];

// 读取原始图像 → 应用颜色矩阵 → 输出处理后的图像
sharp('input.jpg')
  .color({ matrix: colorMatrix })
  .toFile('output.jpg')
  .then(() => console.log('图像处理完成'))
  .catch(err => console.error('处理失败:', err));

注意：矩阵的一维数组必须按行优先排列，依次放入红、绿、蓝、alpha四个通道的5个参数，和feColorMatrix的matrix属性格式完全一致。

二、使用Node-Canvas实现（和前端逻辑对齐） #

如果想复用前端Canvas API的经验，可通过Node-Canvas在后端实现完全相同的feColorMatrix变换。

操作步骤： #

1. 安装Node-Canvas

npm install canvas

2. 代码示例

const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

async function applyColorMatrix(inputPath, outputPath, colorMatrix) {
  const img = await loadImage(inputPath);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');

  // 构造和前端一致的SVG滤镜字符串
  const filterStr = `
    <svg xmlns="http://www.w3.org/2000/svg">
      <filter id="colorMatrixFilter">
        <feColorMatrix type="matrix" matrix="${colorMatrix.join(' ')}" />
      </filter>
    </svg>
  `;

  // 将滤镜转为Data URL加载到Canvas
  const filterUrl = `data:image/svg+xml;base64,${Buffer.from(filterStr).toString('base64')}`;
  ctx.filter = `url(${filterUrl}#colorMatrixFilter)`;

  // 绘制图像并应用滤镜
  ctx.drawImage(img, 0, 0);

  // 输出处理后的图像
  const outStream = fs.createWriteStream(outputPath);
  const canvasStream = canvas.createJPEGStream({ quality: 0.95 });
  canvasStream.pipe(outStream);
  await new Promise(resolve => outStream.on('finish', resolve));
}

// 调用示例
const sepiaMatrix = [
  0.393, 0.769, 0.189, 0, 0,
  0.349, 0.686, 0.168, 0, 0,
  0.272, 0.534, 0.131, 0, 0,
  0, 0, 0, 1, 0
];
applyColorMatrix('input.jpg', 'output_canvas.jpg', sepiaMatrix)
  .then(() => console.log('处理完成'))
  .catch(err => console.error(err));

三、关键注意事项 #

• Sharp的color.matrix性能远高于Node-Canvas，适合批量处理或大尺寸图像；
• 若使用低于v0.30.0的Sharp版本，可通过composite方法叠加SVG滤镜实现，逻辑和Node-Canvas一致；
• 颜色矩阵数值需符合规范：前4列参数通常在0-1区间，最后一列偏移量范围一般为-255到255，Sharp会自动完成数值归一化。

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