Browse Source

Add Contain Image, Cover Image and Image Hue / Saturation / Lightness ops

j433866 6 years ago
parent
commit
833c1cd98f

+ 4 - 1
src/core/config/Categories.json

@@ -369,7 +369,10 @@
             "Crop Image",
             "Image Brightness / Contrast",
             "Image Opacity",
-            "Image Filter"
+            "Image Filter",
+            "Contain Image",
+            "Cover Image",
+            "Image Hue/Saturation/Lightness"
         ]
     },
     {

+ 140 - 0
src/core/operations/ContainImage.mjs

@@ -0,0 +1,140 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Magic from "../lib/Magic";
+import { toBase64 } from "../lib/Base64.mjs";
+import jimp from "jimp";
+
+/**
+ * Contain Image operation
+ */
+class ContainImage extends Operation {
+
+    /**
+     * ContainImage constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Contain Image";
+        this.module = "Image";
+        this.description = "Scales an image to the specified width and height, maintaining the aspect ratio. The image may be letterboxed.";
+        this.infoURL = "";
+        this.inputType = "byteArray";
+        this.outputType = "byteArray";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Width",
+                type: "number",
+                value: 100,
+                min: 1
+            },
+            {
+                name: "Height",
+                type: "number",
+                value: 100,
+                min: 1
+            },
+            {
+                name: "Horizontal align",
+                type: "option",
+                value: [
+                    "Left",
+                    "Center",
+                    "Right"
+                ],
+                defaultIndex: 1
+            },
+            {
+                name: "Vertical align",
+                type: "option",
+                value: [
+                    "Top",
+                    "Middle",
+                    "Bottom"
+                ],
+                defaultIndex: 1
+            },
+            {
+                name: "Resizing algorithm",
+                type: "option",
+                value: [
+                    "Nearest Neighbour",
+                    "Bilinear",
+                    "Bicubic",
+                    "Hermite",
+                    "Bezier"
+                ],
+                defaultIndex: 1
+            }
+        ];
+    }
+
+    /**
+     * @param {byteArray} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const [width, height, hAlign, vAlign, alg] = args;
+        const type = Magic.magicFileType(input);
+
+        const resizeMap = {
+            "Nearest Neighbour": jimp.RESIZE_NEAREST_NEIGHBOR,
+            "Bilinear": jimp.RESIZE_BILINEAR,
+            "Bicubic": jimp.RESIZE_BICUBIC,
+            "Hermite": jimp.RESIZE_HERMITE,
+            "Bezier": jimp.RESIZE_BEZIER
+        };
+
+        const alignMap = {
+            "Left": jimp.HORIZONTAL_ALIGN_LEFT,
+            "Center": jimp.HORIZONTAL_ALIGN_CENTER,
+            "Right": jimp.HORIZONTAL_ALIGN_RIGHT,
+            "Top": jimp.VERTICAL_ALIGN_TOP,
+            "Middle": jimp.VERTICAL_ALIGN_MIDDLE,
+            "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
+        };
+
+        if (!type || type.mime.indexOf("image") !== 0){
+            throw new OperationError("Invalid file type.");
+        }
+
+        const image = await jimp.read(Buffer.from(input));
+
+        if (ENVIRONMENT_IS_WORKER())
+            self.sendStatusMessage("Containing image...");
+        image.contain(width, height, alignMap[hAlign] | alignMap[vAlign], resizeMap[alg]);
+        const imageBuffer = await image.getBufferAsync(jimp.AUTO);
+        return [...imageBuffer];
+    }
+
+    /**
+     * Displays the contained image using HTML for web apps
+     * @param {byteArray} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.length) return "";
+
+        let dataURI = "data:";
+        const type = Magic.magicFileType(data);
+        if (type && type.mime.indexOf("image") === 0){
+            dataURI += type.mime + ";";
+        } else {
+            throw new OperationError("Invalid file type");
+        }
+        dataURI += "base64," + toBase64(data);
+
+        return "<img src='" + dataURI + "'>";
+    }
+
+}
+
+export default ContainImage;

+ 139 - 0
src/core/operations/CoverImage.mjs

@@ -0,0 +1,139 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Magic from "../lib/Magic";
+import { toBase64 } from "../lib/Base64.mjs";
+import jimp from "jimp";
+
+/**
+ * Cover Image operation
+ */
+class CoverImage extends Operation {
+
+    /**
+     * CoverImage constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Cover Image";
+        this.module = "Image";
+        this.description = "Scales the image to the given width and height, keeping the aspect ratio. The image may be clipped.";
+        this.infoURL = "";
+        this.inputType = "byteArray";
+        this.outputType = "byteArray";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Width",
+                type: "number",
+                value: 100,
+                min: 1
+            },
+            {
+                name: "Height",
+                type: "number",
+                value: 100,
+                min: 1
+            },
+            {
+                name: "Horizontal align",
+                type: "option",
+                value: [
+                    "Left",
+                    "Center",
+                    "Right"
+                ],
+                defaultIndex: 1
+            },
+            {
+                name: "Vertical align",
+                type: "option",
+                value: [
+                    "Top",
+                    "Middle",
+                    "Bottom"
+                ],
+                defaultIndex: 1
+            },
+            {
+                name: "Resizing algorithm",
+                type: "option",
+                value: [
+                    "Nearest Neighbour",
+                    "Bilinear",
+                    "Bicubic",
+                    "Hermite",
+                    "Bezier"
+                ],
+                defaultIndex: 1
+            }
+        ];
+    }
+
+    /**
+     * @param {byteArray} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const [width, height, hAlign, vAlign, alg] = args;
+        const type = Magic.magicFileType(input);
+
+        const resizeMap = {
+            "Nearest Neighbour": jimp.RESIZE_NEAREST_NEIGHBOR,
+            "Bilinear": jimp.RESIZE_BILINEAR,
+            "Bicubic": jimp.RESIZE_BICUBIC,
+            "Hermite": jimp.RESIZE_HERMITE,
+            "Bezier": jimp.RESIZE_BEZIER
+        };
+
+        const alignMap = {
+            "Left": jimp.HORIZONTAL_ALIGN_LEFT,
+            "Center": jimp.HORIZONTAL_ALIGN_CENTER,
+            "Right": jimp.HORIZONTAL_ALIGN_RIGHT,
+            "Top": jimp.VERTICAL_ALIGN_TOP,
+            "Middle": jimp.VERTICAL_ALIGN_MIDDLE,
+            "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
+        };
+
+        if (!type || type.mime.indexOf("image") !== 0){
+            throw new OperationError("Invalid file type.");
+        }
+
+        const image = await jimp.read(Buffer.from(input));
+        if (ENVIRONMENT_IS_WORKER())
+            self.sendStatusMessage("Covering image...");
+        image.cover(width, height, alignMap[hAlign] | alignMap[vAlign], resizeMap[alg]);
+        const imageBuffer = await image.getBufferAsync(jimp.AUTO);
+        return [...imageBuffer];
+    }
+
+    /**
+     * Displays the covered image using HTML for web apps
+     * @param {byteArray} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.length) return "";
+
+        let dataURI = "data:";
+        const type = Magic.magicFileType(data);
+        if (type && type.mime.indexOf("image") === 0){
+            dataURI += type.mime + ";";
+        } else {
+            throw new OperationError("Invalid file type");
+        }
+        dataURI += "base64," + toBase64(data);
+
+        return "<img src='" + dataURI + "'>";
+    }
+
+}
+
+export default CoverImage;

+ 126 - 0
src/core/operations/ImageHueSaturationLightness.mjs

@@ -0,0 +1,126 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
+import Magic from "../lib/Magic";
+import { toBase64 } from "../lib/Base64.mjs";
+import jimp from "jimp";
+
+/**
+ * Image Hue/Saturation/Lightness operation
+ */
+class ImageHueSaturationLightness extends Operation {
+
+    /**
+     * ImageHueSaturationLightness constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Image Hue/Saturation/Lightness";
+        this.module = "Image";
+        this.description = "Adjusts the hue / saturation / lightness (HSL) values of an image.";
+        this.infoURL = "";
+        this.inputType = "byteArray";
+        this.outputType = "byteArray";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Hue",
+                type: "number",
+                value: 0,
+                min: -360,
+                max: 360
+            },
+            {
+                name: "Saturation",
+                type: "number",
+                value: 0,
+                min: -100,
+                max: 100
+            },
+            {
+                name: "Lightness",
+                type: "number",
+                value: 0,
+                min: -100,
+                max: 100
+            }
+        ];
+    }
+
+    /**
+     * @param {byteArray} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        const [hue, saturation, lightness] = args;
+        const type = Magic.magicFileType(input);
+
+        if (!type || type.mime.indexOf("image") !== 0){
+            throw new OperationError("Invalid file type.");
+        }
+
+        const image = await jimp.read(Buffer.from(input));
+
+        if (hue !== 0) {
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Changing image hue...");
+            image.colour([
+                {
+                    apply: "hue",
+                    params: [hue]
+                }
+            ]);
+        }
+        if (saturation !== 0) {
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Changing image saturation...");
+            image.colour([
+                {
+                    apply: "saturate",
+                    params: [saturation]
+                }
+            ]);
+        }
+        if (lightness !== 0) {
+            if (ENVIRONMENT_IS_WORKER())
+                self.sendStatusMessage("Changing image lightness...");
+            image.colour([
+                {
+                    apply: "lighten",
+                    params: [lightness]
+                }
+            ]);
+        }
+        const imageBuffer = await image.getBufferAsync(jimp.AUTO);
+        return [...imageBuffer];
+    }
+
+    /**
+     * Displays the image using HTML for web apps
+     * @param {byteArray} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.length) return "";
+
+        let dataURI = "data:";
+        const type = Magic.magicFileType(data);
+        if (type && type.mime.indexOf("image") === 0){
+            dataURI += type.mime + ";";
+        } else {
+            throw new OperationError("Invalid file type");
+        }
+        dataURI += "base64," + toBase64(data);
+
+        return "<img src='" + dataURI + "'>";
+    }
+}
+
+export default ImageHueSaturationLightness;