apexify.js 5.1.1 → 5.2.0

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

@@ -1,175 +0,0 @@
-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);
-}
-

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

@@ -1,356 +0,0 @@
-import { SKRSContext2D } from '@napi-rs/canvas';
-import { ImageFilter } from '../types';
-
-/**
- * Applies image filters to a canvas context
- * @param ctx Canvas 2D context
- * @param filters Array of filters to apply
- * @param width Canvas width
- * @param height Canvas height
- */
-export function applyImageFilters(
-  ctx: SKRSContext2D,
-  filters: ImageFilter[],
-  width: number,
-  height: number
-): void {
-  if (!filters || filters.length === 0) return;
-
-  ctx.save();
-
-  for (const filter of filters) {
-    switch (filter.type) {
-      case 'gaussianBlur':
-        applyGaussianBlur(ctx, filter.intensity || 0);
-        break;
-      case 'motionBlur':
-        applyMotionBlur(ctx, filter.intensity || 0, filter.angle || 0);
-        break;
-      case 'radialBlur':
-        applyRadialBlur(ctx, filter.intensity || 0, filter.centerX || width/2, filter.centerY || height/2);
-        break;
-      case 'sharpen':
-        applySharpen(ctx, filter.intensity || 0);
-        break;
-      case 'noise':
-        applyNoise(ctx, filter.intensity || 0.1);
-        break;
-      case 'grain':
-        applyGrain(ctx, filter.intensity || 0.05);
-        break;
-      case 'edgeDetection':
-        applyEdgeDetection(ctx, filter.intensity || 1);
-        break;
-      case 'emboss':
-        applyEmboss(ctx, filter.intensity || 1);
-        break;
-      case 'invert':
-        applyInvert(ctx);
-        break;
-      case 'grayscale':
-        applyGrayscale(ctx);
-        break;
-      case 'sepia':
-        applySepia(ctx);
-        break;
-      case 'pixelate':
-        applyPixelate(ctx, filter.size || 10);
-        break;
-      case 'brightness':
-        applyBrightness(ctx, filter.value || 0);
-        break;
-      case 'contrast':
-        applyContrast(ctx, filter.value || 0);
-        break;
-      case 'saturation':
-        applySaturation(ctx, filter.value || 0);
-        break;
-      case 'hueShift':
-        applyHueShift(ctx, filter.value || 0);
-        break;
-      case 'posterize':
-        applyPosterize(ctx, filter.levels || 4);
-        break;
-    }
-  }
-
-  ctx.restore();
-}
-
-// Individual filter implementations
-function applyGaussianBlur(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    ctx.filter = `blur(${intensity}px)`;
-  }
-}
-
-function applyMotionBlur(ctx: SKRSContext2D, intensity: number, angle: number): void {
-  if (intensity > 0) {
-    // Motion blur is approximated with directional blur
-    const radians = (angle * Math.PI) / 180;
-    const blurX = Math.cos(radians) * intensity;
-    const blurY = Math.sin(radians) * intensity;
-    ctx.filter = `blur(${Math.abs(blurX)}px ${Math.abs(blurY)}px)`;
-  }
-}
-
-function applyRadialBlur(ctx: SKRSContext2D, intensity: number, centerX: number, centerY: number): void {
-  if (intensity > 0) {
-    // Radial blur is approximated with multiple directional blurs
-    ctx.filter = `blur(${intensity}px)`;
-  }
-}
-
-function applySharpen(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    const width = ctx.canvas.width;
-    const height = ctx.canvas.height;
-    
-    // Create a copy for the sharpening kernel
-    const originalData = new Uint8ClampedArray(data);
-    
-    // Apply sharpening kernel
-    for (let y = 1; y < height - 1; y++) {
-      for (let x = 1; x < width - 1; x++) {
-        const idx = (y * width + x) * 4;
-        
-        // Sharpening kernel: [[0,-1,0],[-1,5,-1],[0,-1,0]]
-        let r = 0, g = 0, b = 0;
-        
-        for (let ky = -1; ky <= 1; ky++) {
-          for (let kx = -1; kx <= 1; kx++) {
-            const kidx = ((y + ky) * width + (x + kx)) * 4;
-            const kernelValue = (ky === 0 && kx === 0) ? 5 : -1;
-            
-            r += originalData[kidx] * kernelValue;
-            g += originalData[kidx + 1] * kernelValue;
-            b += originalData[kidx + 2] * kernelValue;
-          }
-        }
-        
-        // Apply intensity
-        data[idx] = Math.max(0, Math.min(255, originalData[idx] + (r - originalData[idx]) * intensity));
-        data[idx + 1] = Math.max(0, Math.min(255, originalData[idx + 1] + (g - originalData[idx + 1]) * intensity));
-        data[idx + 2] = Math.max(0, Math.min(255, originalData[idx + 2] + (b - originalData[idx + 2]) * intensity));
-      }
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyNoise(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    
-    for (let i = 0; i < data.length; i += 4) {
-      const noise = (Math.random() - 0.5) * intensity * 255;
-      data[i] = Math.max(0, Math.min(255, data[i] + noise));     // R
-      data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise)); // G
-      data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise)); // B
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyGrain(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    
-    for (let i = 0; i < data.length; i += 4) {
-      const grain = (Math.random() - 0.5) * intensity * 100;
-      data[i] = Math.max(0, Math.min(255, data[i] + grain));     // R
-      data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + grain)); // G
-      data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + grain)); // B
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyEdgeDetection(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    const width = ctx.canvas.width;
-    const height = ctx.canvas.height;
-    
-    // Create a copy for the edge detection kernel
-    const originalData = new Uint8ClampedArray(data);
-    
-    // Apply Sobel edge detection kernel
-    for (let y = 1; y < height - 1; y++) {
-      for (let x = 1; x < width - 1; x++) {
-        const idx = (y * width + x) * 4;
-        
-        // Sobel X kernel: [[-1,0,1],[-2,0,2],[-1,0,1]]
-        // Sobel Y kernel: [[-1,-2,-1],[0,0,0],[1,2,1]]
-        let gx = 0, gy = 0;
-        
-        for (let ky = -1; ky <= 1; ky++) {
-          for (let kx = -1; kx <= 1; kx++) {
-            const kidx = ((y + ky) * width + (x + kx)) * 4;
-            const gray = (originalData[kidx] + originalData[kidx + 1] + originalData[kidx + 2]) / 3;
-            
-            const sobelX = (kx === -1) ? -1 : (kx === 0) ? 0 : 1;
-            const sobelY = (ky === -1) ? -1 : (ky === 0) ? 0 : 1;
-            
-            gx += gray * sobelX;
-            gy += gray * sobelY;
-          }
-        }
-        
-        const magnitude = Math.sqrt(gx * gx + gy * gy) * intensity;
-        const edgeValue = Math.min(255, magnitude);
-        
-        data[idx] = edgeValue;     // R
-        data[idx + 1] = edgeValue; // G
-        data[idx + 2] = edgeValue; // B
-      }
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyEmboss(ctx: SKRSContext2D, intensity: number): void {
-  if (intensity > 0) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    const width = ctx.canvas.width;
-    const height = ctx.canvas.height;
-    
-    // Create a copy for the emboss kernel
-    const originalData = new Uint8ClampedArray(data);
-    
-    // Apply emboss kernel
-    for (let y = 1; y < height - 1; y++) {
-      for (let x = 1; x < width - 1; x++) {
-        const idx = (y * width + x) * 4;
-        
-        // Emboss kernel: [[-2,-1,0],[-1,1,1],[0,1,2]]
-        let r = 0, g = 0, b = 0;
-        
-        for (let ky = -1; ky <= 1; ky++) {
-          for (let kx = -1; kx <= 1; kx++) {
-            const kidx = ((y + ky) * width + (x + kx)) * 4;
-            let kernelValue = 0;
-            
-            if (ky === -1 && kx === -1) kernelValue = -2;
-            else if (ky === -1 && kx === 0) kernelValue = -1;
-            else if (ky === -1 && kx === 1) kernelValue = 0;
-            else if (ky === 0 && kx === -1) kernelValue = -1;
-            else if (ky === 0 && kx === 0) kernelValue = 1;
-            else if (ky === 0 && kx === 1) kernelValue = 1;
-            else if (ky === 1 && kx === -1) kernelValue = 0;
-            else if (ky === 1 && kx === 0) kernelValue = 1;
-            else if (ky === 1 && kx === 1) kernelValue = 2;
-            
-            r += originalData[kidx] * kernelValue;
-            g += originalData[kidx + 1] * kernelValue;
-            b += originalData[kidx + 2] * kernelValue;
-          }
-        }
-        
-        // Apply intensity and add 128 for emboss effect
-        data[idx] = Math.max(0, Math.min(255, 128 + r * intensity));
-        data[idx + 1] = Math.max(0, Math.min(255, 128 + g * intensity));
-        data[idx + 2] = Math.max(0, Math.min(255, 128 + b * intensity));
-      }
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyInvert(ctx: SKRSContext2D): void {
-  ctx.filter = 'invert(100%)';
-}
-
-function applyGrayscale(ctx: SKRSContext2D): void {
-  ctx.filter = 'grayscale(100%)';
-}
-
-function applySepia(ctx: SKRSContext2D): void {
-  ctx.filter = 'sepia(100%)';
-}
-
-function applyPixelate(ctx: SKRSContext2D, size: number): void {
-  if (size > 1) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    const width = ctx.canvas.width;
-    const height = ctx.canvas.height;
-    
-    // Create pixelated version
-    for (let y = 0; y < height; y += size) {
-      for (let x = 0; x < width; x += size) {
-        // Get average color of the block
-        let r = 0, g = 0, b = 0, count = 0;
-        
-        for (let dy = 0; dy < size && y + dy < height; dy++) {
-          for (let dx = 0; dx < size && x + dx < width; dx++) {
-            const idx = ((y + dy) * width + (x + dx)) * 4;
-            r += data[idx];
-            g += data[idx + 1];
-            b += data[idx + 2];
-            count++;
-          }
-        }
-        
-        r = Math.round(r / count);
-        g = Math.round(g / count);
-        b = Math.round(b / count);
-        
-        // Apply the average color to the entire block
-        for (let dy = 0; dy < size && y + dy < height; dy++) {
-          for (let dx = 0; dx < size && x + dx < width; dx++) {
-            const idx = ((y + dy) * width + (x + dx)) * 4;
-            data[idx] = r;
-            data[idx + 1] = g;
-            data[idx + 2] = b;
-          }
-        }
-      }
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}
-
-function applyBrightness(ctx: SKRSContext2D, value: number): void {
-  ctx.filter = `brightness(${100 + value}%)`;
-}
-
-function applyContrast(ctx: SKRSContext2D, value: number): void {
-  ctx.filter = `contrast(${100 + value}%)`;
-}
-
-function applySaturation(ctx: SKRSContext2D, value: number): void {
-  ctx.filter = `saturate(${100 + value}%)`;
-}
-
-function applyHueShift(ctx: SKRSContext2D, value: number): void {
-  ctx.filter = `hue-rotate(${value}deg)`;
-}
-
-function applyPosterize(ctx: SKRSContext2D, levels: number): void {
-  if (levels > 1) {
-    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-    const data = imageData.data;
-    const step = 255 / (levels - 1);
-    
-    for (let i = 0; i < data.length; i += 4) {
-      data[i] = Math.round(data[i] / step) * step;     // R
-      data[i + 1] = Math.round(data[i + 1] / step) * step; // G
-      data[i + 2] = Math.round(data[i + 2] / step) * step; // B
-    }
-    
-    ctx.putImageData(imageData, 0, 0);
-  }
-}