apexify.js 4.2.6 → 4.2.9

package/lib/canvas/ApexPainter.ts

@@ -26,31 +26,6 @@ export class ApexPainter {
     let canvasHeight: number = canvas.height || 500;
     let borderRadius: number | string = canvas.borderRadius || 0;
 
-    if (canvas.customBg) {
-
-        try {
-
-          if (canvas.customBg.startsWith('https' || 'http')) {
-            const response = await fetch(canvas.customBg);
-            if (!response.ok) {
-                throw new Error("Failed to fetch background image.");
-            }
-            const buffer = await response.arrayBuffer();
-            const image = await loadImage(Buffer.from(buffer));
-            canvasWidth = image.width;
-            canvasHeight = image.height;
-          } else {
-            const bgPath = path.join(process.cwd(), canvas.customBg);
-            const image = await loadImage(bgPath);
-            canvasWidth = image.width;
-            canvasHeight = image.height;
-          }
-
-        } catch (error) {
-            console.error('Error loading custom background image:', error);
-        }
-    }
-
     const canvasInstance = createCanvas(canvasWidth, canvasHeight);
     const ctx: any = canvasInstance.getContext('2d');
 
@@ -130,7 +105,8 @@ export class ApexPainter {
                   );
             }
 
-            drawText(ctx, mergedTextOptions);
+            const size = { width: existingImage.width, height: existingImage.height };
+            drawText(ctx, mergedTextOptions, size);
         }
 
         return canvas.toBuffer("image/png");
@@ -161,10 +137,6 @@ export class ApexPainter {
     }
 }
 
-  async crop(data: cropOptions): Promise<any> {
-
-  }
-
   async createGIF(images: ImageObject[], options: GIFOptions): Promise<GIFResults | any> {
     async function resizeImage(image: any, targetWidth: number, targetHeight: number) {
       const canvas = createCanvas(targetWidth, targetHeight);
@@ -575,8 +547,8 @@ export class ApexPainter {
     } catch (error: any) {
         throw new Error(error.message);
     }
-  
   }
+  
   public validHex(hexColor: string): any {
     const hexPattern = /^#[0-9a-fA-F]{6}$/;
     if (!hexPattern.test(hexColor)) {

package/lib/canvas/utils/bg.ts

@@ -73,14 +73,29 @@ export async function customBackground(ctx: any, canvas: CanvasConfig): Promise<
             }
 
             const image = await loadImage(imageBuffer);
+            const zoomScale = canvas.zoom?.scale || 1;
 
-            canvas.width = image.width;
-            canvas.height = image.height;
+            if (zoomScale < 0) throw new Error("Invalid scale. Scale can't be a -ve integer.");
 
-            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+            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 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;
+
+            ctx.drawImage(image, drawX, drawY, newWidth, newHeight);
 
         } catch (error: any) {
-            console.error('Error loading custom background image:', error);
+            console.error('Error loading custom background image:', error.message);
         }
     }
 }

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

@@ -254,9 +254,11 @@ export async function cropInner(options: cropOptions): Promise<any> {
             ctx.quadraticCurveTo(0, 0, options.radius, 0);
             ctx.closePath();
             ctx.clip();
-        } else if (options.radius !== null && options.radius !== 'circular' && typeof options.radius !== 'number'  ) {
+            // @ts-ignore
+        } else if (options.radius !== null && options.radius !== 'circular' && (typeof options.radius !== 'number' || options.radius < 0)) {
             throw new Error('The "radius" option can only be "circular" or a non-negative number.');
         }
+        
 
         ctx.drawImage(image, options.coordinates[0].from.x, options.coordinates[0].from.y, width, height, 0, 0, width, height);
 

package/lib/canvas/utils/imageProperties.ts

