apexify.js 4.5.30 → 4.5.31

package/lib/canvas/ApexPainter.ts

@@ -1,27 +1,25 @@
-import { createCanvas, loadImage, GlobalFonts, Image } from "@napi-rs/canvas";
+import { createCanvas, loadImage, GlobalFonts, Image, Canvas  } from "@napi-rs/canvas";
 import GIFEncoder from "gifencoder";
-import { PassThrough, Writable} from "stream";
+import ffmpeg from 'fluent-ffmpeg';
+import { PassThrough} from "stream";
+import axios from 'axios';
 import fs from "fs";
 import path from "path";
 import { OutputFormat, CanvasConfig, TextObject, ImageProperties, ImageObject, GIFOptions, GIFResults, CustomOptions, cropOptions,
-     drawBackgroundGradient, drawBackgroundColor, customBackground, circularBorder, radiusBorder, customLines, 
-     applyRotation, applyStroke, applyShadow, imageRadius, drawShape, drawText, 
-     converter, resizingImg, applyColorFilters, imgEffects, verticalBarChart, pieChart, lineChart, cropInner, cropOuter, bgRemoval, detectColors, removeColor, 
-     dataURL,
-     base64,
-     arrayBuffer,
-     blob,
-     url
+     drawBackgroundGradient, drawBackgroundColor, customBackground, circularBorder, radiusBorder, customLines, applyRotation, applyStroke,
+     applyShadow, imageRadius, drawShape, drawText, converter, resizingImg, applyColorFilters, imgEffects,verticalBarChart, pieChart,
+     lineChart, cropInner, cropOuter, bgRemoval, detectColors, removeColor, dataURL, base64, arrayBuffer, blob, url, GradientConfig, Frame,
+     PatternOptions, ExtractFramesOptions
     } from "./utils/utils";
 
-
   interface CanvasResults {
     buffer: Buffer;
     canvas: CanvasConfig;
   }
+  
 export class ApexPainter {
   private format?: OutputFormat;
-  
+
   constructor({ type }: OutputFormat = { type: 'buffer' }) {
     this.format = { type: type || 'buffer' };
   }
@@ -61,20 +59,26 @@ export class ApexPainter {
     return { buffer: canvasInstance.toBuffer('image/png'), canvas }
   }
 
-    async createImage(images: ImageProperties[], canvasBuffer: CanvasResults): Promise<Buffer> {
+    async createImage(images: ImageProperties[], canvasBuffer: CanvasResults | Buffer): Promise<Buffer> {
 
       if (!Array.isArray(images)) {
         images = [images];
       }
       
-        if (!canvasBuffer.buffer) {
-            throw new Error('You need to provide your canvasConfig. Check documentation if you don\'t know.');
-        }
-        const existingCanvas: any = await loadImage(canvasBuffer.buffer);
-        
-        if (!existingCanvas) {
-            throw new Error('Either buffer or canvasConfig is an empty background with no properties');
-        }
+      let existingCanvas: any;
+    
+      if (Buffer.isBuffer(canvasBuffer)) {
+          existingCanvas = await loadImage(canvasBuffer);
+      } else if (canvasBuffer && canvasBuffer.buffer) {
+          existingCanvas = await loadImage(canvasBuffer.buffer);
+      } else {
+          throw new Error('Invalid canvasBuffer provided, should be Buffer or CanvasResults object with buffer');
+      }
+
+      
+      if (!existingCanvas) {
+        throw new Error('Unable to load image from buffer');
+      }
 
         const canvas = createCanvas(existingCanvas.width, existingCanvas.height);
         const ctx = canvas.getContext('2d');
@@ -92,11 +96,26 @@ export class ApexPainter {
         return canvas.toBuffer('image/png');
     }
 
-  async createText(textOptionsArray: TextObject[], buffer: CanvasResults): Promise<Buffer> {
+  async createText(textOptionsArray: TextObject[], buffer: CanvasResults | Buffer ): Promise<Buffer> {
     try {
-        const existingImage = await loadImage(buffer.buffer);
 
-        if (!existingImage) throw new Error("Invalid image buffer. Make sure to pass a valid canvas buffer.");
+      if (!Array.isArray(textOptionsArray)) {
+        textOptionsArray = [textOptionsArray];
+      }
+
+        let existingImage: any;
+        
+        if (Buffer.isBuffer(buffer)) {
+          existingImage = await loadImage(buffer);
+        } else if (buffer && buffer.buffer) {
+          existingImage = await loadImage(buffer.buffer);
+        } else {
+          throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+        }
+
+        if (!existingImage) {
+          throw new Error('Unable to load image from buffer');
+        }
 
         const canvas = createCanvas(existingImage.width, existingImage.height);
         const ctx = canvas.getContext("2d");
@@ -126,298 +145,161 @@ export class ApexPainter {
   }
 
 
-  async createCustom(buffer: CanvasResults, options: CustomOptions[]): Promise<Buffer> {
+
+  async createCustom(options: CustomOptions[], buffer: CanvasResults | Buffer, ): Promise<Buffer> {
     try {
-        const existingImage = await loadImage(buffer.buffer);
 
-        if (!existingImage) throw new Error("Invalid image buffer. Make sure to pass a valid canvas buffer.");
+      if (!Array.isArray(options)) {
+        options = [options];
+      }
 
-        const canvas = createCanvas(existingImage.width, existingImage.height);
-        const ctx = canvas.getContext("2d");
+      let existingImage: any;
+        
+      if (Buffer.isBuffer(buffer)) {
+        existingImage = await loadImage(buffer);
+      } else if (buffer && buffer.buffer) {
+        existingImage = await loadImage(buffer.buffer);
+      } else {
+        throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+      }
 
-        ctx.drawImage(existingImage, 0, 0);
+      if (!existingImage) {
+        throw new Error('Unable to load image from buffer');
+      }
 
-        customLines(ctx, options)
+      const canvas = createCanvas(existingImage.width, existingImage.height);
+      const ctx = canvas.getContext("2d");
 
-        return canvas.toBuffer("image/png");
+      ctx.drawImage(existingImage, 0, 0);
+
+      customLines(ctx, options);
+
+      return canvas.toBuffer("image/png");
     } catch (error) {
         console.error("Error creating custom image:", error);
         throw new Error("Failed to create custom image");
     }
 }
 
-  async createGIF(images: ImageObject[], options: GIFOptions): Promise<GIFResults | any> {
-    async function resizeImage(image: any, targetWidth: number, targetHeight: number) {
+async createGIF(gifFrames: { background: string; duration: number }[], options: GIFOptions): Promise<GIFResults | any> {
+  async function resizeImage(image: any, targetWidth: number, targetHeight: number) {
       const canvas = createCanvas(targetWidth, targetHeight);
       const ctx = canvas.getContext("2d");
       ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
       return canvas;
-    }
+  }
 
-    function createOutputStream(outputFile: any): fs.WriteStream {
+  function createOutputStream(outputFile: string): fs.WriteStream {
       return fs.createWriteStream(outputFile);
   }
 
-    function createBufferStream(): Writable & { getBuffer: () => Buffer } {
+  function createBufferStream() {
       const bufferStream = new PassThrough();
       const chunks: Buffer[] = [];
-    
+  
       bufferStream.on('data', (chunk: Buffer) => {
-        chunks.push(chunk);
+          chunks.push(chunk);
       });
-    
-      const customBufferStream = bufferStream as unknown as Writable & { getBuffer: () => Buffer };
-      customBufferStream.getBuffer = function(): Buffer {
-        return Buffer.concat(chunks);
-      };
-    
-      return customBufferStream;
-    }
-    
-    function validateOptions(options: any) {
-      if (options.outputFormat === "file" && !options.outputFile) {
-        throw new Error(
-          "Output file path is required when using file output format.",
-        );
-      }
-
-      if (
-        options.repeat !== undefined &&
-        (typeof options.repeat !== "number" || options.repeat < 0)
-      ) {
-        throw new Error("Repeat must be a non-negative number or undefined.");
-      }
+  
+      return {
+          ...bufferStream,
+          getBuffer: function (): Buffer {
+              return Buffer.concat(chunks);
+          }
+      } as any;
+  }
 
-      if (
-        options.quality !== undefined &&
-        (typeof options.quality !== "number" ||
-          options.quality < 1 ||
-          options.quality > 20)
-      ) {
-        throw new Error(
-          "Quality must be a number between 1 and 20 or undefined.",
-        );
+  function validateOptions(options: GIFOptions) {
+      if (options.outputFormat === "file" && !options.outputFile) {
+          throw new Error("Output file path is required when using file output format.");
       }
-
-      if (options.canvasSize) {
-        if (
-          options.canvasSize.width !== undefined &&
-          (!Number.isInteger(options.canvasSize.width) ||
-            options.canvasSize.width <= 0)
-        ) {
-          throw new Error(
-            "Canvas width must be a positive integer or undefined.",
-          );
-        }
-
-        if (
-          options.canvasSize.height !== undefined &&
-          (!Number.isInteger(options.canvasSize.height) ||
-            options.canvasSize.height <= 0)
-        ) {
-          throw new Error(
-            "Canvas height must be a positive integer or undefined.",
-          );
-        }
+      if (options.repeat !== undefined && (typeof options.repeat !== "number" || options.repeat < 0)) {
+          throw new Error("Repeat must be a non-negative number or undefined.");
       }
-
-      if (
-        options.delay !== undefined &&
-        (!Number.isInteger(options.delay) || options.delay <= 0)
-      ) {
-        throw new Error("Delay must be a positive integer or undefined.");
+      if (options.quality !== undefined && (typeof options.quality !== "number" || options.quality < 1 || options.quality > 20)) {
+          throw new Error("Quality must be a number between 1 and 20 or undefined.");
       }
-
-      if (
-        options.watermark !== undefined &&
-        typeof options.watermark !== "boolean"
-      ) {
-        throw new Error("Watermark must be a boolean or undefined.");
+      if (options.watermark && typeof options.watermark.enable !== "boolean") {
+          throw new Error("Watermark must be a boolean or undefined.");
       }
-
-      if (options.textOverlay !== undefined) {
-        if (
-          !options.textOverlay.text ||
-          typeof options.textOverlay.text !== "string"
-        ) {
-          throw new Error(
-            "Text overlay text is required and must be a string.",
-          );
-        }
-
-        if (
-          options.textOverlay.fontName !== undefined &&
-          typeof options.textOverlay.fontName !== "string"
-        ) {
-          throw new Error(
-            "Text overlay fontName must be a string or undefined.",
-          );
-        }
-
-        if (
-          options.textOverlay.fontPath !== undefined &&
-          typeof options.textOverlay.fontPath !== "string"
-        ) {
-          throw new Error(
-            "Text overlay fontPath must be a string or undefined.",
-          );
-        }
-
-        if (
-          options.textOverlay.fontSize !== undefined &&
-          (!Number.isInteger(options.textOverlay.fontSize) ||
-            options.textOverlay.fontSize <= 0)
-        ) {
-          throw new Error(
-            "Text overlay fontSize must be a positive integer or undefined.",
-          );
-        }
-
-        if (
-          options.textOverlay.fontColor !== undefined &&
-          typeof options.textOverlay.fontColor !== "string"
-        ) {
-          throw new Error(
-            "Text overlay fontColor must be a string or undefined.",
-          );
-        }
-      }
-    }
-    function validateImageObject(imageObject: any) {
-      return (
-        imageObject &&
-        typeof imageObject === "object" &&
-        "source" in imageObject &&
-        "isRemote" in imageObject
-      );
-    }
-
-    function validateImages(images: any) {
-      if (!Array.isArray(images)) {
-        throw new Error('The "images" parameter must be an array.');
-      }
-
-      if (images.length === 0) {
-        throw new Error(
-          'The "images" array must contain at least one image object.',
-        );
-      }
-
-      for (const imageObject of images) {
-        if (!validateImageObject(imageObject)) {
-          throw new Error(
-            'Each image object must have "source" and "isRemote" properties.',
-          );
-        }
+      if (options.textOverlay) {
+          const textOptions = options.textOverlay;
+          if (!textOptions.text || typeof textOptions.text !== "string") {
+              throw new Error("Text overlay text is required and must be a string.");
+          }
+          if (textOptions.fontSize !== undefined && (!Number.isInteger(textOptions.fontSize) || textOptions.fontSize <= 0)) {
+              throw new Error("Text overlay fontSize must be a positive integer or undefined.");
+          }
+          if (textOptions.fontColor !== undefined && typeof textOptions.fontColor !== "string") {
+              throw new Error("Text overlay fontColor must be a string or undefined.");
+          }
       }
-    }
+  }
 
-    try {
+  try {
       validateOptions(options);
-      validateImages(images);
-
+  
       const canvasWidth = options.width || 1200;
       const canvasHeight = options.height || 1200;
 
       const encoder = new GIFEncoder(canvasWidth, canvasHeight);
-      const outputStream = options.outputFile
-        ? createOutputStream(options.outputFile)
-        : createBufferStream();
+      const outputStream = options.outputFile ? createOutputStream(options.outputFile) : createBufferStream();
       
-      // @ts-ignore: Ignore type checking for this line
       encoder.createReadStream().pipe(outputStream);
       
       encoder.start();
       encoder.setRepeat(options.repeat || 0);
       encoder.setQuality(options.quality || 10);
-      encoder.setDelay(options.delay || 3000);
-      
+
       const canvas = createCanvas(canvasWidth, canvasHeight);
-      const ctx = canvas.getContext("2d");
-      
-      for (const imageInfo of images) {
-        const image = imageInfo.isRemote
-          ? await loadImage(imageInfo.source)
-          : await loadImage(imageInfo.source);
-      
-        const resizedImage = await resizeImage(
-          image,
-          canvasWidth,
-          canvasHeight,
-        );
-      
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(resizedImage, 0, 0);
-      
-        if (options.watermark?.enable) {
-          const watermark = await loadImage(options.watermark?.url);
-          if (!watermark) throw new Error("Invalid watermark url");
-          ctx.drawImage(watermark, 10, canvasHeight - watermark.height - 10);
-        }
-      
-        if (options.textOverlay) {
-          const textOptions = options.textOverlay;
-          const fontPath = textOptions.fontPath;
-          const fontName = textOptions.fontName || "Arial";
-          const fontSize = textOptions.fontSize || 20;
-          const fontColor = textOptions.fontColor || "white";
-          const x = textOptions.x || 10;
-          const y = textOptions.y || 30;
+      const ctx:any = canvas.getContext("2d");
       
-          if (fontPath) {
-            GlobalFonts.registerFromPath(
-              path.join(options.basDir, fontPath),
-              fontName,
-            );
+      for (const frame of gifFrames) {
+          const image = await loadImage(frame.background);
+          const resizedImage = await resizeImage(image, canvasWidth, canvasHeight);
+          
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(resizedImage, 0, 0);
+          
+          if (options.watermark?.enable) {
+              const watermark = await loadImage(options.watermark.url);
+              ctx.drawImage(watermark, 10, canvasHeight - watermark.height - 10);
           }
-      
-          ctx.font = `${fontSize}px ${fontName}`;
-          ctx.fillStyle = fontColor;
-          ctx.fillText(textOptions.text, x, y);
-        }
-      
-        encoder.addFrame(ctx as any);
+          
+          if (options.textOverlay) {
+              ctx.font = `${options.textOverlay.fontSize || 20}px Arial`;
+              ctx.fillStyle = options.textOverlay.fontColor || "white";
+              ctx.fillText(options.textOverlay.text, options.textOverlay.x || 10, options.textOverlay.y || 30);
+          }
+
+          encoder.setDelay(frame.duration);
+          encoder.addFrame(ctx);
       }
       
       encoder.finish();
       outputStream.end();
+      
       if (options.outputFormat === "file") {
-        if (!options.outputFile) {
-          throw new Error("Please provide a valid file path");
-        }
-        await new Promise((resolve) => outputStream.on("finish", resolve));
+          await new Promise((resolve) => outputStream.on("finish", resolve));
       } else if (options.outputFormat === "base64") {
-        outputStream.on("finish", () => {
-        });
-      
-        if ('getBuffer' in outputStream) {
-          return outputStream.getBuffer().toString("base64");
-        } else {
-          throw new Error("outputStream does not have getBuffer method");
-        }
+          if ('getBuffer' in outputStream) {
+              return outputStream.getBuffer().toString("base64");
+          }
       } else if (options.outputFormat === "attachment") {
-        outputStream.on("finish", () => {
-        });
-      
-        const gifStream = encoder.createReadStream();
-        return [{ attachment: gifStream, name: "gif.js" }];
+          const gifStream = encoder.createReadStream();
+          return [{ attachment: gifStream, name: "gif.js" }];
       } else if (options.outputFormat === "buffer") {
-        outputStream.on("finish", () => {
-        });
-        if ('getBuffer' in outputStream) {
-          return outputStream.getBuffer();
-        } else {
-          throw new Error("outputStream does not have getBuffer method");
-        }
+          if ('getBuffer' in outputStream) {
+              return outputStream.getBuffer();
+          }
       } else {
-        throw new Error(
-          "Error: Please provide a valid format: 'buffer', 'base64', 'attachment', or 'output/file/path'.",
-        );
+          throw new Error("Invalid output format. Supported formats are 'file', 'base64', 'attachment', and 'buffer'.");
       }
-    } catch (e: any) {
+  } catch (e: any) {
       console.error(e.message);
-    }
+      throw e; // Re-throw the error after logging
   }
+}
 
   async resize(resizeOptions: { imagePath: string | Buffer; size: { width: number; height: number } }) {
     return resizingImg(resizeOptions)
@@ -431,8 +313,8 @@ export class ApexPainter {
     return imgEffects(imagePath, filters)
   }
 
-  async colorsFilter(imagePath: string, filterColor: string) {
-    return applyColorFilters(imagePath, filterColor)
+  async colorsFilter(imagePath: string, filterColor: any, opacity?: number) {
+    return applyColorFilters(imagePath, filterColor, opacity)
   }
 
   async colorAnalysis(imagePath: string) {
@@ -447,6 +329,49 @@ export class ApexPainter {
     return bgRemoval(imageURL, apiKey)
   }
 
+  async blend(
+    layers: {
+      image: string | Buffer; 
+      blendMode: 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 
+                 'destination-over' | 'destination-in' | 'destination-out' | 
+                 'destination-atop' | 'lighter' | 'copy' | 'xor' | 
+                 'multiply' | 'screen' | 'overlay' | 'darken' | 
+                 'lighten' | 'color-dodge' | 'color-burn' | 
+                 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 
+                 'hue' | 'saturation' | 'color' | 'luminosity';
+      position?: { x: number; y: number }; 
+      opacity?: number; 
+    }[],
+    baseImageBuffer: Buffer
+  ): Promise<Buffer> {
+    try {
+      // Load the base image
+      const baseImage = await loadImage(baseImageBuffer);
+      const canvas = createCanvas(baseImage.width, baseImage.height);
+      const ctx = canvas.getContext('2d');
+  
+      // Draw the base image
+      ctx.drawImage(baseImage, 0, 0);
+  
+      // Process each layer
+      for (const layer of layers) {
+        const layerImage = await loadImage(layer.image);
+        ctx.globalAlpha = layer.opacity !== undefined ? layer.opacity : 1.0; 
+  
+        ctx.globalCompositeOperation = layer.blendMode;
+        ctx.drawImage(layerImage, layer.position?.x || 0, layer.position?.y || 0);
+      }
+  
+      ctx.globalAlpha = 1.0;
+      ctx.globalCompositeOperation = 'source-over'; 
+  
+      return canvas.toBuffer('image/png');
+    } catch (error) {
+      console.error('Error creating layered composition:', error);
+      throw new Error('Failed to create layered composition');
+    }
+  }  
+
   async createChart(data: any, type: { chartType: string, chartNumber: number}) {
 
     if (!data || Object.keys(data).length === 0) {
@@ -558,8 +483,486 @@ export class ApexPainter {
         ctx.globalAlpha = 1.0;
     }
 }
+async extractFrames(videoSource: string | Buffer, options: ExtractFramesOptions): Promise<ImageObject[]> {
+  const frames: ImageObject[] = [];
+  const frameDir = path.join(__dirname, 'frames');
+
+  if (!fs.existsSync(frameDir)) {
+      fs.mkdirSync(frameDir);
+  }
+
+  const videoPath = typeof videoSource === 'string' ? videoSource : path.join(frameDir, 'temp-video.mp4');
+
+  if (Buffer.isBuffer(videoSource)) {
+      fs.writeFileSync(videoPath, videoSource);
+  } else if (videoSource.startsWith('http')) {
+      await axios({
+          method: 'get',
+          url: videoSource,
+          responseType: 'arraybuffer'
+      })
+      .then((response) => {
+          fs.writeFileSync(videoPath, response.data);
+      })
+      .catch(err => {
+          throw new Error(`Error downloading video: ${err.message}`);
+      });
+  } else if (!fs.existsSync(videoPath)) {
+      throw new Error("Video file not found at specified path.");
+  }
+
+  function processVideoExtraction(videoPath: string, frames: ImageObject[], options: ExtractFramesOptions, resolve: any, reject: any) {
+      const outputFormat = options.outputFormat || 'jpg';
+      const outputFileTemplate = `frame-%03d.${outputFormat}`;
+
+      ffmpeg(videoPath)
+          .on('end', () => {
+              console.log('Frames extracted successfully.');
+              resolve(frames);
+          })
+          .on('error', (err) => {
+              console.error('Error extracting frames:', err.message);
+              reject(err);
+          })
+          .outputOptions([`-vf fps=1/${options.interval / 1000}`, `-q:v 2`]) // Set frame rate
+          .saveToFile(path.join(frameDir, outputFileTemplate)); // Save frames with a sequence number
+
+      ffmpeg.ffprobe(videoPath, (err, metadata) => {
+          if (err) {
+              return reject(err);
+          }
+          const duration = metadata?.format?.duration;
+          if (duration === undefined) {
+              return reject(new Error("Video duration not found in metadata."));
+          }
+          const totalFrames = Math.floor(duration * 1000 / options.interval);
+          for (let i = 0; i < totalFrames; i++) {
+              if (options.frameSelection && (i < (options.frameSelection.start || 0) || i > (options.frameSelection.end || totalFrames - 1))) {
+                  continue;
+              }
+              frames.push({
+                  source: path.join(frameDir, `frame-${String(i).padStart(3, '0')}.${outputFormat}`),
+                  isRemote: false
+              });
+          }
+      });
+  }
+
+  return new Promise((resolve, reject) => {
+      processVideoExtraction(videoPath, frames, options, resolve, reject);
+  });
+}
+
+
+
+/**
+ * Sets a pattern on a specific area of a buffered image.
+ * @param {Buffer} buffer - The source image buffer.
+ * @param {Object} options - Options to customize the pattern.
+ * @returns {Promise<Buffer>} - The adjusted image buffer.
+ */
+async setPatternBackground(buffer:Buffer, options: PatternOptions) {
+    // Load the buffered image onto a canvas
+    const img = await loadImage(buffer);
+    const canvas = createCanvas(img.width, img.height);
+    const ctx: any = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+
+    // Set up the area to cover (default to full image if not specified)
+    const x = options.x || 0;
+    const y = options.y || 0;
+    const width = options.width || img.width;
+    const height = options.height || img.height;
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+
+    if (options.gradient) {
+        await this.fillWithGradient(ctx, width, height, options.gradient, x, y);
+    } else if (options.backgroundColor) {
+        ctx.fillStyle = options.backgroundColor;
+        ctx.fillRect(x, y, width, height);
+    }
+
+    switch (options.type) {
+        case 'dots':
+            await this.drawDotsPattern(ctx, width, height, options, x, y);
+            break;
+        case 'stripes':
+            await this.drawStripesPattern(ctx, width, height, options, x, y);
+            break;
+        case 'grid':
+            await this.drawGridPattern(ctx, width, height, options, x, y);
+            break;
+        case 'checkerboard':
+            await this.drawCheckerboardPattern(ctx, width, height, options, x, y);
+            break;
+        case 'custom':
+            await this.drawCustomPattern(ctx, width, height, options, x, y);
+            break;
+        default:
+            throw new Error('Invalid pattern type specified.');
+    }
+
+    ctx.restore();
+
+    return canvas.toBuffer('image/png');
+}
+
+  
+  /**
+   * Fills the specified area with a gradient.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area to fill.
+   * @param height The height of the area to fill.
+   * @param gradient The gradient options.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async fillWithGradient(
+    ctx: any,
+    width: number,
+    height: number,
+    gradient: GradientConfig,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    let grad: CanvasGradient;
+  
+    if (gradient.type === 'linear') {
+      grad = ctx.createLinearGradient(
+        (gradient.startX || 0) + x, 
+        (gradient.startY || 0) + y, 
+        (gradient.endX || width) + x, 
+        (gradient.endY || height) + y
+      );
+    } else {
+      grad = ctx.createRadialGradient(
+        (gradient.startX || width / 2) + x, 
+        (gradient.startY || height / 2) + y, 
+        gradient.startRadius || 0,
+        (gradient.endX || width / 2) + x, 
+        (gradient.endY || height / 2) + y, 
+        gradient.endRadius || Math.max(width, height)
+      );
+    }
+  
+    gradient.colors.forEach(stop => {
+      grad.addColorStop(stop.stop, stop.color);
+    });
+  
+    ctx.fillStyle = grad;
+    ctx.fillRect(x, y, width, height);
+  }
+  
+  /**
+   * Draws a dots pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the dot pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async  drawDotsPattern(
+    ctx: any,
+    width: number,
+    height: number,
+    options: PatternOptions,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    const color = options.color || 'black';
+    const radius = options.size || 5;
+    const spacing = options.spacing || 10;
+  
+    ctx.fillStyle = color;
+  
+    for (let posY = y; posY < y + height; posY += spacing) {
+      for (let posX = x; posX < x + width; posX += spacing) {
+        ctx.beginPath();
+        ctx.arc(posX, posY, radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  }
+  
+  /**
+   * Draws a stripes pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the stripes pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async drawStripesPattern(
+    ctx: any,
+    width: number,
+    height: number,
+    options: PatternOptions,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    const color = options.color || 'black';
+    const stripeWidth = options.size || 10;
+    const spacing = options.spacing || 20;
+    const angle = options.angle || 0;
+  
+    ctx.fillStyle = color;
+    
+    // Save the context to apply transformations and restore later
+    ctx.save();
+  
+    // Translate and rotate the canvas
+    ctx.translate(x + width / 2, y + height / 2); // Move to the center of the area
+    ctx.rotate((angle * Math.PI) / 180); // Rotate by the specified angle
+    ctx.translate(-width / 2, -height / 2); // Translate back to top-left
+  
+    // Draw the stripes pattern with the current transformations
+    for (let posX = 0; posX < width; posX += stripeWidth + spacing) {
+      ctx.fillRect(posX, 0, stripeWidth, height);
+    }
+  
+    // Restore the original context to prevent transformations affecting other drawings
+    ctx.restore();
+  }
+    /**
+   * Draws a grid pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the grid pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async drawGridPattern(
+    ctx: any,
+    width: number,
+    height: number,
+    options: PatternOptions,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    const color = options.color || 'black';
+    const size = options.size || 20;
+  
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+  
+    for (let posX = x; posX <= x + width; posX += size) {
+      ctx.beginPath();
+      ctx.moveTo(posX, y);
+      ctx.lineTo(posX, y + height);
+      ctx.stroke();
+    }
   
-  public validHex(hexColor: string): any {
+    for (let posY = y; posY <= y + height; posY += size) {
+      ctx.beginPath();
+      ctx.moveTo(x, posY);
+      ctx.lineTo(x + width, posY);
+      ctx.stroke();
+    }
+  }
+  
+  /**
+   * Draws a checkerboard pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the checkerboard pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async drawCheckerboardPattern(
+    ctx: any,
+    width: number,
+    height: number,
+    options: PatternOptions,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    const color1 = options.color || 'black';
+    const color2 = options.secondaryColor || 'white';
+    const size = options.size || 20;
+  
+    for (let posY = y; posY < y + height; posY += size) {
+      for (let posX = x; posX < x + width; posX += size) {
+        ctx.fillStyle = (Math.floor(posX / size) + Math.floor(posY / size)) % 2 === 0 ? color1 : color2;
+        ctx.fillRect(posX, posY, size, size);
+      }
+    }
+  }
+  
+  /**
+   * Draws a custom image pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the custom pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+  async drawCustomPattern(
+    ctx: any,
+    width: number,
+    height: number,
+    options: PatternOptions,
+    x: number = 0,
+    y: number = 0
+  ): Promise<void> {
+    if (!options.customPatternImage) {
+      throw new Error('Custom pattern image path is required for custom patterns.');
+    }
+  
+    const patternImage = await loadImage(options.customPatternImage);
+    const pattern = ctx.createPattern(patternImage, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.translate(x, y);
+    ctx.fillRect(0, 0, width, height);
+    ctx.resetTransform();
+  }
+  
+
+async animate(
+  frames: Frame[],
+  defaultDuration: number, 
+  defaultWidth: number = 800,
+  defaultHeight: number = 600, 
+  options?: {
+      gif?: boolean;  
+      gifPath?: string;  
+      onStart?: () => void;
+      onFrame?: (index: number) => void;
+      onEnd?: () => void;
+  }
+): Promise<Buffer[] | undefined> {
+  const buffers: Buffer[] = [];
+  const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
+
+  if (options?.onStart) options.onStart();
+
+  let encoder: GIFEncoder | null = null;
+  let gifStream: fs.WriteStream | null = null;
+
+  if (options?.gif) {
+      if (!options.gifPath) {
+          throw new Error("GIF generation enabled but no gifPath provided.");
+      }
+      encoder = new GIFEncoder(defaultWidth, defaultHeight);
+      gifStream = fs.createWriteStream(options.gifPath);
+      encoder.createReadStream().pipe(gifStream);
+      encoder.start();
+      encoder.setRepeat(0); 
+      encoder.setQuality(10); 
+  }
+
+  for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+
+      const width = frame.width || defaultWidth;
+      const height = frame.height || defaultHeight;
+      const canvas = createCanvas(width, height);
+      const ctx: any = canvas.getContext('2d');
+
+      if (!isNode) {
+          canvas.width = width;
+          canvas.height = height;
+          document.body.appendChild(canvas as unknown as Node);
+      }
+
+      ctx.clearRect(0, 0, width, height);
+
+      if (frame.transformations) {
+          const { scaleX = 1, scaleY = 1, rotate = 0, translateX = 0, translateY = 0 } = frame.transformations;
+          ctx.save(); 
+          ctx.translate(translateX, translateY);
+          ctx.rotate((rotate * Math.PI) / 180);
+          ctx.scale(scaleX, scaleY);
+      }
+
+      let fillStyle: string | CanvasGradient | CanvasPattern | null = null;
+
+      if (frame.gradient) {
+          const { type, startX, startY, endX, endY, startRadius, endRadius, colors } = frame.gradient;
+          let gradient: CanvasGradient | null = null;
+
+          if (type === 'linear') {
+              gradient = ctx.createLinearGradient(startX || 0, startY || 0, endX || width, endY || height);
+          } else if (type === 'radial') {
+              gradient = ctx.createRadialGradient(
+                  startX || width / 2,
+                  startY || height / 2,
+                  startRadius || 0,
+                  endX || width / 2,
+                  endY || height / 2,
+                  endRadius || Math.max(width, height)
+              );
+          }
+
+          colors.forEach(colorStop => {
+              if (gradient) gradient.addColorStop(colorStop.stop, colorStop.color);
+          });
+
+          fillStyle = gradient;
+      }
+
+      if (frame.pattern) {
+          const patternImage = await loadImage(frame.pattern.imagePath);
+          const pattern = ctx.createPattern(patternImage, frame.pattern.repeat || 'repeat');
+          fillStyle = pattern;
+      }
+
+      if (!fillStyle && frame.backgroundColor) {
+          fillStyle = frame.backgroundColor;
+      }
+
+      if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fillRect(0, 0, width, height);
+      }
+
+      if (frame.imagePath) {
+          const image = await loadImage(frame.imagePath);
+          ctx.globalCompositeOperation = frame.blendMode || 'source-over';
+          ctx.drawImage(image, 0, 0, width, height);
+      }
+
+      if (frame.onDrawCustom) {
+          frame.onDrawCustom(ctx, canvas);
+      }
+
+      if (frame.transformations) {
+          ctx.restore();
+      }
+
+      const buffer = canvas.toBuffer('image/png');
+      buffers.push(buffer);
+
+      if (encoder) {
+         
+          const frameDuration = frame.duration || defaultDuration;
+          encoder.setDelay(frameDuration); 
+          encoder.addFrame(ctx); 
+      }
+
+      if (options?.onFrame) options.onFrame(i);
+      
+      await new Promise(resolve => setTimeout(resolve, frame.duration || defaultDuration));
+  }
+
+  if (encoder) {
+      encoder.finish();
+  }
+
+  if (options?.onEnd) options.onEnd();
+
+  return options?.gif ? undefined : buffers;
+}
+
+public validHex(hexColor: string): any {
     const hexPattern = /^#[0-9a-fA-F]{6}$/;
     if (!hexPattern.test(hexColor)) {
         throw new Error("Invalid hexadecimal color format. It should be in the format '#RRGGBB'.");