mirror of
https://github.com/lovell/sharp.git
synced 2025-07-09 18:40:16 +02:00
76 lines
3.1 KiB
Markdown
76 lines
3.1 KiB
Markdown
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
|
|
|
|
### Table of Contents
|
|
|
|
- [overlayWith][1]
|
|
|
|
## overlayWith
|
|
|
|
Overlay (composite) an image over the processed (resized, extracted etc.) image.
|
|
|
|
The overlay image must be the same size or smaller than the processed image.
|
|
If both `top` and `left` options are provided, they take precedence over `gravity`.
|
|
|
|
If the overlay image contains an alpha channel then composition with premultiplication will occur.
|
|
|
|
**Parameters**
|
|
|
|
- `overlay` **([Buffer][2] \| [String][3])** Buffer containing image data or String containing the path to an image file.
|
|
- `options` **[Object][4]?**
|
|
- `options.gravity` **[String][3]** gravity at which to place the overlay. (optional, default `'centre'`)
|
|
- `options.top` **[Number][5]?** the pixel offset from the top edge.
|
|
- `options.left` **[Number][5]?** the pixel offset from the left edge.
|
|
- `options.tile` **[Boolean][6]** set to true to repeat the overlay image across the entire image with the given `gravity`. (optional, default `false`)
|
|
- `options.cutout` **[Boolean][6]** set to true to apply only the alpha channel of the overlay image to the input image, giving the appearance of one image being cut out of another. (optional, default `false`)
|
|
- `options.density` **[Number][5]** integral number representing the DPI for vector overlay image. (optional, default `72`)
|
|
- `options.raw` **[Object][4]?** describes overlay when using raw pixel data.
|
|
- `options.raw.width` **[Number][5]?**
|
|
- `options.raw.height` **[Number][5]?**
|
|
- `options.raw.channels` **[Number][5]?**
|
|
- `options.create` **[Object][4]?** describes a blank overlay to be created.
|
|
- `options.create.width` **[Number][5]?**
|
|
- `options.create.height` **[Number][5]?**
|
|
- `options.create.channels` **[Number][5]?** 3-4
|
|
- `options.create.background` **([String][3] \| [Object][4])?** parsed by the [color][7] module to extract values for red, green, blue and alpha.
|
|
|
|
**Examples**
|
|
|
|
```javascript
|
|
sharp('input.png')
|
|
.rotate(180)
|
|
.resize(300)
|
|
.flatten()
|
|
.background('#ff6600')
|
|
.overlayWith('overlay.png', { gravity: sharp.gravity.southeast } )
|
|
.sharpen()
|
|
.withMetadata()
|
|
.quality(90)
|
|
.webp()
|
|
.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!
|
|
});
|
|
```
|
|
|
|
- Throws **[Error][8]** Invalid parameters
|
|
|
|
Returns **Sharp**
|
|
|
|
[1]: #overlaywith
|
|
|
|
[2]: https://nodejs.org/api/buffer.html
|
|
|
|
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
|
|
|
|
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
|
|
|
|
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
|
|
|
|
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
|
|
|
[7]: https://www.npmjs.org/package/color
|
|
|
|
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error
|