diff --git a/README.md b/README.md index 414d36f..dc4e4cc 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,82 @@ params := ikurl.UrlParam{ }, } ``` + +**3. Adding overlays** + +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: + +```go +params := ikurl.UrlParam{ + Path: "default-image.jpg", + UrlEndpoint: "https://ik.imagekit.io/demo-id/", + Transformations: []map[string]any{ + { + "height": 300, + "width": 400, + "raw": "l-text,i-Imagekit,fs-50,l-end" + }, + }, +} +``` +**Sample Result URL** +``` +https://ik.imagekit.io/demo-id/default-image.jpg?tr=h-300,w-400,l-text,i-Imagekit,fs-50,l-end +``` + +**Image as overlays** + +You can add an image over a base video or image using an image layer (l-image). + +For example: + +```go +params := ikurl.UrlParam{ + Path: "default-image.jpg", + UrlEndpoint: "https://ik.imagekit.io/demo-id/", + Transformations: []map[string]any{ + { + "height": 300, + "width": 400, + "raw": "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end" + }, + }, +} +``` +**Sample Result URL** +``` +https://ik.imagekit.io/demo-id/default-image.jpg?tr=h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end +``` + +**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: + +```go +params := ikurl.UrlParam{ + Path: "img/sample-video.mp4", + UrlEndpoint: "https://ik.imagekit.io/demo-id/", + Transformations: []map[string]any{ + { + "height": 300, + "width": 400, + "raw": "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end" + }, + }, +} +``` +**Sample Result URL** +``` +https://ik.imagekit.io/demo-id/img/sample-video.mp4?tr=h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end +``` #### List of supported transformations 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. @@ -225,38 +301,6 @@ If you want to generate transformations in your application and add them to the |rotation |rt| |blur |bl| |named |n| -|overlayX |ox| -|overlayY |oy| -|overlayFocus |ofo| -|overlayHeight |oh| -|overlayWidth |ow| -|overlayImage |oi| -|overlayImageX |oix| -|overlayImageY |oiy| -|overlayImageXc |oixc| -|overlayImageYc |oiyc| -|overlayImageAspectRatio |oiar| -|overlayImageBackground |oibg| -|overlayImageBorder |oib| -|overlayImageDPR |oidpr| -|overlayImageQuality |oiq| -|overlayImageCropping |oic| -|overlayImageFocus |oifo| -|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|