合成图像

composite

composite(images) ⇒ Sharp

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

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

在同一处理管道中的其他操作（例如调整大小、旋转、翻转、颠倒、提取）将始终在合成之前应用于输入图像。

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。

有关混合模式的更多信息，请访问 https://www.libvips.org/API/current/enum.BlendMode.html 和 https://www.cairographics.org/operators/

抛出：

• Error 无效参数

自: 0.22.0

参数	类型	默认	描述
images	Array.<Object>		合成的图像有序列表
[images[].input]	Buffer | String		包含图像数据的缓冲区，包含图像文件路径的字符串，或者创建对象（见下文）
[images[].input.create]	Object		描述要创建的空叠加层。
[images[].input.create.width]	Number
[images[].input.create.height]	Number
[images[].input.create.channels]	Number		3-4
[images[].input.create.background]	String | Object		由 color 模块解析，以提取红、绿、蓝和 alpha 的值。
[images[].input.text]	Object		描述要创建的新文本图像。
[images[].input.text.text]	string		要渲染为 UTF-8 字符串的文本。它可以包含 Pango 标记，例如 <i>Le</i>Monde。
[images[].input.text.font]	string		要使用的字体名称。
[images[].input.text.fontfile]	string		可供 font 使用的字体文件的绝对文件系统路径。
[images[].input.text.width]	number	0	用于自动换行的像素整数宽度。宽于此值的文本行将按单词边界断行。
[images[].input.text.height]	number	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]	number	72	渲染文本时使用的分辨率（大小）。如果指定了 height，则不生效。
[images[].input.text.rgba]	boolean	false	将其设为 true 以启用 RGBA 输出。这对于彩色 emoji 渲染，或支持类似 <span foreground="red">Red!</span> 的 Pango 标记功能很有用。
[images[].input.text.spacing]	number	0	文本行高，单位为 points。如果未指定，则使用字体行高。
[images[].autoOrient]	Boolean	false	设为 true 以使用 EXIF 方向数据（如果存在）来调整图像方向。
[images[].blend]	String	'over'	如何将此图像与下方图像混合。
[images[].gravity]	String	'centre'	放置叠加层时使用的重力。
[images[].top]	Number		距离顶部边缘的像素偏移量，介于 -100000000 和 100000000 之间的整数。
[images[].left]	Number		距离左侧边缘的像素偏移量，介于 -100000000 和 100000000 之间的整数。
[images[].tile]	Boolean	false	设为 true 以使用给定的 gravity 在整张图像上重复叠加层图像。
[images[].premultiplied]	Boolean	false	设为 true 以避免对下方图像进行预乘。等同于 --premultiplied vips 选项。
[images[].density]	Number	72	表示矢量叠加图像 DPI 的数值。
[images[].raw]	Object		使用原始像素数据时的叠加层描述。
[images[].raw.width]	Number
[images[].raw.height]	Number
[images[].raw.channels]	Number
[images[].animated]	boolean	false	设置为 true 以读取动画图像的所有帧/页。
[images[].failOn]	string	"'warning'"	@see constructor parameters
[images[].limitInputPixels]	number | boolean	268402689	@see constructor parameters
[images[].limitInputChannels]	number | boolean	5	@see constructor parameters

示例

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

示例

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

示例

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 包含上下颠倒、宽 300px、alpha 通道被扁平化到橙色背景，
    // 与 overlay.png 叠加，重力为东南，锐化，带有元数据，90% 质量的 WebP 图像数据。太棒了！
  });