使用 Sharp 覆盖不透明度设置答案

【问题标题】：Overlay with opacity setting using Sharp使用 Sharp 覆盖不透明度设置
【发布时间】：2022-06-11 19:21:14
【问题描述】：

我想拍摄一张图像并将其合成到另一张图像之上。

这很适合这个目的：

overlayImg = await Sharp(sourceImage.Body)
            .composite([{ 
                input: './lambdas/processNewImage/logos/white.png', 
                gravity: 'southeast',
                
            }])
            .toFormat('jpeg').toBuffer();

我还有一个变量 - 1-100，它应该是水印的不透明度。有时我希望它完全实心 100% 不透明度，其他 70% 和其他 30% ......等等。因为我需要它是可变的，所以我不能只更改水印图像的不透明度。

我不知道如何在 Sharp 中更改合成图像的不透明度。

谁能举个简单的例子？

【问题讨论】：

标签： javascript sharp

【解决方案1】：

在另一个线程中发现了这个问题，在该线程中，您使用包含平铺、半透明像素值的原始像素缓冲区进行叠加。 128 表示 50% 的不透明度，其中有效值为 0-255。 https://github.com/lovell/sharp/issues/554

overlayImg = await Sharp(sourceImage.Body)
  .composite([
    { 
      input: './lambdas/processNewImage/logos/white.png', 
      gravity: 'southeast',  
    },
    {
      input: Buffer.from([0,0,0,128]),
      raw: {
        width: 1,
        height: 1,
        channels: 4,
      },
      tile: true,
      blend: 'dest-in',
    }
  ])
  .toFormat('jpeg').toBuffer();

【讨论】：