apexify.js 4.9.30 → 5.0.1

package/lib/Canvas/utils/General/imageStitching.ts

@@ -0,0 +1,252 @@
+import { createCanvas, loadImage, SKRSContext2D, Image } from '@napi-rs/canvas';
+import path from 'path';
+import fs from 'fs';
+import { StitchOptions, CollageLayout } from '../types';
+
+/**
+ * Stitches multiple images together
+ * @param images - Array of image sources
+ * @param options - Stitching options
+ * @returns Stitched image buffer
+ */
+export async function stitchImages(
+  images: Array<string | Buffer>,
+  options: StitchOptions = {}
+): Promise<Buffer> {
+  if (!images || images.length === 0) {
+    throw new Error('stitchImages: images array is required');
+  }
+
+  const {
+    direction = 'horizontal',
+    overlap = 0,
+    blend = false,
+    spacing = 0
+  } = options;
+
+  // Load all images
+  const loadedImages: Image[] = [];
+  for (const imgSource of images) {
+    let img: Image;
+    if (Buffer.isBuffer(imgSource)) {
+      img = await loadImage(imgSource);
+    } else if (imgSource.startsWith('http')) {
+      img = await loadImage(imgSource);
+    } else {
+      const imgPath = path.join(process.cwd(), imgSource);
+      img = await loadImage(fs.readFileSync(imgPath));
+    }
+    loadedImages.push(img);
+  }
+
+  if (loadedImages.length === 0) {
+    throw new Error('stitchImages: No valid images loaded');
+  }
+
+  // Calculate canvas dimensions
+  let canvasWidth = 0;
+  let canvasHeight = 0;
+  let maxWidth = 0;
+  let maxHeight = 0;
+
+  for (const img of loadedImages) {
+    maxWidth = Math.max(maxWidth, img.width);
+    maxHeight = Math.max(maxHeight, img.height);
+  }
+
+  if (direction === 'horizontal') {
+    canvasWidth = loadedImages.reduce((sum, img) => sum + img.width, 0);
+    canvasWidth -= overlap * (loadedImages.length - 1);
+    canvasWidth += spacing * (loadedImages.length - 1);
+    canvasHeight = maxHeight;
+  } else if (direction === 'vertical') {
+    canvasWidth = maxWidth;
+    canvasHeight = loadedImages.reduce((sum, img) => sum + img.height, 0);
+    canvasHeight -= overlap * (loadedImages.length - 1);
+    canvasHeight += spacing * (loadedImages.length - 1);
+  } else if (direction === 'grid') {
+    const cols = Math.ceil(Math.sqrt(loadedImages.length));
+    const rows = Math.ceil(loadedImages.length / cols);
+    canvasWidth = maxWidth * cols + spacing * (cols - 1);
+    canvasHeight = maxHeight * rows + spacing * (rows - 1);
+  }
+
+  // Create canvas
+  const canvas = createCanvas(canvasWidth, canvasHeight);
+  const ctx = canvas.getContext('2d') as SKRSContext2D;
+  if (!ctx) throw new Error("Unable to get 2D context");
+
+  // Draw images
+  let currentX = 0;
+  let currentY = 0;
+
+  for (let i = 0; i < loadedImages.length; i++) {
+    const img = loadedImages[i];
+    
+    if (direction === 'horizontal') {
+      if (i > 0) {
+        currentX -= overlap;
+        currentX += spacing;
+      }
+      ctx.drawImage(img, currentX, 0, img.width, img.height);
+      currentX += img.width;
+    } else if (direction === 'vertical') {
+      if (i > 0) {
+        currentY -= overlap;
+        currentY += spacing;
+      }
+      ctx.drawImage(img, 0, currentY, img.width, img.height);
+      currentY += img.height;
+    } else if (direction === 'grid') {
+      const cols = Math.ceil(Math.sqrt(loadedImages.length));
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      const x = col * (maxWidth + spacing);
+      const y = row * (maxHeight + spacing);
+      ctx.drawImage(img, x, y, img.width, img.height);
+    }
+
+    // Apply blending if enabled and not first image
+    if (blend && i > 0 && overlap > 0) {
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.globalAlpha = 0.5;
+      if (direction === 'horizontal') {
+        ctx.drawImage(img, currentX - img.width - spacing + overlap, 0, img.width, img.height);
+      } else if (direction === 'vertical') {
+        ctx.drawImage(img, 0, currentY - img.height - spacing + overlap, img.width, img.height);
+      }
+      ctx.globalAlpha = 1;
+      ctx.globalCompositeOperation = 'source-over';
+    }
+  }
+
+  return canvas.toBuffer('image/png');
+}
+
+/**
+ * Creates an image collage
+ * @param images - Array of image sources with optional dimensions
+ * @param layout - Collage layout configuration
+ * @returns Collage image buffer
+ */
+export async function createCollage(
+  images: Array<{ source: string | Buffer; width?: number; height?: number }>,
+  layout: CollageLayout
+): Promise<Buffer> {
+  if (!images || images.length === 0) {
+    throw new Error('createCollage: images array is required');
+  }
+
+  const {
+    type = 'grid',
+    columns = 3,
+    rows = 3,
+    spacing = 10,
+    background = '#ffffff',
+    borderRadius = 0
+  } = layout;
+
+  // Load all images
+  const loadedImages: Array<{ image: Image; width: number; height: number }> = [];
+  for (const imgConfig of images) {
+    let img: Image;
+    if (Buffer.isBuffer(imgConfig.source)) {
+      img = await loadImage(imgConfig.source);
+    } else if (typeof imgConfig.source === 'string' && imgConfig.source.startsWith('http')) {
+      img = await loadImage(imgConfig.source);
+    } else {
+      const imgPath = path.join(process.cwd(), imgConfig.source as string);
+      img = await loadImage(fs.readFileSync(imgPath));
+    }
+    
+    loadedImages.push({
+      image: img,
+      width: imgConfig.width || img.width,
+      height: imgConfig.height || img.height
+    });
+  }
+
+  // Calculate canvas dimensions
+  let canvasWidth = 0;
+  let canvasHeight = 0;
+
+  if (type === 'grid') {
+    const cellWidth = Math.max(...loadedImages.map(img => img.width));
+    const cellHeight = Math.max(...loadedImages.map(img => img.height));
+    canvasWidth = cellWidth * columns + spacing * (columns - 1);
+    canvasHeight = cellHeight * rows + spacing * (rows - 1);
+  } else if (type === 'masonry') {
+    // Masonry layout - columns with varying heights
+    const colWidths: number[] = new Array(columns).fill(0);
+    const colHeights: number[] = new Array(columns).fill(0);
+    
+    for (let i = 0; i < loadedImages.length; i++) {
+      const col = i % columns;
+      colWidths[col] = Math.max(colWidths[col], loadedImages[i].width);
+      colHeights[col] += loadedImages[i].height + (i >= columns ? spacing : 0);
+    }
+    
+    canvasWidth = Math.max(...colWidths) * columns + spacing * (columns - 1);
+    canvasHeight = Math.max(...colHeights);
+  } else if (type === 'carousel') {
+    // Horizontal carousel
+    canvasWidth = loadedImages.reduce((sum, img) => sum + img.width, 0) + spacing * (loadedImages.length - 1);
+    canvasHeight = Math.max(...loadedImages.map(img => img.height));
+  } else {
+    // Custom - use provided dimensions or calculate
+    canvasWidth = 800;
+    canvasHeight = 600;
+  }
+
+  // Create canvas
+  const canvas = createCanvas(canvasWidth, canvasHeight);
+  const ctx = canvas.getContext('2d') as SKRSContext2D;
+  if (!ctx) throw new Error("Unable to get 2D context");
+
+  // Draw background
+  ctx.fillStyle = background;
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+  // Draw images
+  let currentX = 0;
+  let currentY = 0;
+  const colHeights: number[] = new Array(columns).fill(0);
+
+  for (let i = 0; i < loadedImages.length; i++) {
+    const imgData = loadedImages[i];
+    
+    if (type === 'grid') {
+      const col = i % columns;
+      const row = Math.floor(i / columns);
+      const cellWidth = Math.max(...loadedImages.map(img => img.width));
+      const cellHeight = Math.max(...loadedImages.map(img => img.height));
+      currentX = col * (cellWidth + spacing);
+      currentY = row * (cellHeight + spacing);
+    } else if (type === 'masonry') {
+      const col = i % columns;
+      currentX = col * (Math.max(...loadedImages.map(img => img.width)) + spacing);
+      currentY = colHeights[col];
+      colHeights[col] += imgData.height + spacing;
+    } else if (type === 'carousel') {
+      if (i > 0) currentX += spacing;
+      currentY = (canvasHeight - imgData.height) / 2;
+    }
+
+    // Apply border radius if specified
+    if (borderRadius > 0) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.roundRect(currentX, currentY, imgData.width, imgData.height, borderRadius);
+      ctx.clip();
+    }
+
+    ctx.drawImage(imgData.image, currentX, currentY, imgData.width, imgData.height);
+
+    if (borderRadius > 0) {
+      ctx.restore();
+    }
+  }
+
+  return canvas.toBuffer('image/png');
+}
+

