合成图片

composite

composite(images) ⇒ Sharp

处理（调整大小、提取等）图片上的合成图片。

🌐 Composite image(s) over the processed (resized, extracted etc.) image.

用于合成的图片必须与处理后的图片大小相同或更小。如果同时提供了 top 和 left 选项，它们会优先于 gravity。

🌐 The images to composite must be the same size or smaller than the processed image. If both top and left options are provided, they take precedence over gravity.

同一处理流程中的其他操作（例如调整大小、旋转、翻转、镜像、裁剪）总会在合成之前应用到输入图片上。

🌐 Other operations in the same processing pipeline (e.g. resize, rotate, flip, flop, extract) will always be applied to the input image before composition.

blend 选项可以是 clear、source、over、in、out、atop、dest、dest-over、dest-in、dest-out、dest-atop、xor、add、saturate、multiply、screen、overlay、darken、lighten、colour-dodge、color-dodge、colour-burn、color-burn、hard-light、soft-light、difference、exclusion。

🌐 The blend option can be one of clear, source, over, in, out, atop, dest, dest-over, dest-in, dest-out, dest-atop, xor, add, saturate, multiply, screen, overlay, darken, lighten, colour-dodge, color-dodge, colour-burn,color-burn, hard-light, soft-light, difference, exclusion.

关于混合模式的更多信息可以在以下网站找到：https://www.libvips.org/API/current/enum.BlendMode.html 和 https://www.cairographics.org/operators/

🌐 More information about blend modes can be found at https://www.libvips.org/API/current/enum.BlendMode.html and https://www.cairographics.org/operators/

投掷:

• 错误 参数无效

自：0.22.0

参数	类型	默认值	描述
images	Array.<Object>		用于合成的图片有序列表
[images[].input]	缓冲区 |字符串		包含图片数据的缓冲区，包含图片文件路径的字符串，或创建对象（见下文）
[images[].input.create]	对象		描述要创建的空白覆盖层。
[images[].input.create.width]	数字
[images[].input.create.height]	数字
[images[].input.create.channels]	数字		3-4
[images[].input.create.background]	字符串 |对象		由[color]（https://www.npmjs.org/package/color）模块解析以提取红、绿、蓝和alpha的值。|
[images[].input.text]	对象		描述要创建的新文本图片。
[images[].input.text.text]	string		要渲染为 UTF-8 字符串的文本。它可以包含 Pango 标记，例如 <i>Le</i>Monde。
[images[].input.text.font]	字符串		用于渲染的字体名称。
[images[].input.text.fontfile]	字符串		font 可以使用的字体文件的绝对文件路径。
[images[].input.text.width]	数字	0	文本在此像素数处换行。宽于此的文本将在单词边界处换行。
[images[].input.text.height]	数字	0	文本的像素高度为整数。当定义后，dpi 将被忽略，文本会自动适应由 width 和 height 定义的像素分辨率。如果未指定 width 或设置为 0，将被忽略。
[images[].input.text.align]	string	"'left'"	文本对齐（'left'、'centre'、'center'、'right'）。
[images[].input.text.justify]	boolean	false	设置为 true 以对文本应用对齐。
[images[].input.text.dpi]	数字	72	渲染文本的分辨率（大小）。如果指定了 height，则不生效。
[images[].input.text.rgba]	boolean	false	将此设置为 true 以启用 RGBA 输出。这对彩色表情符号渲染或支持 Pango 标记功能（如 <span foreground="red">Red!</span>）很有用。
[images[].input.text.spacing]	数字	0	文本行高（以磅为单位）。如果未指定，将使用字体的行高。
[images[].autoOrient]	Boolean	false	设置为 true 时，如果存在 EXIF 方向数据，将使用它来调整图片方向。
[images[].blend]	字符串	'over'	如何将这张图片与下面的图片混合。
[images[].gravity]	字符串	‘中心’	放置叠加层时的重力位置。
[images[].top]	Number		距顶部边缘的像素偏移量，整数，范围在 -100000000 到 100000000 之间。
[images[].left]	Number		距离左边缘的像素偏移量，一个介于 -100000000 到 100000000 之间的整数。
[images[].tile]	布尔值	false	设置为 true 可以使用给定的 gravity 在整个图片上重复覆盖图片。
[images[].premultiplied]	布尔值	false	设置为 true 以避免对下面的图片进行预乘。等同于 --premultiplied vips 选项。
[images[].density]	数字	72	表示矢量叠加图片 DPI 的数字。
[images[].raw]	对象		描述使用原始像素数据时的覆盖。
[images[].raw.width]	数字
[images[].raw.height]	数字
[images[].raw.channels]	数字
[images[].animated]	boolean	false	设置为 true 以读取动画图片的所有帧/页面。
[images[].failOn]	字符串	"'warning'"	参见 构造函数参数
[images[].limitInputPixels]	数 |布尔	268402689	@see [构造参数]（/api-constructor/）
[images[].limitInputChannels]	数 |布尔值	5	@see [构造参数]（/api-constructor/）

示例

await sharp(background)
  .composite([
    { input: layer1, gravity: 'northwest' },
    { input: layer2, gravity: 'southeast' },
  ])
  .toFile('combined.png');

Example

const output = await sharp('input.gif', { animated: true })
  .composite([
    { input: 'overlay.png', tile: true, blend: 'saturate' }
  ])
  .toBuffer();

Example

sharp('input.png')
  .rotate(180)
  .resize(300)
  .flatten( { background: '#ff6600' } )
  .composite([{ input: 'overlay.png', gravity: 'southeast' }])
  .sharpen()
  .withMetadata()
  .webp( { quality: 90 } )
  .toBuffer()
  .then(function(outputBuffer) {
    // outputBuffer contains upside down, 300px wide, alpha channel flattened
    // onto orange background, composited with overlay.png with SE gravity,
    // sharpened, with metadata, 90% quality WebP image data. Phew!
  });