Skip to content
# sharp 中文网

合成图片

composite

Section titled “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/libvips-conversion.html#VipsBlendMode 和 https://www.cairographics.org/operators/ 中找到

¥More information about blend modes can be found at https://www.libvips.org/API/current/libvips-conversion.html#VipsBlendMode and https://www.cairographics.org/operators/

抛出：

¥Throws:

  • Error 无效参数

    ¥Error Invalid parameters

自从：0.22.0

¥Since: 0.22.0

参数类型默认描述
imagesArray.<Object>要合成的图片的有序列表
[images[].input]Buffer | String包含图片数据的缓冲区、包含图片文件路径的字符串或创建对象（见下文）
[images[].input.create]Object描述要创建的空白覆盖。
[images[].input.create.width]Number
[images[].input.create.height]Number
[images[].input.create.channels]Number3-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]stringfont 可以使用的字体文件的绝对文件系统路径。
[images[].input.text.width]number0自动换行的像素整数。比此宽的文本行将在字边界处断开。
[images[].input.text.height]number0整数像素高。定义后，dpi 将被忽略，文本将自动适应 width 和 height 定义的像素分辨率。如果未指定 width 或设置为 0，则将被忽略。
[images[].input.text.align]string“‘left‘“文本对齐（'left'、'centre'、'center'、'right'）。
[images[].input.text.justify]booleanfalse将其设置为 true 可以对文本应用对齐方式。
[images[].input.text.dpi]number72渲染文本的分辨率（大小）。如果指定了 height，则不生效。
[images[].input.text.rgba]booleanfalse将其设置为 true 以启用 RGBA 输出。这对于彩色表情符号渲染或支持 Pango 标记功能（如 <span foreground="red">Red!</span>）很有用。
[images[].input.text.spacing]number0文本行高（以磅为单位）。如果未指定，将使用字体行高。
[images[].autoOrient]Booleanfalse设置为 true 以使用 EXIF 方向数据（如果存在）来定位图片。
[images[].blend]String’over’如何将此图片与下面的图片混合。
[images[].gravity]String’centre’放置覆盖层的重力。
[images[].top]Number距顶部边缘的像素偏移。
[images[].left]Number距左边缘的像素偏移。
[images[].tile]Booleanfalse设置为 true 以使用给定的 gravity 在整个图片上重复覆盖图片。
[images[].premultiplied]Booleanfalse设置为 true 以避免预乘下面的图片。相当于 --premultiplied vips 选项。
[images[].density]Number72代表矢量叠加图片 DPI 的数字。
[images[].raw]Object描述使用原始像素数据时的叠加。
[images[].raw.width]Number
[images[].raw.height]Number
[images[].raw.channels]Number
[images[].animated]booleanfalse设置为 true 以读取动画图片的所有帧/页面。
[images[].failOn]string“‘warning’“@see 构造函数参数
[images[].limitInputPixels]number | boolean268402689@see 构造函数参数

示例

¥Example

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!
  });