apexify.js 4.7.9 → 4.7.96

package/lib/canvas/ApexPainter.ts

@@ -3,13 +3,13 @@ import GIFEncoder from "gifencoder";
 import ffmpeg from 'fluent-ffmpeg';
 import { PassThrough} from "stream";
 import axios from 'axios';
-import fs from "fs";
+import fs, { PathLike } from "fs";
 import path from "path";
 import { OutputFormat, CanvasConfig, TextObject, ImageProperties, GIFOptions, GIFResults, CustomOptions, cropOptions,
      drawBackgroundGradient, drawBackgroundColor, customBackground, 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, backgroundRadius, applyZoom, ResizeOptions, applyPerspective
+     PatternOptions, ExtractFramesOptions, backgroundRadius, applyZoom, ResizeOptions, applyPerspective, MaskOptions, BlendOptions
     } from "./utils/utils";
 
   interface CanvasResults {
@@ -114,6 +114,7 @@ export class ApexPainter {
     
     const canvas = createCanvas(baseImage.width, baseImage.height);
     const ctx = canvas.getContext('2d') as SKRSContext2D | null;
+
     if (!ctx) {
       throw new Error('Unable to get 2D rendering context from canvas');
     }
@@ -164,7 +165,6 @@ export class ApexPainter {
                 );
             }
 
-            const size = { width: existingImage.width, height: existingImage.height };
             drawText(ctx, mergedTextOptions);
         }
 
@@ -336,24 +336,24 @@ async createGIF(gifFrames: { background: string; duration: number }[], options:
     return resizingImg(resizeOptions)
   }
 
