apexify.js 4.6.2 → 4.7.0

package/lib/canvas/utils/Background/bg.ts

@@ -1,97 +1,211 @@
 import { loadImage, SKRSContext2D } from "@napi-rs/canvas";
-import { CanvasConfig } from '../types';
-import path from 'path';
+import { CanvasConfig } from "../types";
+import path from "path";
 
+interface ZoomConfig {
+    scale?: number;
+    x?: number;
+    y?: number;
+}
 
 /**
- * Draws a gradient background on the canvas.
- * No zoom logic is applied.
+ * Draws a gradient background on the canvas with optional zoom support.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function drawBackgroundGradient(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function drawBackgroundGradient(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     if (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;
-      if (type === 'linear' || type === undefined) {
-        gradient = ctx.createLinearGradient(startX, startY, endX, endY);
-      } else if (type === 'radial') {
-        gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
-      } else {
-        throw new Error('Unsupported gradient type.');
-      }
-  
-      for (const { stop, color } of colors) {
-        gradient.addColorStop(stop as number, color as string);
+        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;
+        if (type === "linear" || type === undefined) {
+            let finalStartX = startX, finalStartY = startY, finalEndX = endX, finalEndY = endY;
+
+            if (zoom) {
+                const scale = Math.max(1, zoom.scale || 1);
+                finalStartX = (zoom.x || 0) - (endX - startX) / (2 * scale);
+                finalStartY = (zoom.y || 0) - (endY - startY) / (2 * scale);
+                finalEndX = (zoom.x || 0) + (endX - startX) / (2 * scale);
+                finalEndY = (zoom.y || 0) + (endY - startY) / (2 * scale);
+            }
+
+            gradient = ctx.createLinearGradient(finalStartX, finalStartY, finalEndX, finalEndY);
+        } else if (type === "radial") {
+            gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
+        } else {
+            throw new Error("Unsupported gradient type.");
+        }
+
+        for (const { stop, color } of colors) {
+            gradient.addColorStop(stop as number, color as string);
+        }
+
+        if (blur) {
+          ctx.filter = `blur(${blur}px)`;
       }
-  
-      const canvasWidth = canvas.width || 500;
-      const canvasHeight = canvas.height || 500;
+
       ctx.fillStyle = gradient;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+      ctx.fillRect(0, 0, canvas.width || 500, canvas.height || 500);
+
+      ctx.filter = "none";
     }
 }
-  
+
 /**
- * Draws a solid background color on the canvas.
- * No zoom logic is applied.
+ * Draws a solid background color on the canvas with optional zoom effect.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function drawBackgroundColor(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function drawBackgroundColor(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     const canvasWidth = canvas.width || 500;
     const canvasHeight = canvas.height || 500;
-  
-    // Fill the entire area starting at (0,0) (assuming translation is handled elsewhere)
-    if (canvas.colorBg !== 'transparent') {
-      ctx.fillStyle = canvas.colorBg as string;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    ctx.save();
+
+
+    if (blur) {
+      ctx.filter = `blur(${blur}px)`;
+  }
+
+    if (zoom) {
+        const scale = Math.max(1, zoom.scale || 1);
+        const zoomedWidth = canvasWidth / scale;
+        const zoomedHeight = canvasHeight / scale;
+
+        ctx.scale(scale, scale);
+        ctx.translate((zoom.x || 0) + zoomedWidth / 2, (zoom.y || 0) + zoomedHeight / 2);
     }
+
+    if (canvas.colorBg !== "transparent") {
+        ctx.fillStyle = canvas.colorBg as string;
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    }
+
+    ctx.filter = "none"; 
+    ctx.restore();
 }
 
 /**
- * Draws a custom background image on the canvas.
- * No zoom logic is applied.
+ * Draws a custom background image on the canvas with optional zoom functionality.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function customBackground(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function customBackground(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     if (canvas.customBg) {
-      try {
-        let imageBuffer: string;
-  
-        if (canvas.customBg.startsWith('http')) {
-          imageBuffer = canvas.customBg;
-        } else {
-          imageBuffer = path.join(process.cwd(), canvas.customBg);
+        try {
+            let imageBuffer: string;
+
+            if (canvas.customBg.startsWith("http")) {
+                imageBuffer = canvas.customBg;
+            } else {
+                imageBuffer = path.join(process.cwd(), canvas.customBg);
+            }
+
+            const image = await loadImage(imageBuffer);
+            const imgWidth = image.width;
+            const imgHeight = image.height;
+            const canvasWidth = canvas.width || imgWidth;
+            const canvasHeight = canvas.height || imgHeight;
+
+            if (blur) {
+              ctx.filter = `blur(${blur}px)`;
+            }
+
+            if (zoom) {
+                const scale = Math.max(1, zoom.scale || 1);
+                const cropWidth = imgWidth / scale;
+                const cropHeight = imgHeight / scale;
+
+                let sx = (zoom.x || 0) - cropWidth / 2;
+                let sy = (zoom.y || 0) - cropHeight / 2;
+
+                sx = Math.max(0, Math.min(sx, imgWidth - cropWidth));
+                sy = Math.max(0, Math.min(sy, imgHeight - cropHeight));
+
+                ctx.drawImage(image, sx, sy, cropWidth, cropHeight, 0, 0, canvasWidth, canvasHeight);
+            } else {
+                ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+            }
+            ctx.filter = "none";
+        } catch (error: any) {
+            console.error("Error loading custom background image:", error.message);
         }
+    }
+}
+
+export function backgroundRadius(
+    ctx: SKRSContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    borderRadius: number | "circular",
+    borderPosition: string = "all"
+  ): void {
+    ctx.beginPath();
   
-        const image = await loadImage(imageBuffer);
+    if (borderRadius === "circular") {
+      const circleRadius = Math.min(width, height) / 2;
+      ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
+    } else if (typeof borderRadius === "number" && borderRadius > 0) {
+      const br: number = Math.min(borderRadius, width / 2, height / 2);
+      const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
   
-        // Use canvas dimensions without additional x/y translation,
-        // because createCanvas already translated the context.
-        const canvasWidth = canvas.width || image.width;
-        const canvasHeight = canvas.height || image.height;
+      const roundTopLeft = selectedPositions.has("all") || selectedPositions.has("top-left") || (selectedPositions.has("top") && selectedPositions.has("left"));
+      const roundTopRight = selectedPositions.has("all") || selectedPositions.has("top-right") || (selectedPositions.has("top") && selectedPositions.has("right"));
+      const roundBottomRight = selectedPositions.has("all") || selectedPositions.has("bottom-right") || (selectedPositions.has("bottom") && selectedPositions.has("right"));
+      const roundBottomLeft = selectedPositions.has("all") || selectedPositions.has("bottom-left") || (selectedPositions.has("bottom") && selectedPositions.has("left"));
   
-        // Draw the image so that it fills the canvas area relative to (0,0)
-        ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+      const tl = roundTopLeft ? br : 0;
+      const tr = roundTopRight ? br : 0;
+      const brR = roundBottomRight ? br : 0;
+      const bl = roundBottomLeft ? br : 0;
   
-      } catch (error: any) {
-        console.error('Error loading custom background image:', error.message);
-      }
+      ctx.moveTo(x + tl, y);
+      ctx.lineTo(x + width - tr, y);
+      if (tr > 0) ctx.arc(x + width - tr, y + tr, tr, -Math.PI / 2, 0, false);
+      ctx.lineTo(x + width, y + height - brR);
+      if (brR > 0) ctx.arc(x + width - brR, y + height - brR, brR, 0, Math.PI / 2, false);
+      ctx.lineTo(x + bl, y + height);
+      if (bl > 0) ctx.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
+      ctx.lineTo(x, y + tl);
+      if (tl > 0) ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
+    } else {
+      ctx.rect(x, y, width, height);
     }
-}  
+  
+    ctx.closePath();
+    ctx.clip();
+  }
+  

package/lib/canvas/utils/Custom/customLines.ts

@@ -1,3 +1,4 @@
+import { createGradient } from "../Image/imageProperties";
 import { CustomOptions } from "../types";
 
 export function customLines(ctx: any, options: CustomOptions[]) {
@@ -19,7 +20,7 @@ export function customLines(ctx: any, options: CustomOptions[]) {
 
         if (!isSingleLine && inSingleLineSequence) {
             ctx.stroke();
-            applyAdditionalStroke(ctx, currentStyle);
+            applyStroke(ctx, currentStyle, startCoordinates, endCoordinates);
             inSingleLineSequence = false;
             currentStyle = null;
         }
@@ -37,7 +38,13 @@ export function customLines(ctx: any, options: CustomOptions[]) {
 
         const appliedStyle = inSingleLineSequence ? currentStyle : lineStyle;
         ctx.lineWidth = appliedStyle?.width || 1;
-        ctx.strokeStyle = appliedStyle?.color || 'black';
+
+        if (appliedStyle?.gradient) {
+            ctx.strokeStyle = createGradient(ctx, appliedStyle.gradient, start.x, start.y, endCoordinates.x, endCoordinates.y);
+        } else {
+            ctx.strokeStyle = appliedStyle?.color || 'black';
+        }
+
         ctx.lineJoin = appliedStyle?.lineJoin || 'miter';
         ctx.lineCap = appliedStyle?.lineCap || 'butt';
 
@@ -48,31 +55,36 @@ export function customLines(ctx: any, options: CustomOptions[]) {
             ctx.setLineDash([]);
         }
 
-        if (typeof appliedStyle?.lineRadius === 'number') {
-            const borderRadius = appliedStyle.lineRadius;
+        if (typeof appliedStyle?.lineRadius === 'number' && appliedStyle.lineRadius > 0) {
+            const radius = 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') {
+
+            ctx.lineCap = "round";
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc(start.x, start.y, radius, angle + Math.PI / 2, angle - Math.PI / 2, true);
+            ctx.arc(endCoordinates.x, endCoordinates.y, radius, angle - Math.PI / 2, angle + Math.PI / 2, false);
+            ctx.fill();
+        } 
+        
+        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.beginPath();
+            ctx.arcTo(start.x, start.y, endCoordinates.x, endCoordinates.y, length / 2);
+            ctx.arcTo(endCoordinates.x, endCoordinates.y, start.x, start.y, length / 2);
             ctx.closePath();
+            ctx.stroke();
         }
 
         if (!inSingleLineSequence || i === options.length - 1) {
             ctx.stroke();
-            applyAdditionalStroke(ctx, appliedStyle);
+            applyStroke(ctx, appliedStyle, startCoordinates, endCoordinates);
         }
 
         previousEndCoordinates = endCoordinates;
@@ -84,11 +96,32 @@ export function customLines(ctx: any, options: CustomOptions[]) {
     }
 }
 
-function applyAdditionalStroke(ctx: any, style: any) {
+function applyStroke(ctx: any, style: any, start: any, end: any) {
     if (style.stroke) {
-        const { color, width } = style.stroke;
-        ctx.strokeStyle = color || 'black';
-        ctx.lineWidth = width || 1;
+        const { color, width, gradient, lineRadius, lineCap } = style.stroke;
+        const prevStrokeStyle = ctx.strokeStyle;
+        const prevLineWidth = ctx.lineWidth;
+        const prevLineCap = ctx.lineCap;
+
+        if (gradient) {
+            ctx.strokeStyle = createGradient(ctx, gradient, start.x, start.y, end.x, end.y);
+        } else {
+            ctx.strokeStyle = color || prevStrokeStyle;
+        }
+
+        ctx.lineWidth = width || prevLineWidth;
+        ctx.lineCap = lineCap || prevLineCap; 
         ctx.stroke();
+
+        if (typeof lineRadius === 'number' && lineRadius > 0) {
+            ctx.beginPath();
+            ctx.arc(start.x, start.y, lineRadius, 0, Math.PI * 2);
+            ctx.arc(end.x, end.y, lineRadius, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        ctx.strokeStyle = prevStrokeStyle;
+        ctx.lineWidth = prevLineWidth;
+        ctx.lineCap = prevLineCap;
     }
 }

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

@@ -31,7 +31,6 @@ export async function loadImages(imagePath: string) {
 
 /**
  * Resizes an image using Sharp with additional options for quality, kernel, and withoutEnlargement.
- * 
  * @param resizeOptions - The options for resizing.
  * @returns A Promise that resolves with the resized image as a Buffer.
  */
@@ -41,14 +40,8 @@ export async function resizingImg(resizeOptions: ResizeOptions): Promise<Buffer>
       throw new Error("Image path is required for resizing.");
     }
 
-    let absoluteImagePath: string;
-    if (resizeOptions.imagePath.startsWith("http")) {
-      absoluteImagePath = resizeOptions.imagePath;
-    } else {
-      absoluteImagePath = path.join(process.cwd(), resizeOptions.imagePath);
-    }
-
-    const image = sharp(absoluteImagePath);
+    // ✅ Use `loadImages()` instead of handling the fetch manually
+    const image = await loadImages(resizeOptions.imagePath);
 
     const resizeOptionsForSharp: sharp.ResizeOptions = {
       width: resizeOptions.size?.width || 500,
@@ -60,21 +53,18 @@ export async function resizingImg(resizeOptions: ResizeOptions): Promise<Buffer>
 
     const quality = resizeOptions.quality ?? 90;
 
-    const resizedBuffer: Buffer =  await image
+    const resizedBuffer: Buffer = await image
       .resize(resizeOptionsForSharp)
       .png({ quality })
       .toBuffer();
-  
 
     return resizedBuffer;
-
   } catch (error) {
     console.error("Error resizing image:", error);
     throw new Error("Failed to resize image");
   }
 }
 
