Commit 047b02c2 authored by Fabrizio Ruggeri's avatar Fabrizio Ruggeri
Browse files

Bump version to 2.4.0

parent e78465ca
# Changelog
## 2.4.0
- Add `overlay` option. Now you acn add watermarks to your images!
## 2.3.6
- ✨📖 Documentation now has a useful "Try it" on each example!
......
This diff is collapsed.
{
"name": "caravaggio",
"version": "2.3.6",
"version": "2.4.0",
"description": "A blazing fast image processor service",
"main": "index.js",
"bin": "bin/caravaggio",
......
---
id: version-2.4.0-overlay
title: Overlay
sidebar_label: Overlay (watermarks)
original_id: overlay
---
You can overlay an image with another. This feature is useful if you wish to create a watermark or simply
an image composition
## Usage
<pre><code class="hljs css html" data-preview>https://caravaggio.now.sh/<strong>overlay_https%3A%2F%2Framiel.gitlab.io%2Fcaravaggio%2Fimg%2Fcaravaggio-logo.jpeg_gsoutheast</strong>/https://goo.gl/EXv4MP</code></pre>
Accepted parameters are
**url**: the url of the overlay image. The url **must** be escaped and must be the first parameter.
**g**: the gravity to position the overlay. This is ignored if specific coordinates are passed.
**x:** The position on the right-left axis.
**y:** The position on the top-bottom axis.
**watermark**: Repeat the overlay image
**Original**
![Two girls](assets/example/girls_small.jpeg)
**Result**
![Overlayed with](assets/example/overlay.jpeg)
## Examples
### Position with gravity
You can position the watermark using the gravity parameter. Here an example putting the watermark on the west (center-left) side of the image.
<pre><code class="hljs css html" data-preview>https://caravaggio.now.sh/<strong>overlay_https%3A%2F%2Framiel.gitlab.io%2Fcaravaggio%2Fimg%2Fcaravaggio-logo.jpeg_gw</strong>/https://goo.gl/EXv4MP</code></pre>
**Result**
![Overlayed with](assets/example/overlay-west.jpeg)
### Positioning with coordinates
You can specify coordinates to position the overlay. In that case any gravity values will be ignored. Let's position the overlay at position `x: 100px` and `y: 60%` of the total image height. Coordinates refers to top-left corner of the overlay.
`x` and `y` can be expressed as pixels or percentage as explained [here](resize.html#sizes).
<pre><code class="hljs css html" data-preview>https://caravaggio.now.sh/<strong>overlay_https%3A%2F%2Framiel.gitlab.io%2Fcaravaggio%2Fimg%2Fcaravaggio-logo.jpeg_x100_y0.6</strong>/https://goo.gl/EXv4MP</code></pre>
**Result**
![Overlayed with](assets/example/overlay-coords.jpeg)
### Watermark repeat
The overlay can be repeated using `watermark` option.
<pre><code class="hljs css html" data-preview>https://caravaggio.now.sh/<strong>overlay_"https%3A%2F%2Fgitlab.com%2Framiel%2Fcaravaggio%2Fraw%2Fmaster%2Fwebsite%2Fstatic%2Fimg%2Foverlay.png%3Finline%3Dfalse"_watermark</strong>/https://goo.gl/EXv4MP</code></pre>
**Result**
![Overlayed with](assets/example/overlay-watermark.jpeg)
{
"version-2.4.0-docs": {
"Getting started": [
"version-2.4.0-whatis",
"version-2.4.0-install",
"version-2.4.0-configuration"
],
"Usage": [
"version-2.4.0-general-usage",
"version-2.4.0-output",
"version-2.4.0-progressive",
"version-2.4.0-resize",
"version-2.4.0-extract",
"version-2.4.0-overlay",
"version-2.4.0-quality",
"version-2.4.0-rotate",
"version-2.4.0-flip",
"version-2.4.0-blur"
]
}
}
[
"2.4.0",
"2.3.6",
"2.3.5"
]
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment