Sharp合成图片
在开发过程中，我们有时候需要对图片进行处理，给一个图片添加水印、多个图片合成为一图片等操作，所以我们介绍下nodejs使用sharp来处理上述问题。 对于上述问题的话，就是多图合并为一个图片，首先我们要知道最终输出画板的宽高，然后里面每一个图片的宽高、在画板的位置【上边距、左边距】、旋转的角度等信息。
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无效参数ErrorInvalid parameters
自从：0.22.0
Since: 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 输出。这对于彩色表情符号渲染或支持 Pango 标记功能（如 <span foreground="red">Red!</span>）很有用。 |
| [images[].input.text.spacing] | number | 0 | 文本行高（以磅为单位）。如果未指定，将使用字体行高。 |
| [images[].autoOrient] | Boolean | false | 设置为 true 以使用 EXIF 方向数据（如果存在）来定位图片。 |
| [images[].blend] | String | ’over’ | 如何将此图片与下面的图片混合。 |
| [images[].gravity] | String | ’centre’ | 放置覆盖层的重力。 |
| [images[].top] | Number | 距顶部边缘的像素偏移。 | |
| [images[].left] | Number | 距左边缘的像素偏移。 | |
| [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 构造函数参数 |
| [images[].limitInputPixels] | number | boolean | 268402689 | @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! });