Bug fix overlayImage and test cases

Author: manu4543

README.md

@@ -206,20 +206,34 @@ The complete list of transformations supported and their usage in ImageKit can b
 | rotation | rt |
 | blur | bl |
 | named | n |
-| overlayImage | oi |
 | 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 |
-| overlayImageTrim | oit |
+| overlayTextEncoded | ote |
+| overlayTextWidth | otw |
+| overlayTextBackground | otbg |
+| overlayTextPadding | otp |
+| overlayTextInnerAlignment | otia |
+| overlayRadius | or |
 | progressive | pr |
 | lossless | lo |
 | trim | t |

package.json

@@ -1,6 +1,6 @@
 {
     "name": "imagekit-javascript",
-    "version": "1.3.3",
+    "version": "1.3.4",
     "description": "Javascript SDK for using ImageKit.io in the browser",
     "main": "dist/imagekit.cjs.js",
     "module": "dist/imagekit.esm.js",

src/constants/supportedTransforms.js

@@ -13,9 +13,17 @@ export default {
     "background" : "bg",
     "border" : "bo",
     "rotation" : "rt",
+    "rotate" : "rt",
     "blur" : "bl",
     "named" : "n",
     "overlayImage" : "oi",
+    "overlayImageAspectRatio" : "oiar",
+    "overlayImageBackground": "oibg",
+    "overlayImageBorder": "oib",
+    "overlayImageDPR": "oidpr",
+    "overlayImageQuality": "oiq",
+    "overlayImageCropping": "oic",
+    "overlayImageTrim" : "oit",
     "overlayX" : "ox",
     "overlayY" : "oy",
     "overlayFocus" : "ofo",
@@ -25,10 +33,16 @@ export default {
     "overlayTextFontSize" : "ots",
     "overlayTextFontFamily" : "otf",
     "overlayTextColor" : "otc",
+    "overlayTextTransparency" : "oa",
     "overlayAlpha" : "oa",
     "overlayTextTypography" : "ott",
     "overlayBackground" : "obg",
-    "overlayImageTrim" : "oit",
+    "overlayTextEncoded": "ote",
+    "overlayTextWidth": "otw",
+    "overlayTextBackground": "otbg",
+    "overlayTextPadding": "otp",
+    "overlayTextInnerAlignment": "otia",
+    "overlayRadius": "or",
     "progressive" : "pr",
     "lossless" : "lo",
     "trim" : "t",

src/url/builder.js

@@ -115,7 +115,12 @@ function constructTransformationString(transformation) {
             if (transformation[i][key] === "-") {
                 parsedTransformStep.push(transformKey);
             } else {
-                parsedTransformStep.push([transformKey, transformation[i][key]].join(transformationUtils.getTransformKeyValueDelimiter()));
+                var value = transformation[i][key];
+                if(transformKey === "oi") {
+                    value = removeLeadingSlash(value);
+                    value = value.replace(/\//g,"@@");
+                }
+                parsedTransformStep.push([transformKey, value].join(transformationUtils.getTransformKeyValueDelimiter()));
             }
 
         }

src/utils/transformation.js

@@ -22,7 +22,7 @@ export default {
     getTransformKey: function (transform) {
         if (!transform) { return ""; }
 
-        return supportedTransforms[transform.toLowerCase()] || "";
+        return supportedTransforms[transform] || supportedTransforms[transform.toLowerCase()] || "";
     },
     getChainTransformDelimiter: function () {
         return CHAIN_TRANSFORM_DELIMITER;

test/url-generation.js

@@ -155,6 +155,45 @@ describe("URL generation", function () {
 
         expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400:rndm_trnsf-abcd/test_path.jpg?ik-sdk-version=javascript-${pkg.version}`);
     });
+
+    it('overlayImage', function () {
+        const url = imagekit.url({
+            path: "/test_path.jpg",
+            transformation: [{
+                "height": "300",
+                "width": "400",
+                overlayImage: "overlay.jpg"
+            }]
+        })
+
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,oi-overlay.jpg/test_path.jpg?ik-sdk-version=javascript-${pkg.version}`);
+    });
+
+    it('overlayImage with slash in path', function () {
+        const url = imagekit.url({
+            path: "/test_path.jpg",
+            transformation: [{
+                "height": "300",
+                "width": "400",
+                overlayImage: "/path/to/overlay.jpg"
+            }]
+        })
+
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,oi-path@@to@@overlay.jpg/test_path.jpg?ik-sdk-version=javascript-${pkg.version}`);
+    });
+
+    it('overlayX', function () {
+        const url = imagekit.url({
+            path: "/test_path.jpg",
+            transformation: [{
+                "height": "300",
+                "width": "400",
+                overlayX: 10
+            }]
+        })
+
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,ox-10/test_path.jpg?ik-sdk-version=javascript-${pkg.version}`);
+    });
 });