diff --git a/README.md b/README.md index 9fd33ff..62976b0 100644 --- a/README.md +++ b/README.md @@ -282,6 +282,76 @@ image_url = imagekit.url({ https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400/default-image.jpg?v=123&ik-t=1567358667&ik-s=f2c7cdacbe7707b71a83d49cf1c6110e3d701054 ``` +**4. 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: + +```ruby +image_url = imagekit.url({ + path: "/default-image", + url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/", + transformation: [{ + height: "300", + width: "400", + raw: "l-text,i-Imagekit,fs-50,l-end" + }], +}) +``` +**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: + +```ruby +image_url = imagekit.url({ + path: "/default-image", + url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/", + transformation: [{ + 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/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: + +```ruby +image_url = imagekit.url({ + path: "/img/sample-video", + url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/", + transformation: [{ + 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/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 transformations** The complete list of transformations supported and their usage in ImageKit can be found [here](https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations). The SDK gives a name to each transformation parameter, making the code simpler, making the code simpler, and readable. @@ -308,34 +378,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 | -| 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 |