Skip to content

Commit 1959800

Browse files
ANKUR DWIVEDIANKUR DWIVEDI
authored andcommitted
updated readme.md
1 parent 06fc04c commit 1959800

File tree

1 file changed

+50
-2
lines changed

1 file changed

+50
-2
lines changed

README.md

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,9 +222,35 @@ Sample Result URL -
222222
https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400/default-image.jpg?p1=123&p2=345&ik-t=1658899345&ik-s=8f03aca28432d4e87f697a48143efb4497bbed9e
223223
```
224224

225-
**4. Adding overlays to images**
225+
**4. Adding overlays**
226226

227-
ImageKit.io allows you to add [text](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-text-over-image) and [image overlay](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#add-images-over-image) dynamically.
227+
ImageKit.io enables you to apply overlays to [images](https://docs.imagekit.io/features/image-transformations/overlay-using-layers) and [videos](https://docs.imagekit.io/features/video-transformation/overlay) using the raw parameter with the concept of [layers](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#layers). The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.
228+
229+
### Text as overlays
230+
231+
You can add any text string over a base video or image using a text layer (l-text).
232+
233+
For example:
234+
235+
```python
236+
image_url = imagekit.url({
237+
"path": "/default-image",
238+
"url_endpoint": "https://ik.imagekit.io/your_imagekit_id/endpoint/",
239+
"transformation": [{
240+
"height": "300",
241+
"width": "400",
242+
"raw": "l-text,i-Imagekit,fs-50,l-end"
243+
}],
244+
})
245+
```
246+
**Sample Result URL**
247+
```
248+
https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg
249+
```
250+
251+
### Image as overlays
252+
253+
You can add an image over a base video or image using an image layer (l-image).
228254

229255
For example:
230256

@@ -244,6 +270,28 @@ image_url = imagekit.url({
244270
https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg
245271
```
246272

273+
### Solid color blocks as overlays
274+
275+
You can add solid color blocks over a base video or image using an image layer (l-image).
276+
277+
For example:
278+
279+
```python
280+
image_url = imagekit.url({
281+
"path": "/default-image",
282+
"url_endpoint": "https://ik.imagekit.io/your_imagekit_id/endpoint/",
283+
"transformation": [{
284+
"height": "300",
285+
"width": "400",
286+
"raw": "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end"
287+
}],
288+
})
289+
```
290+
**Sample Result URL**
291+
```
292+
https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end/default-image.jpg
293+
```
294+
247295
**List of transformations**
248296

249297
The complete list of transformations supported and their usage in ImageKit is available [here](https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations).

0 commit comments

Comments
 (0)