-
 export async function converter(imagePath: string, newExtension: string) {
   try {
       const validExtensions: (keyof sharp.FormatEnum)[] = ['jpeg', 'png', 'webp', 'tiff', 'gif', 'avif', 'heif', 'raw', 'pdf', 'svg'];
@@ -382,53 +372,55 @@ export async function cropOuter(options: cropOptions): Promise<Buffer> {
 }
 
 
+/**
+ * Detects dominant colors from an image.
+ * 
+ * @param imagePath - Local path or URL of the image.
+ * @returns A sorted array of dominant colors with their frequency.
+ */
 export async function detectColors(imagePath: string): Promise<{ color: string; frequency: string }[]> {
   try {
       let image: any;
+
       if (imagePath.startsWith('http')) {
           const response = await fetch(imagePath);
-          if (!response.ok) {
-              throw new Error("Failed to fetch image.");
-          }
+          if (!response.ok) throw new Error(`Failed to fetch image: ${response.statusText}`);
           const buffer = await response.arrayBuffer();
           image = await loadImage(Buffer.from(buffer));
       } else {
-          const localImagePath = path.join(process.cwd(), imagePath);
+          const localImagePath = path.resolve(imagePath);
           image = await loadImage(localImagePath);
       }
 
       const canvas = createCanvas(image.width, image.height);
-      const ctx = canvas.getContext('2d') as any;
-
+      const ctx = canvas.getContext('2d');
       ctx.drawImage(image, 0, 0, image.width, image.height);
 
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
 
       const colorFrequency: { [color: string]: number } = {};
-
       for (let i = 0; i < data.length; i += 4) {
-          const red = data[i];
-          const green = data[i + 1];
-          const blue = data[i + 2];
-
-          const color = `${red},${green},${blue}`;
+          const [r, g, b, a] = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+          if (a < 50) continue;
 
+          const color = `${r},${g},${b}`;
           colorFrequency[color] = (colorFrequency[color] || 0) + 1;
       }
 
       const totalPixels = canvas.width * canvas.height;
 
       const dominantColors = Object.entries(colorFrequency)
-          .filter(([color, frequency]: [string, number]) => (frequency / totalPixels) * 100 >= 2)
-          .map(([color, frequency]: [string, number]) => ({
+          .map(([color, frequency]) => ({
               color,
               frequency: ((frequency / totalPixels) * 100).toFixed(2),
-          }));
+          }))
+          .filter(colorObj => parseFloat(colorObj.frequency) >= 0.1)
+          .sort((a, b) => parseFloat(b.frequency) - parseFloat(a.frequency));
 
       return dominantColors;
   } catch (error) {
-      console.error('Error:', error);
+      console.error("❌ Error detecting colors:", error);
       return [];
   }
 }