代码文档
教程菜单 本页目录
教程菜单

合成图像

composite

composite(images) ⇒ Sharp

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

要合成的图像必须与处理后的图像大小相同或更小。如果同时提供了顶部和左侧选项，则它们优先于重力。

在相同处理管道中的任何调整大小、旋转或提取操作都将始终在合成之前应用于输入图像。

混合选项可以是以下之一：清除、来源、上方、进入、离开、顶部、目标、目标上方、目标进入、目标离开、目标顶部、异或、添加、饱和、相乘、屏幕、覆盖、变暗、变亮、颜色减淡、颜色减淡、颜色加深、颜色加深、硬光、软光、差异、排除。

有关混合模式的更多信息，请访问“https://www.libvips.org/API/current/libvips-conversion.html#VipsBlendMode”和“https://www.cairographics.org/operators/”

Throws:

  • 错误无效参数

自: 0.22.0

参数类型默认说明
imagesArray.要合成的图像的有序列表
[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由颜色模块解析以提取红色、绿色、蓝色和 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字体可使用的字体文件的绝对文件系统路径。
[images[].input.text.width]number0要换行的整数像素数。宽度大于此值的文本行将在单词边界处断开。
[images[].input.text.height]number0高度的整数像素数。定义后，dpi 将被忽略，文本将自动适应宽度和高度定义的像素分辨率。如果未指定宽度或将其设置为 0，则将被忽略。
[images[].input.text.align]string"'left'"文本对齐方式（“左”、“中”、“居中”、“右”）。
[images[].input.text.justify]booleanfalse将其设置为 true 以将对齐应用于文本。
[images[].input.text.dpi]number72显示文本的分辨率（大小）。如果指定了高度，则不生效。
[images[].input.text.rgba]booleanfalse将其设置为 true 以启用 RGBA 输出。这对于彩色表情符号渲染或支持 Pango 标记功能（如 <span foreground="red">Red!</span>）非常有用。
[images[].input.text.spacing]number0文本行高（以磅为单位）。如果未指定，将使用字体行高。
[images[].blend]String'over'如何将此图像与下图混合。
[images[].gravity]String'centre'放置覆盖层的重力。
[images[].top]Number与上边缘的像素偏移量。
[images[].left]Number与左边缘的像素偏移量。
[images[].tile]Booleanfalse设置为 true 以使用给定的重力在整个图像上重复叠加图像。
[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 构造函数参数

示例

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 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!
  });
本页目录