Add monochrome and duotone options (#41)

* Add monochrome and duotone options

* Add changesets and mark options PRO

Author: 11bit

.changeset/hot-owls-pick.md

@@ -0,0 +1,5 @@
+---
+"@imgproxy/imgproxy-js-core": minor
+---
+
+Add [monochrome](https://docs.imgproxy.net/usage/processing#monochrome) and [duotone](https://docs.imgproxy.net/usage/processing#duotone) options

src/options/duotone.ts

@@ -0,0 +1,34 @@
+import type { Duotone, DuotoneOptionsPartial } from "../types/duotone";
+import { guardIsNotNum, guardIsUndef } from "../utils";
+
+const getOpt = (options: DuotoneOptionsPartial): Duotone | undefined =>
+  options.duotone ?? options.dt;
+
+const test = (options: DuotoneOptionsPartial): boolean => {
+  return Boolean(getOpt(options));
+};
+
+const build = (options: DuotoneOptionsPartial): string => {
+  const duotoneOpt = getOpt(options);
+
+  guardIsUndef(duotoneOpt, "duotone");
+
+  const { intensity, color1 = "", color2 = "" } = duotoneOpt;
+
+  guardIsNotNum(intensity, "duotone.intensity", {
+    addParam: {
+      min: 0,
+      max: 1,
+    },
+  });
+
+  if (color2) {
+    return `dt:${intensity}:${color1}:${color2}`;
+  } else if (color1) {
+    return `dt:${intensity}:${color1}`;
+  } else {
+    return `dt:${intensity}`;
+  }
+};
+
+export { test, build };

src/options/index.ts

@@ -10,6 +10,7 @@ export * as cacheBuster from "../optionsShared/cacheBuster";
 export * as contrast from "./contrast";
 export * as crop from "../optionsShared/crop";
 export * as disableAnimation from "./disableAnimation";
+export * as duotone from "./duotone";
 export * as dpi from "./dpi";
 export * as dpr from "./dpr";
 export * as drawDetections from "./drawDetections";
@@ -35,6 +36,7 @@ export * as maxSrcFileSize from "../optionsShared/maxSrcFileSize";
 export * as maxSrcResolution from "../optionsShared/maxSrcResolution";
 export * as minHeight from "./minHeight";
 export * as minWidth from "./minWidth";
+export * as monochrome from "./monochrome";
 export * as padding from "./padding";
 export * as page from "../optionsShared/page";
 export * as pages from "./pages";

src/options/monochrome.ts

@@ -0,0 +1,32 @@
+import type { Monochrome, MonochromeOptionsPartial } from "../types/monochrome";
+import { guardIsNotNum, guardIsUndef } from "../utils";
+
+const getOpt = (options: MonochromeOptionsPartial): Monochrome | undefined =>
+  options.monochrome ?? options.mc;
+
+const test = (options: MonochromeOptionsPartial): boolean => {
+  return Boolean(getOpt(options));
+};
+
+const build = (options: MonochromeOptionsPartial): string => {
+  const monochromeOpt = getOpt(options);
+
+  guardIsUndef(monochromeOpt, "monochrome");
+
+  const { intensity, color } = monochromeOpt;
+
+  guardIsNotNum(intensity, "monochrome.intensity", {
+    addParam: {
+      min: 0,
+      max: 1,
+    },
+  });
+
+  if (color) {
+    return `mc:${intensity}:${color}`;
+  }
+
+  return `mc:${intensity}`;
+};
+
+export { test, build };

src/types/duotone.ts

@@ -0,0 +1,18 @@
+/**
+ * *Duotone option*. **PRO feature**
+ *
+ * When intensity is greater than zero, imgproxy will convert the resulting image to duotone.
+ */
+export interface Duotone {
+  /** Floating-point number between 0-1 defining effect strength */
+  intensity: number;
+  /** Hex color for dark areas */
+  color1?: string;
+  /** Hex color for light areas */
+  color2?: string;
+}
+
+export interface DuotoneOptionsPartial {
+  duotone?: Duotone;
+  dt?: Duotone;
+}

src/types/index.ts

@@ -10,6 +10,7 @@ import type { CacheBusterOptionsPartial } from "../typesShared/cacheBuster";
 import type { ContrastOptionsPartial } from "./contrast";
 import type { CropOptionsPartial } from "../typesShared/crop";
 import type { DisableAnimationOptionsPartial } from "./disableAnimation";
+import type { DuotoneOptionsPartial } from "./duotone";
 import type { DPIOptionsPartial } from "./dpi";
 import type { DPROptionsPartial } from "./dpr";
 import type { DrawDetectionsOptionsPartial } from "./drawDetections";
@@ -34,6 +35,7 @@ import type { MaxSrcFileSizeOptionsPartial } from "../typesShared/maxSrcFileSize
 import type { MaxSrcResolutionOptionsPartial } from "../typesShared/maxSrcResolution";
 import type { MinHeightOptionsPartial } from "./minHeight";
 import type { MinWidthOptionsPartial } from "./minWidth";
+import type { MonochromeOptionsPartial } from "./monochrome";
 import type { ObjectsPositionOptionsPartial } from "./objectsPosition";
 import type { PaddingOptionsPartial } from "./padding";
 import type { PageOptionsPartial } from "../typesShared/page";
@@ -82,6 +84,7 @@ export type Options = AdjustOptionsPartial &
   ContrastOptionsPartial &
   CropOptionsPartial &
   DisableAnimationOptionsPartial &
+  DuotoneOptionsPartial &
   DPIOptionsPartial &
   DPROptionsPartial &
   DrawDetectionsOptionsPartial &
@@ -106,6 +109,7 @@ export type Options = AdjustOptionsPartial &
   MaxSrcResolutionOptionsPartial &
   MinHeightOptionsPartial &
   MinWidthOptionsPartial &
+  MonochromeOptionsPartial &
   ObjectsPositionOptionsPartial &
   PaddingOptionsPartial &
   PageOptionsPartial &

src/types/monochrome.ts

@@ -0,0 +1,16 @@
+/**
+ * *Monochrome option*. **PRO feature**
+ *
+ * When `intensity` is greater than zero, imgproxy will convert the resulting image to monochrome.
+ */
+export interface Monochrome {
+  /** Floating-point number between 0-1 defining effect strength */
+  intensity: number;
+  /** Optional hex color for monochrome palette base */
+  color?: string;
+}
+
+export interface MonochromeOptionsPartial {
+  monochrome?: Monochrome;
+  mc?: Monochrome;
+}

tests/optionsBasic/duotone.test.ts

@@ -0,0 +1,60 @@
+import { it, expect, describe, assertType } from "vitest";
+import { test, build } from "../../src/options/duotone";
+import { Options } from "../../src/types";
+
+describe("duotone", () => {
+  describe("test", () => {
+    it("should test true if duotone is set", () => {
+      expect(test({ duotone: { intensity: 1 } })).toBe(true);
+    });
+
+    it("should test true if shorthand is set", () => {
+      expect(test({ dt: { intensity: 1 } })).toBe(true);
+    });
+
+    it("should test false if duotone is false", () => {
+      expect(test({})).toBe(false);
+    });
+  });
+
+  describe("build", () => {
+    it("should work with various parameters", () => {
+      expect(build({ duotone: { intensity: 0 } })).toBe("dt:0");
+      expect(build({ duotone: { intensity: 1 } })).toBe("dt:1");
+      expect(build({ duotone: { intensity: 0.4 } })).toBe("dt:0.4");
+      expect(build({ duotone: { intensity: 0.4, color1: "b3b3b3" } })).toBe(
+        "dt:0.4:b3b3b3"
+      );
+      expect(build({ duotone: { intensity: 0.4, color2: "b3b3b3" } })).toBe(
+        "dt:0.4::b3b3b3"
+      );
+      expect(
+        build({
+          duotone: { intensity: 0.4, color1: "000000", color2: "b3b3b3" },
+        })
+      ).toBe("dt:0.4:000000:b3b3b3");
+    });
+
+    it("should validate intensity", () => {
+      expect(() => build({ duotone: { intensity: -1 } })).toThrow();
+      expect(() => build({ duotone: { intensity: 2 } })).toThrow();
+    });
+  });
+
+  describe("Check types", () => {
+    it("check TS type declaration", () => {
+      assertType<Options>({
+        duotone: {
+          intensity: 0.5,
+          color1: "000000",
+          color2: "000000",
+        },
+        dt: {
+          intensity: 0.5,
+          color1: "000000",
+          color2: "000000",
+        },
+      });
+    });
+  });
+});

tests/optionsBasic/monochrome.test.ts

@@ -0,0 +1,50 @@
+import { it, expect, describe, assertType } from "vitest";
+import { test, build } from "../../src/options/monochrome";
+import { Options } from "../../src/types";
+
+describe("monochrome", () => {
+  describe("test", () => {
+    it("should test true if monochrome is set", () => {
+      expect(test({ monochrome: { intensity: 1 } })).toBe(true);
+    });
+
+    it("should test true if mc is set", () => {
+      expect(test({ mc: { intensity: 1 } })).toBe(true);
+    });
+
+    it("should test false if monochrome is false", () => {
+      expect(test({})).toBe(false);
+    });
+  });
+
+  describe("build", () => {
+    it("should work with various parameters", () => {
+      expect(build({ monochrome: { intensity: 0 } })).toBe("mc:0");
+      expect(build({ monochrome: { intensity: 1 } })).toBe("mc:1");
+      expect(build({ monochrome: { intensity: 0.4 } })).toBe("mc:0.4");
+      expect(build({ monochrome: { intensity: 0.4, color: "b3b3b3" } })).toBe(
+        "mc:0.4:b3b3b3"
+      );
+    });
+
+    it("should validate intensity", () => {
+      expect(() => build({ monochrome: { intensity: -1 } })).toThrow();
+      expect(() => build({ monochrome: { intensity: 2 } })).toThrow();
+    });
+  });
+
+  describe("Check types", () => {
+    it("check TS type declaration", () => {
+      assertType<Options>({
+        monochrome: {
+          intensity: 0.5,
+          color: "000000",
+        },
+        mc: {
+          intensity: 0.5,
+          color: "000000",
+        },
+      });
+    });
+  });
+});