From e1e98f6fa95acc50289b53b541de8f4b0adfa074 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 15:11:23 +0530 Subject: [PATCH 1/3] update readme.md --- README.md | 87 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 53 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index b7173b4..5034ca5 100644 --- a/README.md +++ b/README.md @@ -318,14 +318,61 @@ transformation = [ See the complete list of transformations supported in ImageKit [here](https://docs.imagekit.io/features/image-transformations). The SDK gives a name to each transformation parameter e.g. `height` for `h` and `width` for `w` parameter. It makes your code more readable. If the property does not match any of the following supported options, it is added as it is. -
+### Adding overlays -> #### Deprecation notice -> The list below mentions the old overlay syntax parameters such as `oi`, `ot`, `obg`, and more. These parameters will be deprecated on 31st Oct 2023 and will start returning errors when used in URLs. Please migrate to the new Layers syntax that supports overlay nesting, provides better positional control, and allows more transformations at the layer level. You can start with [examples](https://docs.imagekit.io/features/image-transformations/overlay-using-layers#examples) to learn quickly. -> If you create overlay transformations using the JavaScript SDK, you can migrate to the new Layers syntax using the `raw` transformation parameter, as given in the example below. -> `transformation = [{ "width": 300, "height": 300 },{ "raw": "l-image,i-logo.png,w-10,rt-90,l-end" }]` +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. + +**Text as overlays** + +You can add any text string over a base video or image using a text layer (l-text). + +For example: + +```js + +``` +**Sample Result URL** +``` +https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg +``` + +**Image as overlays** + +You can add an image over a base video or image using an image layer (l-image). + +For example: + +```js + +``` +**Sample Result URL** +``` +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 +``` + +**Solid color blocks as overlays** + +You can add solid color blocks over a base video or image using an image layer (l-image). + +For example: + +```js + +``` +**Sample Result URL** +``` +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/img/sample-video.mp4 +``` -
### List of supported transformations
@@ -349,34 +396,6 @@ See the complete list of transformations supported in ImageKit [here](https://do | rotation | rt | | blur | bl | | named | n | -| overlayX | ox | -| overlayY | oy | -| overlayFocus | ofo | -| overlayHeight | oh | -| overlayWidth | ow | -| overlayImage | oi | -| overlayImageTrim | oit | -| overlayImageAspectRatio | oiar | -| overlayImageBackground | oibg | -| overlayImageBorder | oib | -| overlayImageDPR | oidpr | -| overlayImageQuality | oiq | -| overlayImageCropping | oic | -| overlayImageTrim | oit | -| overlayText | ot | -| overlayTextFontSize | ots | -| overlayTextFontFamily | otf | -| overlayTextColor | otc | -| overlayTextTransparency | oa | -| overlayAlpha | oa | -| overlayTextTypography | ott | -| overlayBackground | obg | -| overlayTextEncoded | ote | -| overlayTextWidth | otw | -| overlayTextBackground | otbg | -| overlayTextPadding | otp | -| overlayTextInnerAlignment | otia | -| overlayRadius | or | | progressive | pr | | lossless | lo | | trim | t | From 241b3f54595b5ed8f9939f39a14b2166c812173b Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 15:33:37 +0530 Subject: [PATCH 2/3] update readme.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5034ca5..e4da398 100644 --- a/README.md +++ b/README.md @@ -331,7 +331,7 @@ For example: ```js ``` **Sample Result URL** @@ -348,7 +348,7 @@ For example: ```js ``` **Sample Result URL** @@ -365,7 +365,7 @@ For example: ```js ``` **Sample Result URL** From 409aabbeab13a39cc3d21f94cf0afa6a0549a430 Mon Sep 17 00:00:00 2001 From: ANKUR DWIVEDI Date: Thu, 21 Dec 2023 15:56:29 +0530 Subject: [PATCH 3/3] update readme.md --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e4da398..713eec0 100644 --- a/README.md +++ b/README.md @@ -236,8 +236,8 @@ In order to use the SDK, you need to provide it with a few configuration paramet ```js Promise} // This promise resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`. > @@ -331,6 +331,7 @@ For example: ```js ``` @@ -348,6 +349,7 @@ For example: ```js ``` @@ -365,6 +367,7 @@ For example: ```js ```