xpict 0.0.1

package/dist/esm/actions.js

@@ -0,0 +1,214 @@
+import { createCanvas, registerFont } from "canvas";
+import { colors, insertTextDefaultOptions } from "./constants";
+function toGrayScale(grayscale = true) {
+    return (image) => image.grayscale(grayscale);
+}
+function cropImage(options) {
+    return (image) => image.extract(options);
+}
+function resizeImage({ width, height, fit = "inside" }) {
+    return (image) => image.resize(width, height, { fit: fit });
+}
+function rotateImage(angle) {
+    return (image) => image.rotate(angle);
+}
+function blurImage(sigma = 1) {
+    return (image) => image.blur(sigma);
+}
+function modulateSaturation(saturation) {
+    return (image) => image.modulate({ saturation });
+}
+function modulateBrightness(brightness) {
+    return (image) => image.modulate({ brightness });
+}
+function invertColors() {
+    return (image) => image.negate();
+}
+function addBorder({ size, color = colors.black }) {
+    return (image) => image.extend({
+        top: size,
+        bottom: size,
+        left: size,
+        right: size,
+        background: color
+    });
+}
+function adjustContrast(contrast) {
+    return (image) => {
+        const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+        return image.linear(factor, -(128 * factor) + 128);
+    };
+}
+function modulateOpacity(opacity) {
+    return (image) => image.flatten({ background: { alpha: opacity } });
+}
+function flipImage() {
+    return (image) => image.flip();
+}
+function flopImage() {
+    return (image) => image.flop();
+}
+function insertText({ text, font, x, y, backgroundColor = insertTextDefaultOptions.backgroundColor, anchor = insertTextDefaultOptions.anchor, stroke, rotation = insertTextDefaultOptions.rotation }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const width = imageMetadata.width;
+        const height = imageMetadata.height;
+        const canvas = createCanvas(width, height);
+        const context = canvas.getContext("2d");
+        if (backgroundColor !== "transparent") {
+            context.fillStyle = backgroundColor;
+            context.fillRect(0, 0, width, height);
+        }
+        if (font.filePath) {
+            registerFont(font.filePath, { family: font.name });
+        }
+        context.font = `${font.size}px ${font.name ?? insertTextDefaultOptions.font.name}`;
+        context.fillStyle = font.color ?? colors.black;
+        const textMetrics = context.measureText(text);
+        const textWidth = textMetrics.width;
+        const textHeight = font.size;
+        const anchorOffsets = {
+            "top-left": {
+                x: 0,
+                y: 0
+            },
+            "top-center": {
+                x: -textWidth / 2,
+                y: 0
+            },
+            "top-right": {
+                x: -textWidth,
+                y: 0
+            },
+            "middle-left": {
+                x: 0,
+                y: -textHeight / 2
+            },
+            "middle-center": {
+                x: -textWidth / 2,
+                y: -textHeight / 2
+            },
+            "middle-right": {
+                x: -textWidth,
+                y: -textHeight / 2
+            },
+            "bottom-left": {
+                x: 0,
+                y: -textHeight
+            },
+            "bottom-center": {
+                x: -textWidth / 2,
+                y: -textHeight
+            },
+            "bottom-right": {
+                x: -textWidth,
+                y: -textHeight
+            }
+        };
+        const { x: offsetX, y: offsetY } = anchorOffsets[anchor] || { x: 0, y: 0 };
+        const adjustedX = x + offsetX;
+        const adjustedY = y + offsetY;
+        const adjustedRotation = rotation ?? 0;
+        context.save();
+        context.translate(adjustedX, adjustedY);
+        context.rotate((adjustedRotation * Math.PI) / 180);
+        if (stroke) {
+            context.strokeStyle = stroke.fill;
+            context.lineWidth = stroke.width;
+            context.lineJoin = "round";
+            context.strokeText(text, 0, 0);
+        }
+        context.fillStyle = font.color ?? colors.black;
+        context.fillText(text, 0, 0);
+        context.restore();
+        const textBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: textBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertCircle({ x, y, radius, fill }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const width = imageMetadata.width;
+        const height = imageMetadata.height;
+        const canvas = createCanvas(width, height);
+        const context = canvas.getContext("2d");
+        context.beginPath();
+        context.arc(x, y, radius, 0, Math.PI * 2, true);
+        context.closePath();
+        context.fillStyle = fill;
+        context.fill();
+        const circleBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: circleBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertRectangle({ x, y, width, height, fill, borderRadius }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const canvasWidth = imageMetadata.width;
+        const canvasHeight = imageMetadata.height;
+        const canvas = createCanvas(canvasWidth, canvasHeight);
+        const context = canvas.getContext("2d");
+        context.fillStyle = fill;
+        if (borderRadius && borderRadius > 0) {
+            context.beginPath();
+            context.moveTo(x + borderRadius, y);
+            context.lineTo(x + width - borderRadius, y);
+            context.arcTo(x + width, y, x + width, y + height, borderRadius);
+            context.lineTo(x + width, y + height - borderRadius);
+            context.arcTo(x + width, y + height, x, y + height, borderRadius);
+            context.lineTo(x + borderRadius, y + height);
+            context.arcTo(x, y + height, x, y, borderRadius);
+            context.lineTo(x, y + borderRadius);
+            context.arcTo(x, y, x + width, y, borderRadius);
+            context.closePath();
+            context.fill();
+        }
+        else {
+            context.fillRect(x, y, width, height);
+        }
+        const rectangleBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: rectangleBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertLine({ x1, y1, x2, y2, color, width }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const canvasWidth = imageMetadata.width;
+        const canvasHeight = imageMetadata.height;
+        const canvas = createCanvas(canvasWidth, canvasHeight);
+        const context = canvas.getContext("2d");
+        context.strokeStyle = color;
+        context.lineWidth = width;
+        context.beginPath();
+        context.moveTo(x1, y1);
+        context.lineTo(x2, y2);
+        context.stroke();
+        const lineBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: lineBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+export { toGrayScale, cropImage, resizeImage, rotateImage, blurImage, modulateSaturation, modulateBrightness, invertColors, addBorder, adjustContrast, modulateOpacity, flipImage, flopImage, insertText, insertCircle, insertRectangle, insertLine };

package/dist/esm/constants.js

@@ -0,0 +1,20 @@
+import { rgba } from "./utils/color.util";
+const colors = {
+    black: "#000000",
+    white: "#FFFFFF"
+};
+const defautltTemplateAcitonType = "beforeLayersProccess";
+const createImageDefaultOptions = {
+    chnannels: 4,
+    fill: rgba(0, 0, 0, 0),
+    format: "png"
+};
+const insertTextDefaultOptions = {
+    font: {
+        name: "sans-serif",
+    },
+    anchor: "top-left",
+    backgroundColor: "transparent",
+    rotation: 0
+};
+export { colors, defautltTemplateAcitonType, createImageDefaultOptions, insertTextDefaultOptions };

package/dist/esm/index.js

@@ -0,0 +1,71 @@
+import { defautltTemplateAcitonType } from "./constants";
+import cloneImage from "./utils/clone-image.util.ts";
+function extractActions(actions) {
+    const actionsLayersProccess = [];
+    const actionsAfterLayersProccess = [];
+    if (!actions) {
+        actions = [];
+    }
+    for (const action of actions) {
+        const actionType = typeof action === "function" ? defautltTemplateAcitonType : action.type;
+        const actionFunc = typeof action === "function" ? action : action.func;
+        if (actionType === "beforeLayersProccess") {
+            actionsLayersProccess.push(actionFunc);
+        }
+        else {
+            actionsAfterLayersProccess.push(actionFunc);
+        }
+    }
+    return {
+        before: actionsLayersProccess,
+        after: actionsAfterLayersProccess
+    };
+}
+async function processImageTemplate(template) {
+    const actions = extractActions(template.actions);
+    let image = template.image;
+    for (const action of actions.before) {
+        const imageResult = await action(image);
+        image = await cloneImage(imageResult);
+    }
+    if (template.layers) {
+        const layerImages = [];
+        for (const layer of template.layers) {
+            const currentImage = await processImageTemplate(layer.template);
+            const currentImageBuffer = await currentImage.png().toBuffer();
+            layerImages.push({
+                input: currentImageBuffer,
+                top: layer.y,
+                left: layer.x
+            });
+        }
+        image = image.composite(layerImages);
+    }
+    for (const action of actions.after) {
+        const imageResult = await action(image);
+        image = await cloneImage(imageResult);
+    }
+    return image;
+}
+function extendImageTemplate(template, extendTemplate) {
+    const actions = [];
+    const layers = [];
+    if (template.layers) {
+        layers.push(...template.layers);
+    }
+    if (extendTemplate.layers) {
+        layers.push(...extendTemplate.layers);
+    }
+    if (template.actions) {
+        actions.push(...template.actions);
+    }
+    if (extendTemplate.actions) {
+        actions.push(...extendTemplate.actions);
+    }
+    return {
+        image: template.image,
+        actions: actions,
+        layers: layers
+    };
+}
+export { processImageTemplate, extendImageTemplate };

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/esm/utils/clone-image.util.ts.js

@@ -0,0 +1,7 @@
+import sharp from "sharp";
+async function cloneImage(image) {
+    const imageBuffer = await image.toBuffer();
+    const clonedImage = sharp(imageBuffer);
+    return clonedImage;
+}
+export default cloneImage;

package/dist/esm/utils/color.util.js

@@ -0,0 +1,17 @@
+function componentToHex(component) {
+    const hex = component.toString(16);
+    return hex.padStart(2, "0");
+}
+function rgb(red, green, blue) {
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
+}
+function rgba(red, green, blue, alpha) {
+    const alphaHex = componentToHex(Math.round(alpha * 255));
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}${alphaHex}`;
+}
+function hex(value) {
+    const hexadecimalValue = value.toString(16);
+    const fromatedHexadecimal = `#${hexadecimalValue.padStart(6, "0")}`;
+    return fromatedHexadecimal;
+}
+export { rgb, rgba, hex };

package/dist/esm/utils/create-image.util.js

@@ -0,0 +1,13 @@
+import sharp from "sharp";
+import { createImageDefaultOptions } from "../constants";
+function createImage({ width, height, fill = createImageDefaultOptions.fill, channels = createImageDefaultOptions.chnannels, format = createImageDefaultOptions.format, }) {
+    return sharp({
+        create: {
+            width: width,
+            height: height,
+            channels: channels,
+            background: fill,
+        },
+    })[format]();
+}
+export default createImage;

package/dist/esm/utils/index.js

@@ -0,0 +1,4 @@
+import createImage from "./create-image.util";
+import { rgb, rgba, hex } from "./color.util";
+import openImage from "./open-image.util";
+export { createImage, openImage, rgba, rgb, hex };

package/dist/esm/utils/open-image.util.js

@@ -0,0 +1,5 @@
+import sharp from "sharp";
+function openImage(filePath) {
+    return sharp(filePath);
+}
+export default openImage;

package/dist/tsconfig.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/actions.ts","../src/constants.ts","../src/index.ts","../src/utils/clone-image.util.ts.ts","../src/utils/color.util.ts","../src/utils/create-image.util.ts","../src/utils/index.ts","../src/utils/open-image.util.ts"],"version":"5.6.2"}

package/dist/tsconfig.esm.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/actions.ts","../src/constants.ts","../src/index.ts","../src/utils/clone-image.util.ts.ts","../src/utils/color.util.ts","../src/utils/create-image.util.ts","../src/utils/index.ts","../src/utils/open-image.util.ts"],"version":"5.6.2"}

package/dist/tsconfig.types.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/actions.ts","../src/constants.ts","../src/index.ts","../src/utils/clone-image.util.ts.ts","../src/utils/color.util.ts","../src/utils/create-image.util.ts","../src/utils/index.ts","../src/utils/open-image.util.ts"],"version":"5.6.2"}

package/dist/types/actions.d.ts

@@ -0,0 +1,77 @@
+import sharp from "sharp";
+import { Image } from ".";
+declare function toGrayScale(grayscale?: boolean): (image: Image) => sharp.Sharp;
+export type CropImageOptions = sharp.Region;
+declare function cropImage(options: CropImageOptions): (image: Image) => sharp.Sharp;
+export type ResizeImageOptions = {
+    width: number;
+    height: number;
+    fit: keyof sharp.FitEnum;
+};
+declare function resizeImage({ width, height, fit }: ResizeImageOptions): (image: Image) => sharp.Sharp;
+declare function rotateImage(angle: number): (image: Image) => sharp.Sharp;
+declare function blurImage(sigma?: number): (image: Image) => sharp.Sharp;
+declare function modulateSaturation(saturation: number): (image: Image) => sharp.Sharp;
+declare function modulateBrightness(brightness: number): (image: Image) => sharp.Sharp;
+declare function invertColors(): (image: Image) => sharp.Sharp;
+export type AddBorderOptions = {
+    size: number;
+    color?: string;
+};
+declare function addBorder({ size, color }: AddBorderOptions): (image: Image) => sharp.Sharp;
+declare function adjustContrast(contrast: number): (image: Image) => sharp.Sharp;
+declare function modulateOpacity(opacity: number): (image: Image) => sharp.Sharp;
+declare function flipImage(): (image: Image) => sharp.Sharp;
+declare function flopImage(): (image: Image) => sharp.Sharp;
+export type FontOptions = {
+    size: number;
+    color?: string;
+    name?: string;
+    filePath?: string;
+};
+export type TextAnchor = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type Stroke = {
+    fill: string;
+    width: number;
+};
+export type InsertTextOptions = {
+    text: string;
+    font: FontOptions;
+    x: number;
+    y: number;
+    backgroundColor?: string;
+    anchor?: TextAnchor;
+    stroke?: Stroke;
+    rotation?: number;
+};
+export type AnchorOffsets = Record<TextAnchor, {
+    x: number;
+    y: number;
+}>;
+declare function insertText({ text, font, x, y, backgroundColor, anchor, stroke, rotation }: InsertTextOptions): (image: Image) => Promise<sharp.Sharp>;
+export type InsertCircleOptions = {
+    x: number;
+    y: number;
+    radius: number;
+    fill: string;
+};
+declare function insertCircle({ x, y, radius, fill }: InsertCircleOptions): (image: Image) => Promise<sharp.Sharp>;
+export type InsertRectangleOptions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    borderRadius?: number;
+};
+declare function insertRectangle({ x, y, width, height, fill, borderRadius }: InsertRectangleOptions): (image: Image) => Promise<sharp.Sharp>;
+export type InsertLineOptions = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    color: string;
+    width: number;
+};
+declare function insertLine({ x1, y1, x2, y2, color, width }: InsertLineOptions): (image: Image) => Promise<sharp.Sharp>;
+export { toGrayScale, cropImage, resizeImage, rotateImage, blurImage, modulateSaturation, modulateBrightness, invertColors, addBorder, adjustContrast, modulateOpacity, flipImage, flopImage, insertText, insertCircle, insertRectangle, insertLine };

package/dist/types/constants.d.ts

@@ -0,0 +1,19 @@
+declare const colors: {
+    black: string;
+    white: string;
+};
+declare const defautltTemplateAcitonType = "beforeLayersProccess";
+declare const createImageDefaultOptions: {
+    chnannels: number;
+    fill: string;
+    format: string;
+};
+declare const insertTextDefaultOptions: {
+    font: {
+        name: string;
+    };
+    anchor: string;
+    backgroundColor: string;
+    rotation: number;
+};
+export { colors, defautltTemplateAcitonType, createImageDefaultOptions, insertTextDefaultOptions };

package/dist/types/index.d.ts

@@ -0,0 +1,31 @@
+import sharp, { Sharp } from "sharp";
+export type Image = Sharp;
+export type ImageTemplateLayer = {
+    x: number;
+    y: number;
+    template: ImageTemplate;
+};
+export type ImageTemplateActionFunction = (image: Image) => Image | Promise<Image>;
+export type ImageTemplateAction = ImageTemplateActionFunction | {
+    type: "beforeLayersProccess" | "afterLayersProccess";
+    func: ImageTemplateActionFunction;
+};
+export type ImageTemplate = {
+    image: Image;
+    actions?: ImageTemplateAction[];
+    layers?: ImageTemplateLayer[];
+};
+export type ExtractActionsResult = {
+    before: ImageTemplateActionFunction[];
+    after: ImageTemplateActionFunction[];
+};
+declare function processImageTemplate(template: ImageTemplate): Promise<Image>;
+declare function extendImageTemplate(template: ImageTemplate, extendTemplate: Omit<ImageTemplate, "image">): {
+    image: sharp.Sharp;
+    actions: (ImageTemplateActionFunction | {
+        type: "beforeLayersProccess" | "afterLayersProccess";
+        func: ImageTemplateActionFunction;
+    })[];
+    layers: ImageTemplateLayer[];
+};
+export { processImageTemplate, extendImageTemplate };

package/dist/types/utils/clone-image.util.ts.d.ts

@@ -0,0 +1,4 @@
+import sharp from "sharp";
+import { Image } from "..";
+declare function cloneImage(image: Image): Promise<sharp.Sharp>;
+export default cloneImage;

package/dist/types/utils/color.util.d.ts

@@ -0,0 +1,4 @@
+declare function rgb(red: number, green: number, blue: number): string;
+declare function rgba(red: number, green: number, blue: number, alpha: number): string;
+declare function hex(value: number): string;
+export { rgb, rgba, hex };

package/dist/types/utils/create-image.util.d.ts

@@ -0,0 +1,12 @@
+import sharp from "sharp";
+export type ImageChannels = 3 | 4;
+export type ImageFormat = "png" | "jpeg" | "webp" | "avif" | "gif";
+export type CreateImageOptions = {
+    width: number;
+    height: number;
+    fill?: sharp.Color;
+    channels?: ImageChannels;
+    format?: ImageFormat;
+};
+declare function createImage({ width, height, fill, channels, format, }: CreateImageOptions): sharp.Sharp;
+export default createImage;

package/dist/types/utils/index.d.ts

@@ -0,0 +1,4 @@
+import createImage from "./create-image.util";
+import { rgb, rgba, hex } from "./color.util";
+import openImage from "./open-image.util";
+export { createImage, openImage, rgba, rgb, hex };

package/dist/types/utils/open-image.util.d.ts

@@ -0,0 +1,3 @@
+import { Image } from "..";
+declare function openImage(filePath: string): Image;
+export default openImage;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "xpict",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "ts-node ./tests/index.ts",
+    "test:hr": "ts-node ./tests/generate-hr-maps.ts",
+    "build:clean": "rimraf dist",
+    "compile": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json ./tsconfig.types.json",
+    "build": "npm-run-all build:clean compile generate-exports && node ./dev-scripts/prepare-package-json.js",
+    "generate-exports": "node dev-scripts/generate-exports.cjs"
+  },
+  "keywords": [],
+  "author": "Marcuth",
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^22.5.4",
+    "canvas": "^2.11.2",
+    "sharp": "^0.33.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^6.0.1"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./actions": {
+      "import": "./dist/esm/actions.js",
+      "require": "./dist/cjs/actions.js",
+      "default": "./dist/esm/actions.js",
+      "types": "./dist/types/actions.d.ts"
+    },
+    "./constants": {
+      "import": "./dist/esm/constants.js",
+      "require": "./dist/cjs/constants.js",
+      "default": "./dist/esm/constants.js",
+      "types": "./dist/types/constants.d.ts"
+    },
+    "./utils/clone-image.util.ts": {
+      "import": "./dist/esm/utils/clone-image.util.ts.js",
+      "require": "./dist/cjs/utils/clone-image.util.ts.js",
+      "default": "./dist/esm/utils/clone-image.util.ts.js",
+      "types": "./dist/types/utils/clone-image.util.ts.d.ts"
+    },
+    "./utils/color.util": {
+      "import": "./dist/esm/utils/color.util.js",
+      "require": "./dist/cjs/utils/color.util.js",
+      "default": "./dist/esm/utils/color.util.js",
+      "types": "./dist/types/utils/color.util.d.ts"
+    },
+    "./utils/create-image.util": {
+      "import": "./dist/esm/utils/create-image.util.js",
+      "require": "./dist/cjs/utils/create-image.util.js",
+      "default": "./dist/esm/utils/create-image.util.js",
+      "types": "./dist/types/utils/create-image.util.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/esm/utils/index.js",
+      "require": "./dist/cjs/utils/index.js",
+      "default": "./dist/esm/utils/index.js",
+      "types": "./dist/types/utils/index.d.ts"
+    },
+    "./utils/open-image.util": {
+      "import": "./dist/esm/utils/open-image.util.js",
+      "require": "./dist/cjs/utils/open-image.util.js",
+      "default": "./dist/esm/utils/open-image.util.js",
+      "types": "./dist/types/utils/open-image.util.d.ts"
+    }
+  }
+}