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><strong></strong>/</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
![Two girls](assets/example/girls_small.jpeg)
![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><strong></strong>/</code></pre>
![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><strong></strong>/</code></pre>
![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><strong>overlay_""_watermark</strong>/</code></pre>
![Overlayed with](assets/example/overlay-watermark.jpeg)
"version-2.4.0-docs": {
"Getting started": [
"Usage": [
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