@@ -231,14 +231,13 @@ export function drawShape(ctx: any, shapeSettings: any) {
     }
 } else {
     if (gradient) {
-        // Call createGradient with correct coordinates
         const gradientFill = createGradient(
             ctx,
             gradient,
-            x, // startX
-            y, // startY
-            x + width, // endX
-            y + height, // endY
+            x, 
+            y,
+            x + width, 
+            y + height,
         );
         ctx.fillStyle = gradientFill;
     }

package/lib/canvas/utils/textProperties.ts

@@ -5,33 +5,88 @@ import { TextObject } from "./types";
  * @param ctx The canvas rendering context.
  * @param textOptions The options for the text.
  */
-export function drawText(ctx: any, textOptions: TextObject) {
+export function drawText(ctx: any, textOptions: TextObject, size: any) {
     ctx.save();
+    
+    if (textOptions.rotation && textOptions.rotation !== 0) {
+        ctx.translate(textOptions.x || 0, textOptions?.y || 0); 
+        ctx.rotate(textOptions.rotation * Math.PI / 180);
+    }
+
     ctx.font = `${textOptions.isBold ? 'bold ' : ''}${textOptions.fontSize || 16}px ${textOptions.fontName || "Arial"}`;
     ctx.textAlign = textOptions.textAlign || 'left';
     ctx.textBaseline = textOptions.textBaseline || 'alphabetic';
 
     if (textOptions.shadow) {
-        const { color, offsetX, offsetY, blur } = textOptions.shadow;
+        const { color, offsetX, offsetY, blur, opacity } = textOptions.shadow;
         ctx.shadowColor = color || "transparent";
         ctx.shadowOffsetX = offsetX || 0;
         ctx.shadowOffsetY = offsetY || 0;
         ctx.shadowBlur = blur || 0;
+        ctx.globalAlpha = opacity || null;
+    }
+
+    if (textOptions.opacity) {
+        if (textOptions.opacity > 1 || textOptions.opacity < 0) throw new Error("Text opacity Error: the value can't be smaller than 0 or bigger than 1.")
+        ctx.globalAlpha = textOptions.opacity;
     }
 
-    ctx.fillStyle = textOptions.color || 'darkgray';
+
+    if (textOptions.outlined) {
+        ctx.strokeStyle = textOptions.stroke && textOptions.stroke.color ? textOptions.stroke.color : textOptions.color;
+        ctx.lineWidth = textOptions.stroke && textOptions.stroke.width ? textOptions.stroke.width : 1;
+    } else {
+
+        if (textOptions.gradient) {
+            if (textOptions.gradient.type === 'linear') {
+                const gradient = ctx.createLinearGradient(
+                    textOptions.gradient?.startX || 0,
+                    textOptions.gradient?.startY || 10,
+                    textOptions.gradient?.endX || 20,
+                    textOptions.gradient?.endY || 30
+                    );
+
+                textOptions.gradient.colors.forEach(({ stop, color }) => {
+                    gradient.addColorStop(stop, color);
+                });
+
+                ctx.fillStyle = gradient;
+            } else if (textOptions.gradient.type === 'radial') {
+                const gradient = ctx.createRadialGradient(
+                    textOptions.gradient?.startX || 0,
+                    textOptions.gradient?.startY || 10,
+                    textOptions.gradient?.startRadius || 0,
+                    textOptions.gradient?.endX || 20,
+                    textOptions.gradient?.endY || 30,
+                    textOptions.gradient?.endRadius || 30
+                );
+        
+                textOptions.gradient.colors.forEach(({ stop, color }) => {
+                    gradient.addColorStop(stop, color);
+                });
+        
+                ctx.fillStyle = gradient;
+            } else {
+                throw new Error("Error Gradient: Invalid gradient type. Valid types: `radial` or `linear`.")
+            }
+        } else {
+            ctx.fillStyle = textOptions.color || 'darkgray';
+        }
+
+    }
 
     if (textOptions.maxWidth) {
         WrappedText(ctx, textOptions.text || 'Hello World', textOptions.x || 0, textOptions.y || 0, textOptions.maxWidth, textOptions);
     } else {
-        ctx.fillText(textOptions.text, textOptions.x, textOptions.y);
-    }
+        if (textOptions.outlined) {
+            ctx.strokeText(textOptions.text, textOptions.x, textOptions.y);
+        } else {
+            if (!textOptions.rotation) ctx.fillText(textOptions.text, textOptions.x, textOptions.y);
+            if (textOptions.rotation) ctx.fillText(textOptions.text, 0, 0);
 
-    if (textOptions.stroke && textOptions.stroke.color && textOptions.stroke.width) {
-        ctx.strokeStyle = textOptions.stroke.color;
-        ctx.lineWidth = textOptions.stroke.width;
-        ctx.strokeText(textOptions.text, textOptions.x, textOptions.y);
+        }
     }
+
     ctx.restore();
 }
 
@@ -48,21 +103,49 @@ export function WrappedText(ctx: any, text: string, x: number, y: number, maxWid
     const words = text.split(' ');
     let currentLine = '';
     const fontSize = textOptions.fontSize || 16;
+    const lineHeight = textOptions.lineHeight || fontSize;
+
+    ctx.save();
+
+    if (textOptions.outlined) {
+        ctx.strokeStyle = textOptions.stroke && textOptions.stroke.color ? textOptions.stroke.color : textOptions.color;
+        ctx.lineWidth = textOptions.stroke && textOptions.stroke.width ? textOptions.stroke.width : 1;
+    } else {
+        ctx.fillStyle = textOptions.color || 'darkgray';
+    }
+
+    if (textOptions.rotation && textOptions.rotation !== 0) {
+        ctx.translate(x, y);
+        ctx.rotate(textOptions.rotation * Math.PI / 180);
+        x = 0;
+        y = 0; 
+    }
+
     for (let n = 0; n < words.length; n++) {
         const testLine = currentLine + words[n] + ' ';
         const metrics = ctx.measureText(testLine);
         const testWidth = metrics.width;
 
         if (testWidth > maxWidth && n > 0) {
-            const adjustedY = y + (textOptions.lineHeight || fontSize) / 2;
-            ctx.fillText(currentLine.trim(), x, adjustedY);
+            const adjustedY = y + lineHeight;
+            if (textOptions.outlined) {
+                ctx.strokeText(currentLine.trim(), x, adjustedY);
+            } else {
+                ctx.fillText(currentLine.trim(), x, adjustedY);
+            }
             currentLine = words[n] + ' ';
-            y += textOptions.lineHeight || fontSize;
+            y += lineHeight;
         } else {
             currentLine = testLine;
         }
     }
 
-    const adjustedY = y + (textOptions.lineHeight || fontSize) / 2;
-    ctx.fillText(currentLine.trim(), x, adjustedY);
-  }
+    const adjustedY = y + lineHeight;
+    if (textOptions.outlined) {
+        ctx.strokeText(currentLine.trim(), x, adjustedY);
+    } else {
+        ctx.fillText(currentLine.trim(), x, adjustedY);
+    }
+
+    ctx.restore();
+}

package/lib/canvas/utils/types.ts

@@ -22,9 +22,14 @@ export interface CanvasConfig {
     x?: number;
     y?: number;
     customBg?: string;
-    colorBg?: string | 'transparent';
+    colorBg?: string;
+    zoom?: {
+        scale?: number;
+        x?: number;
+        y?: number;
+    };
     gradientBg?: {
-        type?: string | 'linear' | 'radial' | undefined;
+        type?: 'linear' | 'radial';
         startX?: number;
         startY?: number;
         startRadius?: number;
@@ -37,7 +42,7 @@ export interface CanvasConfig {
         color?: string;
         width?: number; 
         position?: number;
-        borderRadius?: number | string | "circular"; 
+        borderRadius?: number | "circular"; 
     };
     shadow?: {
         color?: string;
@@ -47,7 +52,7 @@ export interface CanvasConfig {
         opacity?: number;
     };
     rotation?: number;
-    borderRadius?: number | string | "circular";
+    borderRadius?: number | "circular";
 };
 
 /**
@@ -84,7 +89,7 @@ export interface ImageProperties {
     isFilled?: boolean;
     color?: string; 
     gradient?: {
-        type?: string | 'linear' | 'radial' | undefined;
+        type?: 'linear' | 'radial';
         startX?: number;
         startY?: number;
         startRadius?: number;
@@ -94,12 +99,12 @@ export interface ImageProperties {
         colors?: { stop?: number; color?: string }[]; 
     };
     rotation?: number; 
-    borderRadius?: number | string | "circular" ;
+    borderRadius?: number | "circular"
     stroke?: {
         color?: string;
         width?: number; 
         position?: number;
-        borderRadius?: number | string | "circular"; 
+        borderRadius?:  number | "circular"
     };
     shadow?: {
         color?: string; 
@@ -107,7 +112,7 @@ export interface ImageProperties {
         offsetY?: number; 
         blur?: number; 
         opacity?: number; 
-        borderRadius?: number | string | "circular"; 
+        borderRadius?: number | "circular"
     };
 };
 
@@ -122,8 +127,22 @@ export interface TextObject {
     color?: string;
     maxWidth?: number;
     lineHeight?: number;
-    textAlign?: string | "end" | "center" | "left" | "right" | "start";
-    textBaseline?: string | "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
+    textAlign?: "end" | "center" | "left" | "right" | "start" | "justify";
+    textBaseline?: "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
+    outlined?: boolean;
+    gradient?: {
+        type?: 'linear' | 'radial';
+        startX?: number;
+        startY?: number;
+        endX?: number;
+        endY?: number;
+        startRadius?: number;
+        endRadius?: number;
+        colors: {
+            stop: number;
+            color: string;
+        }[];
+    };
     shadow?: {
         color?: string;
         offsetX?: number;
@@ -135,6 +154,8 @@ export interface TextObject {
         color?: string;
         width?: number;
     };
+    rotation?: number;
+    opacity?: number;
 }
 
 /**
@@ -395,7 +416,7 @@ export interface LineChartConfig {
     };
     lineTension?: number[];
     grid?: {
-        type: 'vertical' | 'horizontal' | 'both' | string;
+        type: 'vertical' | 'horizontal' | 'both';
         color: string;
         width: number;
     };
@@ -428,6 +449,6 @@ export interface cropCoordinate {
 export interface cropOptions {
     coordinates: cropCoordinate[];
     imageSource: string;
-    crop: 'inner' | 'outer' | string;
-    radius: 'circular' | number | string;
+    crop: 'inner' | 'outer';
+    radius: number | "circular"
 }