apexify.js 4.6.2 → 4.6.3

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 [];
   }
 }