如何在Node.js中使用黑白图片对另一张图片进行遮罩处理？

在Node.js里实现黑白图片遮罩另一张图片的需求，我最推荐用Sharp这个库——它是当前性能最好的Node.js图片处理工具之一，API设计也很直观，完全能搞定这类场景。下面给你一步步拆解实现方法：

首先把库装到项目里，打开终端跑这个命令：

npm install sharp

黑白遮罩的核心是利用图片混合模式：让遮罩的白色区域保留原图内容，黑色区域隐藏（或者反过来，看你的需求）。Sharp的composite方法可以轻松实现这个，关键选对混合模式：

• dest-in：只保留原图和遮罩重叠的区域（遮罩白色=显示原图，黑色=透明）
• dest-out：和上面相反，保留原图不在遮罩里的区域

下面是一个可直接运行的例子，我加了详细注释：

const sharp = require('sharp');

async function applyImageMask() {
  try {
    // 先获取原图的宽高，确保遮罩和原图尺寸完全匹配
    const originalMetadata = await sharp('your-original-image.jpg').metadata();
    const { width, height } = originalMetadata;

    // 处理原图 + 应用遮罩
    await sharp('your-original-image.jpg')
      .composite([
        {
          input: await sharp('your-black-white-mask.png')
            // 把遮罩图缩放到和原图一样的尺寸，fit: 'cover'保证填满区域（比例不对会裁剪）
            .resize(width, height, { fit: 'cover' }) 
            // 如果你的需求是"黑显白隐"，取消下面这行注释反转遮罩
            // .negate()
            .png(), // 转成PNG确保透明度通道正常工作
          blend: 'dest-in' // 选择混合模式，这里是白显黑隐的逻辑
        }
      ])
      .toFile('final-result.png'); // 输出带透明通道的结果图

    console.log('遮罩处理成功！结果已保存为final-result.png');
  } catch (error) {
    console.error('处理过程出错了:', error);
  }
}

// 执行遮罩处理函数
applyImageMask();

• 尺寸匹配：一定要保证遮罩和原图尺寸一致，不然遮罩会错位或者拉伸。用resize配合fit: 'cover'可以确保遮罩填满整个原图区域（如果遮罩比例不对，会自动裁剪多余部分）。
• 遮罩反转：如果你的遮罩是黑色区域要显示原图、白色要隐藏，就给遮罩加上.negate()方法，一键反转黑白。
• 输出格式：建议输出为PNG，因为它支持透明通道；如果输出JPG的话，透明区域会被填充成白色/黑色，达不到预期的遮罩效果。

如果你的遮罩是普通的JPG灰度图（不是PNG）也没关系——Sharp会自动把灰度值映射为透明度：白色（255）=完全不透明（显示原图），黑色（0）=完全透明（隐藏原图），中间的灰度值会对应半透明效果。

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