-  async imgConverter(imagePath: string, newExtension: string) {
-    return converter(imagePath, newExtension)
+  async imgConverter(source: string, newExtension: string) {
+    return converter(source, newExtension)
   }
 
-  async processImage(imagePath: string, filters: any[]) {
-    return imgEffects(imagePath, filters)
+  async effects(source: string, filters: any[]) {
+    return imgEffects(source, filters)
   }
 
-  async colorsFilter(imagePath: string, filterColor: any, opacity?: number) {
-    return applyColorFilters(imagePath, filterColor, opacity)
+  async colorsFilter(source: string, filterColor: any, opacity?: number) {
+    return applyColorFilters(source, filterColor, opacity)
   }
 
-  async colorAnalysis(imagePath: string) {
-    return detectColors(imagePath)
+  async colorAnalysis(source: string) {
+    return detectColors(source)
   }
 
-  async colorsRemover(imagePath: string, colorToRemove: { red: number, green: number, blue: number }) {
-    return removeColor(imagePath, colorToRemove)
+  async colorsRemover(source: string, colorToRemove: { red: number, green: number, blue: number }) {
+    return removeColor(source, colorToRemove)
   }
 
   async removeBackground(imageURL: string, apiKey: string) {
@@ -623,7 +623,7 @@ async extractFrames(videoSource: string | Buffer, options: ExtractFramesOptions)
  * @param {Object} options - Options to customize the pattern.
  * @returns {Promise<Buffer>} - The adjusted image buffer.
  */
-async setPatternBackground(buffer:Buffer, options: PatternOptions) {
+async patterns(buffer:Buffer, options: PatternOptions) {
 
     const img = await loadImage(buffer);
     const canvas = createCanvas(img.width, img.height);
@@ -663,6 +663,15 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
         case 'custom':
             await this.drawCustomPattern(ctx, width, height, options, x, y);
             break;
+        case 'noise':
+            await this.drawNoisePattern(ctx, width, height, x, y);
+            break;
+        case 'waves':
+            await this.drawWavePattern(ctx, width, height, options, x, y);
+            break;
+        case 'diagonal-checkerboard':
+            await this.drawDiagonalCheckerboardPattern(ctx, width, height, options, x, y);
+            break;
         default:
             throw new Error('Invalid pattern type specified.');
     }
@@ -682,7 +691,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async fillWithGradient(
+  private async fillWithGradient(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -727,7 +736,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async  drawDotsPattern(
+  private async drawDotsPattern(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -759,7 +768,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async drawStripesPattern(
+  private async drawStripesPattern(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -795,7 +804,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async drawGridPattern(
+    private async drawGridPattern(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -833,7 +842,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async drawCheckerboardPattern(
+  private async drawCheckerboardPattern(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -844,7 +853,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
     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;
@@ -862,7 +871,7 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
    * @param x The x offset of the area.
    * @param y The y offset of the area.
    */
-  async drawCustomPattern(
+  private async drawCustomPattern(
     ctx: SKRSContext2D,
     width: number,
     height: number,
@@ -881,7 +890,152 @@ async setPatternBackground(buffer:Buffer, options: PatternOptions) {
     ctx.fillRect(0, 0, width, height);
     ctx.resetTransform();
   }
+
+  private async drawWavePattern(ctx: SKRSContext2D, width: number, height: number, options: PatternOptions, x = 0, y = 0) {
+    const color = options.color || 'black';
+    const waveHeight = options.size || 10;
+    const frequency = options.spacing || 20;
+
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+
+    for (let posY = y; posY < y + height; posY += frequency) {
+        ctx.beginPath();
+        for (let posX = x; posX < x + width; posX += 5) {
+            const waveY = posY + Math.sin(posX / frequency) * waveHeight;
+            ctx.lineTo(posX, waveY);
+        }
+        ctx.stroke();
+    }
+  }
+
+
+  private async drawNoisePattern(ctx: SKRSContext2D, width: number, height: number, x = 0, y = 0) {
+    const imageData = ctx.createImageData(width, height);
+    const data = imageData.data;
   
+    for (let i = 0; i < data.length; i += 4) {
+        const gray = Math.random() * 255;
+        data[i] = gray;
+        data[i + 1] = gray;
+        data[i + 2] = gray;
+        data[i + 3] = Math.random() * 255;
+    }
+  
+    ctx.putImageData(imageData, x, y);
+  }
+
+
+  private async drawDiagonalCheckerboardPattern(ctx: SKRSContext2D, width: number, height: number, options: PatternOptions, x = 0, y = 0) {
+    const color1 = options.color || 'black';
+    const color2 = options.secondaryColor || 'white';
+    const size = options.size || 20;
+
+    ctx.save();
+    ctx.translate(x + width / 2, y + height / 2);
+    ctx.rotate(Math.PI / 4);
+    ctx.translate(-width / 2, -height / 2);
+
+    for (let posY = 0; posY < height; posY += size) {
+        for (let posX = 0; posX < width; posX += size) {
+            ctx.fillStyle = (Math.floor(posX / size) + Math.floor(posY / size)) % 2 === 0 ? color1 : color2;
+            ctx.fillRect(posX, posY, size, size);
+        }
+    }
+
+    ctx.restore();
+}
+
+
+async masking(
+  source: string | Buffer | PathLike | Uint8Array, 
+  maskSource: string | Buffer | PathLike | Uint8Array, 
+  options: MaskOptions = { type: "alpha" }
+): Promise<Buffer> {
+  const img = await loadImage(source);
+  const mask = await loadImage(maskSource);
+
+  const canvas = createCanvas(img.width, img.height);
+  const ctx = canvas.getContext("2d") as SKRSContext2D;
+
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+
+  const maskCanvas = createCanvas(img.width, img.height);
+  const maskCtx = maskCanvas.getContext("2d") as SKRSContext2D;
+  maskCtx.drawImage(mask, 0, 0, img.width, img.height);
+
+  const maskData = maskCtx.getImageData(0, 0, img.width, img.height);
+  const imgData = ctx.getImageData(0, 0, img.width, img.height);
+
+  for (let i = 0; i < maskData.data.length; i += 4) {
+      let alphaValue = 255;
+
+      if (options.type === "grayscale") {
+          const grayscale = maskData.data[i] * 0.3 + maskData.data[i + 1] * 0.59 + maskData.data[i + 2] * 0.11;
+          alphaValue = grayscale >= (options.threshold ?? 128) ? 255 : 0;
+      } else if (options.type === "alpha") {
+          alphaValue = maskData.data[i + 3];
+      } else if (options.type === "color" && options.colorKey) {
+          const colorMatch =
+              maskData.data[i] === parseInt(options.colorKey.slice(1, 3), 16) &&
+              maskData.data[i + 1] === parseInt(options.colorKey.slice(3, 5), 16) &&
+              maskData.data[i + 2] === parseInt(options.colorKey.slice(5, 7), 16);
+          alphaValue = colorMatch ? 0 : 255;
+      }
+
+      if (options.invert) alphaValue = 255 - alphaValue;
+
+      imgData.data[i + 3] = alphaValue;
+  }
+
+  ctx.putImageData(imgData, 0, 0);
+
+  return canvas.toBuffer("image/png");
+}
+
+async gradientBlend(
+  source: string | Buffer | PathLike | Uint8Array, 
+  options: BlendOptions
+): Promise<Buffer> {
+  const img = await loadImage(source);
+  const canvas = createCanvas(img.width, img.height);
+  const ctx = canvas.getContext("2d") as SKRSContext2D;
+
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+
+  let gradient: CanvasGradient;
+  if (options.type === "linear") {
+      const angle = options.angle ?? 0;
+      const radians = (angle * Math.PI) / 180;
+      const x1 = img.width / 2 - (Math.cos(radians) * img.width) / 2;
+      const y1 = img.height / 2 - (Math.sin(radians) * img.height) / 2;
+      const x2 = img.width / 2 + (Math.cos(radians) * img.width) / 2;
+      const y2 = img.height / 2 + (Math.sin(radians) * img.height) / 2;
+      gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+  } else if (options.type === "radial") {
+      gradient = ctx.createRadialGradient(
+          img.width / 2, img.height / 2, 0, img.width / 2, img.height / 2, Math.max(img.width, img.height)
+      );
+  } else {
+      gradient = ctx.createConicGradient(Math.PI, img.width / 2, img.height / 2);
+  }
+
+  options.colors.forEach(({ stop, color }) => gradient.addColorStop(stop, color));
+  ctx.fillStyle = gradient;
+
+  ctx.globalCompositeOperation = options.blendMode ?? "multiply";
+  ctx.fillRect(0, 0, img.width, img.height);
+
+  if (options.maskSource) {
+      const mask = await loadImage(options.maskSource);
+      ctx.globalCompositeOperation = "destination-in";
+      ctx.drawImage(mask, 0, 0, img.width, img.height);
+  }
+
+  ctx.globalCompositeOperation = "source-over";
+
+  return canvas.toBuffer("image/png");
+}
 
 async animate(
   frames: Frame[],
@@ -967,7 +1121,7 @@ async animate(
       }
 
       if (frame.pattern) {
-          const patternImage = await loadImage(frame.pattern.imagePath);
+          const patternImage = await loadImage(frame.pattern.source);
           const pattern = ctx.createPattern(patternImage, frame.pattern.repeat || 'repeat');
           fillStyle = pattern;
       }
@@ -981,8 +1135,8 @@ async animate(
           ctx.fillRect(0, 0, width, height);
       }
 
-      if (frame.imagePath) {
-          const image = await loadImage(frame.imagePath);
+      if (frame.source) {
+          const image = await loadImage(frame.source);
           ctx.globalCompositeOperation = frame.blendMode || 'source-over';
           ctx.drawImage(image, 0, 0, width, height);
       }
@@ -1019,6 +1173,8 @@ async animate(
   return options?.gif ? undefined : buffers;
 }
 
+
+
 public validHex(hexColor: string): any {
     const hexPattern = /^#[0-9a-fA-F]{6}$/;
     if (!hexPattern.test(hexColor)) {

package/lib/canvas/utils/types.ts

@@ -1,4 +1,5 @@
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas"
+import { PathLike } from "fs";
 /**
  * Configuration option to decide the outputformate from ApexPainter
  * @param {type} default - 'buffer', other formates: url, blob, base64, dataURL, arraybuffer.
@@ -502,10 +503,10 @@ export interface GradientConfig{
     backgroundColor?: string;
     gradient?: GradientConfig;
     pattern?: {
-        imagePath: string; 
+        source: string; 
         repeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
     };
-    imagePath?: string;
+    source?: string;
     blendMode?: GlobalCompositeOperation;
     transformations?: {
         scaleX?: number;
@@ -522,7 +523,7 @@ export interface GradientConfig{
   
   
   export interface PatternOptions {
-      type: 'dots' | 'stripes' | 'grid' | 'checkerboard' | 'custom';
+      type: 'dots' | 'stripes' | 'grid' | 'checkerboard' | 'noise' | 'waves' | 'diagonal-checkerboard' | 'custom';
       color?: string;
       secondaryColor?: string;
       x?: number;
@@ -552,21 +553,13 @@ export interface GradientConfig{
    * Options for resizing an image.
    */
   export interface ResizeOptions {
-    /** The source image path or URL. */
     imagePath: string;
-    /** Desired dimensions. If not provided, defaults are used. */
     size?: {
       width?: number;
       height?: number;
     };
-    /**
-     * If true, the image is resized to fit inside the provided dimensions while preserving the aspect ratio.
-     * If false, the image is resized to fill the dimensions (which might distort the aspect ratio).
-     */
     maintainAspectRatio?: boolean;
-    /** Quality setting for the output image (0–100). Defaults to 90. */
     quality?: number;
-    /** Output format for the resized image. Defaults to 'png'. */
     outputFormat?: 'png' | 'jpeg';
   }
   
@@ -578,7 +571,6 @@ export interface GradientConfig{
   export interface Coordinate {
     from: Point;
     to: Point;
-    /** Optional tension for smoothing the curve. Default is 0. */
     tension?: number;
   }
   
@@ -587,4 +579,19 @@ export interface GradientConfig{
     coordinates: Coordinate[];
     crop: 'inner' | 'outer';
     radius?: number | "circular" | null;
-  }
+  }
+
+  export interface MaskOptions {
+    type?: "alpha" | "grayscale" | "color";
+    threshold?: number;
+    invert?: boolean;
+    colorKey?: string;
+  }
+
+  export interface BlendOptions {
+    type?: "linear" | "radial" | "conic";
+    angle?: number;
+    colors: { stop: number; color: string }[]; 
+    blendMode?: "multiply" | "overlay" | "screen" | "darken" | "lighten" | "difference";
+    maskSource?: string | Buffer | PathLike | Uint8Array;
+  }

package/lib/canvas/utils/utils.ts

@@ -10,7 +10,7 @@
 
 
 
-import { OutputFormat, CanvasConfig, ImageProperties, TextObject, GIFOptions, GIFResults, CustomOptions, cropOptions, GradientConfig, Frame, PatternOptions, ExtractFramesOptions, ResizeOptions, CropOptions } from "./types";
+import { OutputFormat, CanvasConfig, ImageProperties, TextObject, GIFOptions, GIFResults, CustomOptions, cropOptions, GradientConfig, Frame, PatternOptions, ExtractFramesOptions, ResizeOptions, CropOptions, MaskOptions, BlendOptions } from "./types";
 import { drawBackgroundColor, drawBackgroundGradient, customBackground, backgroundRadius } from "./Background/bg";
 import { applyRotation, imageRadius, applyStroke, applyZoom, applyShadow, objectRadius, drawShape, applyPerspective } from './Image/imageProperties'
 import { drawText, WrappedText } from "./Texts/textProperties";
@@ -66,5 +66,7 @@ export {
     ExtractFramesOptions,
     ResizeOptions,
     CropOptions,
-    applyPerspective
+    applyPerspective,
+    MaskOptions,
+    BlendOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexify.js",
-  "version": "4.7.9",
+  "version": "4.7.96",
   "description": "Unlimited AI models and Canvas library. Supports ts & js (supports front/back end).",
   "author": "zenith-79",
   "license": "MIT",
@@ -229,7 +229,7 @@
     "@discordjs/voice": "^0.18.0",
     "@google/generative-ai": "^0.22.0",
     "@napi-rs/canvas": "^0.1.53",
-    "apexify.js": "^4.7.7",
+    "apexify.js": "^4.7.95",
     "axios": "^1.7.7",
     "discord.js": "^14.18.0",
     "fluent-ffmpeg": "^2.1.3",