apexify.js 4.5.30 → 4.5.31

package/lib/canvas/utils/bg.ts

@@ -1,40 +1,63 @@
 import { loadImage } from "@napi-rs/canvas";
 import { CanvasConfig } from './types';
-import fs from 'fs';
 import path from 'path';
 
 /**
  * Draws a solid background color on the canvas.
+ * Applies zoom scaling and positioning adjustments.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
- * @returns A Promise that resolves once the background color is drawn.
  */
 export async function drawBackgroundColor(ctx: any, canvas: CanvasConfig): Promise<void> {
+    const zoomScale = canvas.zoom?.scale || 1;
+    const zoomX = canvas.zoom?.x || 0;
+    const zoomY = canvas.zoom?.y || 0;
+
+    const canvasWidth = canvas.width || 500;
+    const canvasHeight = canvas.height || 500;
+
+    const newWidth = canvasWidth * zoomScale;
+    const newHeight = canvasHeight * zoomScale;
+
+    const drawX = (canvasWidth - newWidth) / 2 - zoomX;
+    const drawY = (canvasHeight - newHeight) / 2 - zoomY;
+
     if (canvas.colorBg !== 'transparent') {
         ctx.fillStyle = canvas.colorBg;
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(drawX, drawY, newWidth, newHeight);
     }
 }
 
 /**
  * Draws a gradient background on the canvas.
+ * Applies zoom scaling and positioning adjustments.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
- * @returns A Promise that resolves once the gradient background is drawn.
  */
 export async function drawBackgroundGradient(ctx: any, canvas: CanvasConfig): Promise<void> {
     if (canvas.gradientBg) {
-        const { type, startX, startY, endX, endY, startRadius, endRadius, colors } = canvas.gradientBg;
+        const { type, startX = 0, startY = 0, endX = canvas.width || 500, endY = canvas.height || 500, startRadius = 0, endRadius = 0, colors } = canvas.gradientBg;
 
         if (!colors || colors.length === 0) {
             throw new Error('You need to provide colors for the gradient.');
         }
 
         let gradient;
+        const zoomScale = canvas.zoom?.scale || 1;
+        const zoomX = canvas.zoom?.x || 0;
+        const zoomY = canvas.zoom?.y || 0;
+
+        const newStartX = startX * zoomScale - zoomX;
+        const newStartY = startY * zoomScale - zoomY;
+        const newEndX = endX * zoomScale - zoomX;
+        const newEndY = endY * zoomScale - zoomY;
+
         if (type === 'linear' || type === undefined) {
-            gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+            gradient = ctx.createLinearGradient(newStartX, newStartY, newEndX, newEndY);
         } else if (type === 'radial') {
-            gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
+            const newStartRadius = startRadius * zoomScale;
+            const newEndRadius = endRadius * zoomScale;
+            gradient = ctx.createRadialGradient(newStartX, newStartY, newStartRadius, newEndX, newEndY, newEndRadius);
         } else {
             throw new Error('Unsupported gradient type.');
         }
@@ -43,16 +66,21 @@ export async function drawBackgroundGradient(ctx: any, canvas: CanvasConfig): Pr
             gradient.addColorStop(stop, color);
         }
 
+        const newWidth = (canvas.width || 500) * zoomScale;
+        const newHeight = (canvas.height || 500) * zoomScale;
+        const drawX = ((canvas.width || 500) - newWidth) / 2 - zoomX;
+        const drawY = ((canvas.height || 500) - newHeight) / 2 - zoomY;
+
         ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(drawX, drawY, newWidth, newHeight);
     }
 }
 
 /**
  * Draws a custom background image on the canvas.
+ * Zoom logic is applied to scale and position the image.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
- * @returns A Promise that resolves once the custom background image is drawn.
  */
 export async function customBackground(ctx: any, canvas: CanvasConfig): Promise<void> {
     if (canvas.customBg) {
@@ -68,22 +96,20 @@ export async function customBackground(ctx: any, canvas: CanvasConfig): Promise<
             const image = await loadImage(imageBuffer);
             const zoomScale = canvas.zoom?.scale || 1;
 
-            if (zoomScale < 0) throw new Error("Invalid scale. Scale can't be a -ve integer.");
+            if (zoomScale < 0) throw new Error("Invalid scale. Scale can't be a negative integer.");
 
             const zoomX = canvas.zoom?.x || 0;
             const zoomY = canvas.zoom?.y || 0;
             const moveX = canvas.x || 0;
             const moveY = canvas.y || 0;
 
-            if (!canvas.height || !canvas.width) {
-                canvas.height = image.height;
-                canvas.width = image.width;
-            }
+            const canvasWidth = canvas.width || image.width;
+            const canvasHeight = canvas.height || image.height;
 
             const newWidth = image.width * zoomScale;
             const newHeight = image.height * zoomScale;
-            const drawX = moveX + (canvas.width - newWidth) / 2 - zoomX;
-            const drawY = moveY + (canvas.height - newHeight) / 2 - zoomY;
+            const drawX = moveX + (canvasWidth - newWidth) / 2 - zoomX;
+            const drawY = moveY + (canvasHeight - newHeight) / 2 - zoomY;
 
             ctx.drawImage(image, drawX, drawY, newWidth, newHeight);
 

package/lib/canvas/utils/customLines.ts

@@ -1,49 +1,94 @@
+import { CustomOptions } from "./types";
 
-export function customLines (ctx: any, options: any) { 
-for (const customOption of options) {
-    ctx.beginPath();
-    ctx.moveTo(customOption.startCoordinates.x, customOption.startCoordinates.y);
-    ctx.lineTo(customOption.endCoordinates.x, customOption.endCoordinates.y);
-    ctx.lineWidth = customOption.lineStyle.width || 1;
-    ctx.strokeStyle = customOption.lineStyle.color || 'black';
-
-    if (typeof customOption.lineStyle.lineRadius === 'number') {
-        const borderRadius = customOption.lineStyle.lineRadius;
-        const dx = customOption.endCoordinates.x - customOption.startCoordinates.x;
-        const dy = customOption.endCoordinates.y - customOption.startCoordinates.y;
-        const angle = Math.atan2(dy, dx);
-        const offsetX = Math.cos(angle) * borderRadius;
-        const offsetY = Math.sin(angle) * borderRadius;
-        ctx.moveTo(customOption.startCoordinates.x + offsetX, customOption.startCoordinates.y + offsetY);
-        ctx.lineTo(customOption.endCoordinates.x - offsetX, customOption.endCoordinates.y - offsetY);
-    } else if (customOption.lineStyle.lineRadius === 'circular') {
-        const dx = customOption.endCoordinates.x - customOption.startCoordinates.x;
-        const dy = customOption.endCoordinates.y - customOption.startCoordinates.y;
-        const length = Math.sqrt(dx * dx + dy * dy);
-        const angle = Math.atan2(dy, dx);
-        const halfWidth = customOption.lineStyle.width ? customOption.lineStyle.width / 2 : 1;
-        ctx.moveTo(customOption.startCoordinates.x + Math.cos(angle - Math.PI / 2) * halfWidth, customOption.startCoordinates.y + Math.sin(angle - Math.PI / 2) * halfWidth);
-        ctx.arc(customOption.startCoordinates.x, customOption.startCoordinates.y, length / 2, angle - Math.PI / 2, angle + Math.PI / 2);
-        ctx.lineTo(customOption.endCoordinates.x + Math.cos(angle + Math.PI / 2) * halfWidth, customOption.endCoordinates.y + Math.sin(angle + Math.PI / 2) * halfWidth);
-        ctx.arc(customOption.endCoordinates.x, customOption.endCoordinates.y, length / 2, angle + Math.PI / 2, angle - Math.PI / 2, true);
-        ctx.closePath();
-    }
+export function customLines(ctx: any, options: CustomOptions[]) {
+    let previousEndCoordinates = null;
+    let currentStyle = null;
+    let inSingleLineSequence = false;
 
-    ctx.stroke();
+    for (let i = 0; i < options.length; i++) {
+        const customOption = options[i];
+        const { startCoordinates, endCoordinates, lineStyle } = customOption;
+        const isSingleLine = lineStyle?.singleLine;
 
-    if (customOption.lineStyle.stroke) {
-        const stroke = customOption.lineStyle.stroke;
-        ctx.strokeStyle = stroke.color || 'black';
-        ctx.lineWidth = stroke.width || 1;
-        ctx.stroke();
+        if (isSingleLine && !inSingleLineSequence) {
+            currentStyle = lineStyle;
+            inSingleLineSequence = true;
+            ctx.beginPath();
+            ctx.moveTo(startCoordinates.x, startCoordinates.y);
+        }
+
+        if (!isSingleLine && inSingleLineSequence) {
+            ctx.stroke();
+            applyAdditionalStroke(ctx, currentStyle);
+            inSingleLineSequence = false;
+            currentStyle = null;
+        }
+
+        const start = inSingleLineSequence && previousEndCoordinates
+            ? previousEndCoordinates
+            : startCoordinates;
+
+        if (!inSingleLineSequence) {
+            ctx.beginPath();
+            ctx.moveTo(start.x, start.y);
+        }
+
+        ctx.lineTo(endCoordinates.x, endCoordinates.y);
+
+        const appliedStyle = inSingleLineSequence ? currentStyle : lineStyle;
+        ctx.lineWidth = appliedStyle?.width || 1;
+        ctx.strokeStyle = appliedStyle?.color || 'black';
+        ctx.lineJoin = appliedStyle?.lineJoin || 'miter';
+        ctx.lineCap = appliedStyle?.lineCap || 'butt';
+
+        if (appliedStyle?.lineDash) {
+            ctx.setLineDash(appliedStyle.lineDash.dashArray || []);
+            ctx.lineDashOffset = appliedStyle.lineDash.offset || 0;
+        } else {
+            ctx.setLineDash([]);
+        }
+
+        if (typeof appliedStyle?.lineRadius === 'number') {
+            const borderRadius = appliedStyle.lineRadius;
+            const dx = endCoordinates.x - start.x;
+            const dy = endCoordinates.y - start.y;
+            const angle = Math.atan2(dy, dx);
+            const offsetX = Math.cos(angle) * borderRadius;
+            const offsetY = Math.sin(angle) * borderRadius;
+            ctx.moveTo(start.x + offsetX, start.y + offsetY);
+            ctx.lineTo(endCoordinates.x - offsetX, endCoordinates.y - offsetY);
+        } else if (appliedStyle?.lineRadius === 'circular') {
+            const dx = endCoordinates.x - start.x;
+            const dy = endCoordinates.y - start.y;
+            const length = Math.sqrt(dx * dx + dy * dy);
+            const angle = Math.atan2(dy, dx);
+            const halfWidth = appliedStyle.width ? appliedStyle.width / 2 : 1;
+            ctx.moveTo(start.x + Math.cos(angle - Math.PI / 2) * halfWidth, start.y + Math.sin(angle - Math.PI / 2) * halfWidth);
+            ctx.arc(start.x, start.y, length / 2, angle - Math.PI / 2, angle + Math.PI / 2);
+            ctx.lineTo(endCoordinates.x + Math.cos(angle + Math.PI / 2) * halfWidth, endCoordinates.y + Math.sin(angle + Math.PI / 2) * halfWidth);
+            ctx.arc(endCoordinates.x, endCoordinates.y, length / 2, angle + Math.PI / 2, angle - Math.PI / 2, true);
+            ctx.closePath();
+        }
+
+        if (!inSingleLineSequence || i === options.length - 1) {
+            ctx.stroke();
+            applyAdditionalStroke(ctx, appliedStyle);
+        }
+
+        previousEndCoordinates = endCoordinates;
+
+        if (!isSingleLine) {
+            currentStyle = null;
+            inSingleLineSequence = false;
+        }
     }
+}
 
-    if (customOption.lineStyle.shadow) {
-        const shadow = customOption.lineStyle.shadow;
-        ctx.shadowOffsetX = shadow.offsetX || 0;
-        ctx.shadowOffsetY = shadow.offsetY || 0;
-        ctx.shadowBlur = shadow.blur || 0;
-        ctx.shadowColor = shadow.color || 'black';
+function applyAdditionalStroke(ctx: any, style: any) {
+    if (style.stroke) {
+        const { color, width } = style.stroke;
+        ctx.strokeStyle = color || 'black';
+        ctx.lineWidth = width || 1;
+        ctx.stroke();
     }
-  }
-}
+}

package/lib/canvas/utils/general functions.ts

@@ -27,38 +27,38 @@ export async function loadImages(imagePath: string) {
   }
 }
 
-export async function resizingImg(resizeOptions: any): Promise<any> { 
+export async function resizingImg(resizeOptions: any): Promise<Buffer> {
   try {
-    if (!resizeOptions.imagePath) {
-        throw new Error("Image path is required for resizing.");
-    }
-
-    let absoluteImagePath: string;
-
-    if (resizeOptions.imagePath.startsWith("http")) {
-
-        absoluteImagePath = resizeOptions.imagePath;
-    } else {
+      if (!resizeOptions.imagePath) {
+          throw new Error("Image path is required for resizing.");
+      }
 
-        absoluteImagePath = path.join(process.cwd(), resizeOptions.imagePath);
-    }
+      let absoluteImagePath;
+      
+      if (resizeOptions.imagePath.startsWith("http")) {
+          absoluteImagePath = resizeOptions.imagePath;
+      } else {
+          absoluteImagePath = path.join(process.cwd(), resizeOptions.imagePath);
+      }
 
-    const image = await loadImage(absoluteImagePath);
-    const canvas = createCanvas(resizeOptions.size?.width || 500, resizeOptions.size?.height || 500);
-    const ctx = canvas.getContext('2d');
+      let image = sharp(absoluteImagePath);
 
-    if (!ctx) {
-        throw new Error('Unable to get 2D rendering context from canvas');
-    }
+      const resizeOptionsForSharp = {
+          width: resizeOptions.size?.width || 500,
+          height: resizeOptions.size?.height || 500,
+          fit: resizeOptions.maintainAspectRatio ? sharp.fit.inside : sharp.fit.fill
+        };
 
-    ctx.drawImage(image, 0, 0, resizeOptions.size?.width || 500, resizeOptions.size?.height || 500);
+      const resizedBuffer = await image
+          .resize(resizeOptionsForSharp)
+          .png()
+          .toBuffer();
 
-    const resizedBuffer = canvas.toBuffer('image/png');
+      return resizedBuffer;
 
-    return resizedBuffer;
-} catch (error) {
-    console.error("Error resizing image:", error);
-    throw new Error("Failed to resize image");
+  } catch (error) {
+      console.error("Error resizing image:", error);
+      throw new Error("Failed to resize image");
   }
 }
 
@@ -97,36 +97,93 @@ export async function converter(imagePath: string, newExtension: string) {
   }
 }
 
-export async function applyColorFilters(imagePath: string, filterColor: string) {
-
-try {
+export async function applyColorFilters(imagePath: string, gradientOptions?: any, opacity: number = 1) {
+  try {
     let image: any;
 
     if (imagePath.startsWith("http")) {
-
-        const pngBuffer = await converter(imagePath, "png");
-        image = sharp(pngBuffer);
+      const pngBuffer = await converter(imagePath, "png");
+      image = sharp(pngBuffer);
     } else {
-
-        const imagePathResolved = path.join(process.cwd(), imagePath);
-        image = sharp(imagePathResolved);
+      const imagePathResolved = path.join(process.cwd(), imagePath);
+      image = await sharp(imagePathResolved);
     }
 
-    const hexColorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-    if (!hexColorRegex.test(filterColor)) {
-        throw new Error("Invalid color format. Only hex colors are supported.");
-    }
+    const metadata = await image.metadata();
+    let gradientImage: Buffer;
 
-    image.tint(filterColor);
+    if (typeof gradientOptions === 'string') {
+      gradientImage = createSolidColorImage(metadata.width, metadata.height, gradientOptions, opacity);
+    } else {
+      gradientImage = createGradientImage(metadata.width, metadata.height, gradientOptions, opacity);
+    }
 
-    const outputBuffer = await image.toBuffer();
+    const outputBuffer = await image
+      .composite([{ input: gradientImage, blend: 'over' }])
+      .toBuffer();
+      
     return outputBuffer;
-} catch (error) {
+  } catch (error) {
     console.error("Error applying color filter:", error);
     throw new Error("Failed to apply color filter");
   }
 }
 
+function createSolidColorImage(width: number, height: number, color: string, opacity: number) {
+  const solidColorCanvas = createCanvas(width, height);
+  const ctx = solidColorCanvas.getContext('2d');
+
+  ctx.globalAlpha = opacity;
+
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, width, height);
+
+  return solidColorCanvas.toBuffer('image/png');
+}
+
+function createGradientImage(width: number, height: number, options: any, opacity: number) {
+  const { type, colors } = options;
+
+  const gradientCanvas = createCanvas(width, height);
+  const ctx = gradientCanvas.getContext('2d');
+
+  if (type === 'linear') {
+    const gradient = ctx.createLinearGradient(
+      options.startX || 0,
+      options.startY || 0,
+      options.endX || width,
+      options.endY || height
+    );
+
+    colors.forEach(({ stop, color }: any) => {
+      gradient.addColorStop(stop, color);
+    });
+
+    ctx.fillStyle = gradient;
+  } else if (type === 'radial') {
+    const gradient = ctx.createRadialGradient(
+      options.startX || width / 2,
+      options.startY || height / 2,
+      options.startRadius || 0,
+      options.endX || width / 2,
+      options.endY || height / 2,
+      options.endRadius || Math.max(width, height)
+    );
+
+    colors.forEach(({ stop, color }: any) => {
+      gradient.addColorStop(stop, color);
+    });
+
+    ctx.fillStyle = gradient;
+  }
+
+  ctx.globalAlpha = opacity;
+
+  ctx.fillRect(0, 0, width, height);
+
+  return gradientCanvas.toBuffer('image/png');
+}
+
 export async function imgEffects(imagePath: string,  filters: any[]) {
     try {
         let jimpImage;

package/lib/canvas/utils/types.ts

@@ -1,3 +1,4 @@
+import { Canvas } from "@napi-rs/canvas"
 /**
  * Configuration option to decide the outputformate from ApexPainter
  * @param {type} default - 'buffer', other formates: url, blob, base64, dataURL, arraybuffer.
@@ -50,6 +51,7 @@ export interface CanvasConfig {
         offsetY?: number;
         blur?: number;
         opacity?: number;
+        borderRadius?: number | "circular"; 
     };
     rotation?: number;
     borderRadius?: number | "circular";
@@ -260,6 +262,13 @@ export interface CustomOptions {
         width?: number;
         color?: string;
         lineRadius?: number | string;
+        lineJoin?: 'round' | 'bevel' | 'miter';
+        lineCap?: 'butt' | 'round' | 'square';
+        singleLine?: boolean;
+        lineDash?: {
+            dashArray?: number[];
+            offset?: number;
+        };
         stroke?: {
             color?: string;
             width?: number;
@@ -475,4 +484,71 @@ export interface cropOptions {
     imageSource: string;
     crop: 'inner' | 'outer';
     radius: number | "circular"
-}
+}
+
+
+export interface GradientConfig{
+    type: 'linear' | 'radial';
+    startX?: number;
+    startY?: number;
+    endX?: number;
+    endY?: number;
+    startRadius?: number;
+    endRadius?: number;
+    angle?: number; // Optional: angle-based linear gradients
+    colors: {
+      stop: number;
+      color: string;
+    }[];
+  };
+  
+  export interface Frame{
+    backgroundColor?: string; // Static color
+    gradient?: GradientConfig;
+    pattern?: {
+        imagePath: string; // Path to the pattern image
+        repeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // Pattern repetition options
+    };
+    imagePath?: string; // Path to the image file
+    blendMode?: GlobalCompositeOperation; // Blending mode
+    transformations?: {
+        scaleX?: number;
+        scaleY?: number;
+        rotate?: number; // Rotation in degrees
+        translateX?: number;
+        translateY?: number;
+    };
+    duration?: number; // Custom duration for this frame
+    width?: number; // Custom width for the canvas
+    height?: number; // Custom height for the canvas
+    onDrawCustom?: (ctx: CanvasRenderingContext2D, canvas: Canvas) => void; // Custom draw callback
+  };
+  
+  
+  export interface PatternOptions {
+      type: 'dots' | 'stripes' | 'grid' | 'checkerboard' | 'custom';
+      color?: string; // Base color for the pattern
+      secondaryColor?: string;
+      x?: number;
+      y?: number;
+      width?: number;
+      height?: number;
+      size?: number; // Size of the pattern (e.g., dot radius, stripe width)
+      spacing?: number; // Spacing between patterns
+      angle?: number; // Angle for stripes (degrees)
+      customPatternImage?: string; // Path to a custom pattern image
+      backgroundColor?: string; // Single background color to fill the canvas
+      gradient?: GradientConfig; // Gradient options for background
+    }
+    
+    
+  export interface ExtractFramesOptions {
+    interval: number;
+    outputFormat?: 'jpg' | 'png';
+    frameSelection?: {
+        start?: number;
+        end?: number;
+    };
+    watermark?: string;
+  }
+  

package/lib/canvas/utils/utils.ts

@@ -10,7 +10,7 @@
 
 
 
-import { OutputFormat, CanvasConfig, ImageProperties, TextObject, ImageObject, GIFOptions, GIFResults, CustomOptions, cropOptions } from "./types";
+import { OutputFormat, CanvasConfig, ImageProperties, TextObject, ImageObject, GIFOptions, GIFResults, CustomOptions, cropOptions, GradientConfig, Frame, PatternOptions, ExtractFramesOptions } from "./types";
 import { radiusBorder } from "./radius";
 import { circularBorder } from "./circular";
 import { drawBackgroundColor, drawBackgroundGradient, customBackground } from "./bg";
@@ -62,5 +62,9 @@ export {
     cropOuter,
     detectColors,
     removeColor,
-    bgRemoval
+    bgRemoval,
+    GradientConfig,
+    Frame,
+    PatternOptions,
+    ExtractFramesOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexify.js",
-  "version": "4.5.30",
+  "version": "4.5.31",
   "description": "Unlimited AI models and Canvas library. Supports ts & js (supports front/back end).",
   "main": "./dist/index.js",
   "author": "zenith-79",
@@ -14,7 +14,8 @@
   },
   "files": [
     "lib",
-    "dist"
+    "dist",
+    "examples"
   ],
   "keywords": [
     "chat bot",
@@ -189,6 +190,17 @@
     "image converter",
     "converter",
     "canvas-filters",
+    "image mask",
+    "image animate",
+    "animate",
+    "gif",
+    "masks",
+    "mask",
+    "blend",
+    "image blend",
+    "custom drawing",
+    "frames",
+    "extract frames",
     "apexify",
     "apexify.js"
   ],
@@ -196,11 +208,11 @@
     "@google/generative-ai": "^0.14.1",
     "@iamtraction/google-translate": "^2.0.1",
     "@napi-rs/canvas": "^0.1.53",
-    "apexify.js": "^4.5.23",
     "api": "^6.1.2",
     "compromise": "^14.14.0",
     "csv-parse": "^5.5.6",
     "discord.js": "^14.15.3",
+    "fluent-ffmpeg": "^2.1.3",
     "gifencoder": "^2.0.1",
     "groq-sdk": "^0.5.0",
     "hercai": "^12.3.2",
@@ -209,13 +221,14 @@
     "pdf-parse": "^1.1.1",
     "sharp": "^0.33.4",
     "tesseract.js": "^5.1.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.5.3",
     "verse.db": "^2.2.15"
   },
   "devDependencies": {
+    "@types/fluent-ffmpeg": "^2.1.26",
     "@types/gifencoder": "^2.0.3",
     "@types/node": "^22.5.4",
-    "@types/pdf-parse": "^1.1.4"
+    "@types/pdf-parse": "^1.1.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2"
   }
 }