package/lib/Canvas/utils/Image/imageEffects.ts

@@ -0,0 +1,175 @@
+import { SKRSContext2D, Image } from '@napi-rs/canvas';
+
+/**
+ * Applies vignette effect to the canvas
+ * @param ctx - Canvas 2D context
+ * @param intensity - Vignette intensity (0-1)
+ * @param size - Vignette size (0-1, where 1 = full canvas)
+ * @param width - Canvas width
+ * @param height - Canvas height
+ */
+export function applyVignette(
+  ctx: SKRSContext2D,
+  intensity: number,
+  size: number,
+  width: number,
+  height: number
+): void {
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const pixels = imageData.data;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+  const vignetteRadius = maxDistance * size;
+
+  for (let i = 0; i < pixels.length; i += 4) {
+    const x = (i / 4) % width;
+    const y = Math.floor((i / 4) / width);
+    const dx = x - centerX;
+    const dy = y - centerY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    
+    if (distance > vignetteRadius) {
+      const vignetteAmount = Math.min(1, (distance - vignetteRadius) / (maxDistance - vignetteRadius));
+      const darken = 1 - (vignetteAmount * intensity);
+      
+      pixels[i] = Math.round(pixels[i] * darken);     // R
+      pixels[i + 1] = Math.round(pixels[i + 1] * darken); // G
+      pixels[i + 2] = Math.round(pixels[i + 2] * darken); // B
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+}
+
+/**
+ * Applies lens flare effect to the canvas
+ * @param ctx - Canvas 2D context
+ * @param flareX - Flare center X position
+ * @param flareY - Flare center Y position
+ * @param intensity - Flare intensity (0-1)
+ * @param width - Canvas width
+ * @param height - Canvas height
+ */
+export function applyLensFlare(
+  ctx: SKRSContext2D,
+  flareX: number,
+  flareY: number,
+  intensity: number,
+  width: number,
+  height: number
+): void {
+  ctx.save();
+  
+  // Create gradient for lens flare
+  const gradient = ctx.createRadialGradient(
+    flareX, flareY, 0,
+    flareX, flareY, Math.max(width, height) * 0.5
+  );
+  
+  const flareColor = `rgba(255, 255, 255, ${intensity * 0.6})`;
+  gradient.addColorStop(0, flareColor);
+  gradient.addColorStop(0.3, `rgba(255, 255, 255, ${intensity * 0.3})`);
+  gradient.addColorStop(0.6, `rgba(255, 255, 200, ${intensity * 0.1})`);
+  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+  
+  ctx.globalCompositeOperation = 'screen';
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+  
+  // Add additional flare elements
+  const flareElements = [
+    { x: flareX * 0.7, y: flareY * 0.7, size: 30, opacity: intensity * 0.4 },
+    { x: flareX * 1.3, y: flareY * 1.1, size: 20, opacity: intensity * 0.3 },
+    { x: flareX * 0.9, y: flareY * 1.2, size: 15, opacity: intensity * 0.2 }
+  ];
+  
+  for (const element of flareElements) {
+    if (element.x >= 0 && element.x < width && element.y >= 0 && element.y < height) {
+      const elementGradient = ctx.createRadialGradient(
+        element.x, element.y, 0,
+        element.x, element.y, element.size
+      );
+      elementGradient.addColorStop(0, `rgba(255, 255, 255, ${element.opacity})`);
+      elementGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+      ctx.fillStyle = elementGradient;
+      ctx.fillRect(element.x - element.size, element.y - element.size, element.size * 2, element.size * 2);
+    }
+  }
+  
+  ctx.restore();
+}
+
+/**
+ * Applies chromatic aberration effect
+ * @param ctx - Canvas 2D context
+ * @param intensity - Aberration intensity (0-1)
+ * @param width - Canvas width
+ * @param height - Canvas height
+ */
+export function applyChromaticAberration(
+  ctx: SKRSContext2D,
+  intensity: number,
+  width: number,
+  height: number
+): void {
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const pixels = imageData.data;
+  const newPixels = new Uint8ClampedArray(pixels.length);
+  const offset = Math.round(intensity * 5); // Max 5 pixel offset
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = (y * width + x) * 4;
+      
+      // Red channel - shift left
+      const redX = Math.max(0, Math.min(width - 1, x - offset));
+      const redIdx = (y * width + redX) * 4;
+      newPixels[idx] = pixels[redIdx];
+      
+      // Green channel - no shift
+      newPixels[idx + 1] = pixels[idx + 1];
+      
+      // Blue channel - shift right
+      const blueX = Math.max(0, Math.min(width - 1, x + offset));
+      const blueIdx = (y * width + blueX) * 4;
+      newPixels[idx + 2] = pixels[blueIdx];
+      
+      // Alpha channel - no change
+      newPixels[idx + 3] = pixels[idx + 3];
+    }
+  }
+
+  ctx.putImageData(new ImageData(newPixels, width, height), 0, 0);
+}
+
+/**
+ * Applies film grain effect
+ * @param ctx - Canvas 2D context
+ * @param intensity - Grain intensity (0-1)
+ * @param width - Canvas width
+ * @param height - Canvas height
+ */
+export function applyFilmGrain(
+  ctx: SKRSContext2D,
+  intensity: number,
+  width: number,
+  height: number
+): void {
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const pixels = imageData.data;
+  const grainAmount = intensity * 30; // Max 30 pixel variation
+
+  for (let i = 0; i < pixels.length; i += 4) {
+    // Generate random grain
+    const grain = (Math.random() - 0.5) * grainAmount;
+    
+    pixels[i] = Math.max(0, Math.min(255, pixels[i] + grain));     // R
+    pixels[i + 1] = Math.max(0, Math.min(255, pixels[i + 1] + grain)); // G
+    pixels[i + 2] = Math.max(0, Math.min(255, pixels[i + 2] + grain)); // B
+    // Alpha unchanged
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+}
+