tokimeki-image-editor 0.1.8 → 0.1.9

package/dist/shaders/image-editor.wgsl

@@ -0,0 +1,296 @@
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+struct Uniforms {
+  // Adjustments (11 params)
+  brightness: f32,
+  contrast: f32,
+  exposure: f32,
+  highlights: f32,
+  shadows: f32,
+  saturation: f32,
+  temperature: f32,
+  sepia: f32,
+  grayscale: f32,
+  vignette: f32,
+  grain: f32,
+
+  // Viewport (4 params)
+  viewportZoom: f32,
+  viewportOffsetX: f32,
+  viewportOffsetY: f32,
+  viewportScale: f32,
+
+  // Transform (4 params)
+  rotation: f32,        // in radians
+  flipHorizontal: f32,  // 1.0 or -1.0
+  flipVertical: f32,    // 1.0 or -1.0
+  transformScale: f32,
+
+  // Canvas dimensions (2 params)
+  canvasWidth: f32,
+  canvasHeight: f32,
+
+  // Image dimensions (2 params)
+  imageWidth: f32,
+  imageHeight: f32,
+
+  // Crop area (4 params)
+  cropX: f32,
+  cropY: f32,
+  cropWidth: f32,
+  cropHeight: f32,
+};
+
+@group(0) @binding(0) var mySampler: sampler;
+@group(0) @binding(1) var myTexture: texture_2d<f32>;
+@group(0) @binding(2) var<uniform> params: Uniforms;
+
+// Full-screen triangle vertex shader
+@vertex
+fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0)
+  );
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+
+  // Convert NDC (-1 to 1) to canvas coordinates centered at origin
+  // NDC: -1 → -canvasWidth/2, 0 → 0, 1 → canvasWidth/2
+  // Note: NDC Y increases upward, but canvas Y increases downward, so flip Y
+  var coord = pos[VertexIndex] * vec2<f32>(params.canvasWidth, params.canvasHeight) * 0.5;
+  coord.y = -coord.y;
+
+  // Reverse the 2D canvas transformations:
+  // In 2D: translate(center + offset) → scale(zoom) → rotate → flip → draw(-w/2, -h/2)
+  // In WebGPU (reverse): screen → un-translate → un-scale → un-rotate → un-flip → texture
+
+  // 1. Subtract viewport offset (inverse of translate)
+  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);
+
+  // 2. Inverse zoom/scale
+  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;
+  coord = coord / totalScale;
+
+  // 3. Inverse rotation
+  if (params.rotation != 0.0) {
+    let cos_r = cos(-params.rotation);
+    let sin_r = sin(-params.rotation);
+    coord = vec2<f32>(
+      coord.x * cos_r - coord.y * sin_r,
+      coord.x * sin_r + coord.y * cos_r
+    );
+  }
+
+  // 4. Inverse flip
+  coord.x = coord.x * params.flipHorizontal;
+  coord.y = coord.y * params.flipVertical;
+
+  // 5. Convert to texture coordinates
+  // After inverse transformations, coord is in drawing space (centered at origin)
+
+  // When there's a crop, viewport.scale is adjusted to fit crop area to canvas
+  // This means coord values are scaled according to crop dimensions
+  // We need to account for this when mapping to texture coordinates
+
+  // ALWAYS use crop-aware logic
+  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {
+    // coord is in crop-centered space (units: pixels in crop area after inverse transforms)
+    // The 2D canvas draws: drawImage(img, cropX, cropY, cropW, cropH, -cropW/2, -cropH/2, cropW, cropH)
+    // This means the crop region is drawn centered, from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
+
+    // Map from drawing space to texture coordinates:
+    // Drawing space: coord ranges from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
+    // Texture space: we want to read from (cropX, cropY) to (cropX+cropW, cropY+cropH)
+
+    // Convert from centered coordinates to 0-based coordinates within crop region
+    let cropLocalX = coord.x + params.cropWidth * 0.5;
+    let cropLocalY = coord.y + params.cropHeight * 0.5;
+
+    // Convert to texture coordinates by adding crop offset and normalizing by image size
+    output.uv = vec2<f32>(
+      (params.cropX + cropLocalX) / params.imageWidth,
+      (params.cropY + cropLocalY) / params.imageHeight
+    );
+  } else {
+    // No crop - standard transformation
+    // Convert from image-centered space to top-left origin
+    coord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);
+
+    // Normalize to 0-1 range
+    output.uv = coord / vec2<f32>(params.imageWidth, params.imageHeight);
+  }
+
+  return output;
+}
+
+// Helper functions
+fn getLuminance(color: vec3<f32>) -> f32 {
+  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+// Improved 2D hash function for better randomness
+fn hash2d(p: vec2<f32>) -> f32 {
+  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
+  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
+  return fract((p3.x + p3.y) * p3.z + dot_p3);
+}
+
+fn rgbToHsl(rgb: vec3<f32>) -> vec3<f32> {
+  let maxVal = max(rgb.r, max(rgb.g, rgb.b));
+  let minVal = min(rgb.r, min(rgb.g, rgb.b));
+  var h = 0.0;
+  var s = 0.0;
+  let l = (maxVal + minVal) / 2.0;
+
+  if (maxVal != minVal) {
+    let d = maxVal - minVal;
+    s = select(d / (maxVal + minVal), d / (2.0 - maxVal - minVal), l > 0.5);
+
+    if (maxVal == rgb.r) {
+      h = ((rgb.g - rgb.b) / d + select(0.0, 6.0, rgb.g < rgb.b)) / 6.0;
+    } else if (maxVal == rgb.g) {
+      h = ((rgb.b - rgb.r) / d + 2.0) / 6.0;
+    } else {
+      h = ((rgb.r - rgb.g) / d + 4.0) / 6.0;
+    }
+  }
+
+  return vec3<f32>(h, s, l);
+}
+
+fn hslToRgb(hsl: vec3<f32>) -> vec3<f32> {
+  let h = hsl.x;
+  let s = hsl.y;
+  let l = hsl.z;
+
+  if (s == 0.0) {
+    return vec3<f32>(l, l, l);
+  }
+
+  let q = select(l + s - l * s, l * (1.0 + s), l < 0.5);
+  let p = 2.0 * l - q;
+
+  let r = hue2rgb(p, q, h + 1.0 / 3.0);
+  let g = hue2rgb(p, q, h);
+  let b = hue2rgb(p, q, h - 1.0 / 3.0);
+
+  return vec3<f32>(r, g, b);
+}
+
+fn hue2rgb(p: f32, q: f32, t_: f32) -> f32 {
+  var t = t_;
+  if (t < 0.0) { t += 1.0; }
+  if (t > 1.0) { t -= 1.0; }
+  if (t < 1.0 / 6.0) { return p + (q - p) * 6.0 * t; }
+  if (t < 1.0 / 2.0) { return q; }
+  if (t < 2.0 / 3.0) { return p + (q - p) * (2.0 / 3.0 - t) * 6.0; }
+  return p;
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  // Sample texture FIRST (must be in uniform control flow before any branching)
+  var color = textureSample(myTexture, mySampler, clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0)));
+  var rgb = color.rgb;
+
+  // Check if outside texture bounds (0-1) and set to black
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+    rgb = vec3<f32>(0.0);
+  }
+
+  // When crop is active, only show the crop region - black out everything else
+  if (params.cropWidth > 0.0) {
+    let cropMinU = params.cropX / params.imageWidth;
+    let cropMaxU = (params.cropX + params.cropWidth) / params.imageWidth;
+    let cropMinV = params.cropY / params.imageHeight;
+    let cropMaxV = (params.cropY + params.cropHeight) / params.imageHeight;
+
+    // If UV is outside the crop region, render black
+    if (uv.x < cropMinU || uv.x > cropMaxU || uv.y < cropMinV || uv.y > cropMaxV) {
+      rgb = vec3<f32>(0.0);
+    }
+  }
+
+  // 1. Brightness
+  if (params.brightness != 0.0) {
+    let factor = 1.0 + (params.brightness / 200.0);
+    rgb = rgb * factor;
+  }
+
+  // 2. Contrast
+  if (params.contrast != 0.0) {
+    let factor = 1.0 + (params.contrast / 200.0);
+    rgb = (rgb - 0.5) * factor + 0.5;
+  }
+
+  // 3. Exposure
+  if (params.exposure != 0.0) {
+    rgb = rgb * exp2(params.exposure / 100.0);
+  }
+
+  // 4. Shadows and Highlights
+  if (params.shadows != 0.0 || params.highlights != 0.0) {
+    let luma = getLuminance(rgb);
+
+    if (params.shadows != 0.0) {
+      let shadowMask = pow(1.0 - luma, 2.0);
+      rgb = rgb - rgb * (params.shadows / 100.0) * shadowMask * 0.5;
+    }
+
+    if (params.highlights != 0.0) {
+      let highlightMask = pow(luma, 2.0);
+      rgb = rgb + rgb * (params.highlights / 100.0) * highlightMask * 0.5;
+    }
+  }
+
+  // 5. Saturation
+  if (params.saturation != 0.0) {
+    rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
+    var hsl = rgbToHsl(rgb);
+    hsl.y = clamp(hsl.y * (1.0 + params.saturation / 100.0), 0.0, 1.0);
+    rgb = hslToRgb(hsl);
+  }
+
+  // 5.5. Color Temperature
+  // Warm (positive): add red, subtract blue
+  // Cool (negative): subtract red, add blue
+  if (params.temperature != 0.0) {
+    let temp = params.temperature / 100.0;
+    rgb.r = rgb.r + temp * 0.1;
+    rgb.b = rgb.b - temp * 0.1;
+  }
+
+  // 6. Sepia
+  if (params.sepia != 0.0) {
+    let sepiaAmount = params.sepia / 100.0;
+    let tr = 0.393 * rgb.r + 0.769 * rgb.g + 0.189 * rgb.b;
+    let tg = 0.349 * rgb.r + 0.686 * rgb.g + 0.168 * rgb.b;
+    let tb = 0.272 * rgb.r + 0.534 * rgb.g + 0.131 * rgb.b;
+    rgb = mix(rgb, vec3<f32>(tr, tg, tb), sepiaAmount);
+  }
+
+  // 7. Grayscale
+  if (params.grayscale != 0.0) {
+    let gray = getLuminance(rgb);
+    rgb = mix(rgb, vec3<f32>(gray), params.grayscale / 100.0);
+  }
+
+  // 8. Vignette
+  if (params.vignette != 0.0) {
+    let center = vec2<f32>(0.5, 0.5);
+    let dist = distance(uv, center);
+    let vignetteFactor = params.vignette / 100.0;
+    let vignetteAmount = pow(dist * 1.4, 2.0);
+    rgb = rgb * (1.0 + vignetteFactor * vignetteAmount * 1.5);
+  }
+
+  // Clamp final result
+  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
+
+  return vec4<f32>(rgb, color.a);
+}

package/dist/types.d.ts

@@ -50,10 +50,12 @@ export interface AdjustmentsState {
     shadows: number;
     brightness: number;
     saturation: number;
-    hue: number;
+    temperature: number;
     vignette: number;
     sepia: number;
     grayscale: number;
+    blur: number;
+    grain: number;
 }
 export interface FilterPreset {
     id: string;

package/dist/utils/adjustments.d.ts

@@ -11,9 +11,10 @@ export declare function createDefaultAdjustments(): AdjustmentsState;
 export declare function applyAdjustments(ctx: CanvasRenderingContext2D, adjustments: AdjustmentsState): void;
 /**
  * Apply ALL adjustments via pixel manipulation
+ * Uses WebGPU acceleration when available, falls back to CPU otherwise
  * This works in all browsers including Safari (no ctx.filter needed)
  */
-export declare function applyAllAdjustments(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, adjustments: AdjustmentsState, cropArea?: CropArea | null): void;
+export declare function applyAllAdjustments(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, adjustments: AdjustmentsState, cropArea?: CropArea | null): Promise<void>;
 /**
  * Apply Gaussian blur to a region of canvas via pixel manipulation (Safari-compatible)
  * Uses optimized separable box blur with running sums for O(n) performance

package/dist/utils/adjustments.js

@@ -9,10 +9,12 @@ export function createDefaultAdjustments() {
         shadows: 0,
         brightness: 0,
         saturation: 0,
-        hue: 0,
+        temperature: 0,
         vignette: 0,
         sepia: 0,
-        grayscale: 0
+        grayscale: 0,
+        blur: 0,
+        grain: 0
     };
 }
 /**
@@ -88,9 +90,10 @@ export function applyAdjustments(ctx, adjustments) {
 }
 /**
  * Apply ALL adjustments via pixel manipulation
+ * Uses WebGPU acceleration when available, falls back to CPU otherwise
  * This works in all browsers including Safari (no ctx.filter needed)
  */
-export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea) {
+export async function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea) {
     // Skip if no adjustments needed
     if (adjustments.exposure === 0 &&
         adjustments.contrast === 0 &&
@@ -98,15 +101,36 @@ export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea
         adjustments.shadows === 0 &&
         adjustments.brightness === 0 &&
         adjustments.saturation === 0 &&
-        adjustments.hue === 0 &&
+        adjustments.temperature === 0 &&
         adjustments.vignette === 0 &&
         adjustments.sepia === 0 &&
-        adjustments.grayscale === 0) {
+        adjustments.grayscale === 0 &&
+        adjustments.blur === 0 &&
+        adjustments.grain === 0) {
         return;
     }
+    // Calculate image dimensions for GPU
+    const imgWidth = cropArea ? cropArea.width : img.width;
+    const imgHeight = cropArea ? cropArea.height : img.height;
+    const totalScale = viewport.scale * viewport.zoom;
+    const scaledImageWidth = imgWidth * totalScale;
+    const scaledImageHeight = imgHeight * totalScale;
+    // NOTE: WebGPU compute shader approach is disabled because Canvas.svelte uses 2D context
+    // A canvas cannot have both 2D and WebGPU contexts simultaneously
+    // Future: Implement WebGPU render pipeline in a separate canvas layer
+    // Use CPU implementation
+    applyAllAdjustmentsCPU(canvas, img, viewport, adjustments, cropArea);
+}
+/**
+ * CPU-based implementation of adjustments (original implementation)
+ * Used as fallback when WebGPU is unavailable
+ */
+function applyAllAdjustmentsCPU(canvas, img, viewport, adjustments, cropArea) {
     const ctx = canvas.getContext('2d');
-    if (!ctx)
+    if (!ctx) {
+        console.error('Failed to get 2D context!');
         return;
+    }
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const data = imageData.data;
     // Pre-calculate adjustment factors
@@ -116,19 +140,22 @@ export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea
     const hasShadows = adjustments.shadows !== 0;
     const hasBrightness = adjustments.brightness !== 0;
     const hasSaturation = adjustments.saturation !== 0;
-    const hasHue = adjustments.hue !== 0;
+    const hasTemperature = adjustments.temperature !== 0;
     const hasVignette = adjustments.vignette !== 0;
     const hasSepia = adjustments.sepia !== 0;
     const hasGrayscale = adjustments.grayscale !== 0;
+    const hasBlur = adjustments.blur > 0;
+    const hasGrain = adjustments.grain > 0;
     const exposureFactor = hasExposure ? Math.pow(2, adjustments.exposure / 100) : 1;
     const contrastFactor = hasContrast ? 1 + (adjustments.contrast / 200) : 1;
     const brightnessFactor = hasBrightness ? 1 + (adjustments.brightness / 200) : 1;
     const highlightsFactor = adjustments.highlights / 100;
     const shadowsFactor = adjustments.shadows / 100;
     const saturationFactor = hasSaturation ? adjustments.saturation / 100 : 0;
-    const hueShift = adjustments.hue;
+    const temperatureFactor = adjustments.temperature / 100;
     const sepiaAmount = adjustments.sepia / 100;
     const grayscaleAmount = adjustments.grayscale / 100;
+    const grainAmount = hasGrain ? adjustments.grain / 100 : 0;
     // Vignette pre-calculations
     const imgWidth = cropArea ? cropArea.width : img.width;
     const imgHeight = cropArea ? cropArea.height : img.height;
@@ -142,7 +169,7 @@ export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea
     const vignetteFactor = adjustments.vignette / 100;
     const vignetteStrength = 1.5;
     const needsLuminance = hasHighlights || hasShadows;
-    const needsHSL = hasSaturation || hasHue;
+    const needsHSL = hasSaturation;
     for (let i = 0; i < data.length; i += 4) {
         let r = data[i];
         let g = data[i + 1];
@@ -198,11 +225,16 @@ export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea
                 s = Math.max(0, Math.min(100, s * (1 + saturationFactor)));
             }
             // Adjust hue
-            if (hasHue) {
-                h = (h + hueShift + 360) % 360;
-            }
+            /* if (hasHue) {
+              h = (h + hueShift + 360) % 360;
+            } */
             [r, g, b] = hslToRgb(h, s, l);
         }
+        // Apply temperature
+        if (hasTemperature) {
+            r = r + temperatureFactor * 0.1 * 255;
+            b = b - temperatureFactor * 0.1 * 255;
+        }
         // Apply sepia
         if (hasSepia) {
             const tr = (0.393 * r + 0.769 * g + 0.189 * b);
@@ -234,12 +266,67 @@ export function applyAllAdjustments(canvas, img, viewport, adjustments, cropArea
             g *= vignetteMultiplier;
             b *= vignetteMultiplier;
         }
-        // Clamp final values to 0-255
+        // Clamp values before grain processing
         data[i] = Math.max(0, Math.min(255, r));
         data[i + 1] = Math.max(0, Math.min(255, g));
         data[i + 2] = Math.max(0, Math.min(255, b));
     }
+    // Put adjusted image data back to canvas
     ctx.putImageData(imageData, 0, 0);
+    // Apply Gaussian blur to entire image if blur adjustment is enabled
+    if (hasBlur) {
+        const blurAmount = adjustments.blur / 100;
+        // Map blur 0-100 to radius 0-10 (blur tool scale)
+        const blurRadius = blurAmount * 10.0 * totalScale;
+        if (blurRadius > 0.1) {
+            applyGaussianBlur(canvas, 0, 0, canvas.width, canvas.height, blurRadius);
+        }
+    }
+    // Apply film grain - Applied after blur for sharp grain on top
+    if (hasGrain) {
+        // Get image data after blur has been applied
+        const grainedData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const gData = grainedData.data;
+        // Helper function for hash
+        const hash2d = (x, y) => {
+            const p3x = (x * 0.1031) % 1;
+            const p3y = (y * 0.1030) % 1;
+            const p3z = (x * 0.0973) % 1;
+            const dotP3 = p3x * (p3y + 33.33) + p3y * (p3z + 33.33) + p3z * (p3x + 33.33);
+            return ((p3x + p3y) * p3z + dotP3) % 1;
+        };
+        for (let i = 0; i < gData.length; i += 4) {
+            let r = gData[i];
+            let g = gData[i + 1];
+            let b = gData[i + 2];
+            const pixelIndex = i / 4;
+            const canvasX = pixelIndex % canvas.width;
+            const canvasY = Math.floor(pixelIndex / canvas.width);
+            // Convert canvas coordinates to image coordinates
+            const imageX = ((canvasX - imageCenterX) / totalScale + imgWidth / 2);
+            const imageY = ((canvasY - imageCenterY) / totalScale + imgHeight / 2);
+            // Calculate luminance for grain masking
+            const luma = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+            // Grain visibility mask: most visible in midtones
+            let lumaMask = 1.0 - Math.abs(luma - 0.5) * 2.0;
+            lumaMask = Math.pow(lumaMask, 0.5); // Softer falloff
+            // Multi-scale grain for organic film look
+            const fineGrain = hash2d(Math.floor(imageX / 2.5), Math.floor(imageY / 2.5)) - 0.5;
+            const mediumGrain = hash2d(Math.floor(imageX / 5.5) + 123.45, Math.floor(imageY / 5.5) + 678.90) - 0.5;
+            const coarseGrain = hash2d(Math.floor(imageX / 9.0) + 345.67, Math.floor(imageY / 9.0) + 890.12) - 0.5;
+            // Combine grain layers
+            const grainNoise = fineGrain * 0.5 + mediumGrain * 0.3 + coarseGrain * 0.2;
+            // Strong grain intensity
+            const strength = lumaMask * grainAmount * 0.5 * 255;
+            r += grainNoise * strength;
+            g += grainNoise * strength;
+            b += grainNoise * strength;
+            gData[i] = Math.max(0, Math.min(255, r));
+            gData[i + 1] = Math.max(0, Math.min(255, g));
+            gData[i + 2] = Math.max(0, Math.min(255, b));
+        }
+        ctx.putImageData(grainedData, 0, 0);
+    }
 }
 /**
  * Apply Gaussian blur to a region of canvas via pixel manipulation (Safari-compatible)

package/dist/utils/canvas.d.ts

@@ -3,10 +3,15 @@ export declare function preloadStampImage(url: string): Promise<HTMLImageElement
 export declare function getStampImage(url: string): HTMLImageElement | null;
 export declare function loadImage(file: File): Promise<HTMLImageElement>;
 export declare function calculateFitScale(imageWidth: number, imageHeight: number, canvasWidth: number, canvasHeight: number): number;
-export declare function drawImage(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): void;
+export declare function drawImage(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<void>;
 export declare function exportCanvas(canvas: HTMLCanvasElement, options: ExportOptions): string;
 export declare function downloadImage(dataUrl: string, filename: string): void;
-export declare function applyTransform(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): HTMLCanvasElement;
+export declare function applyTransform(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<HTMLCanvasElement>;
+/**
+ * Apply all transformations and export using WebGPU (when available)
+ * Falls back to Canvas2D if WebGPU is not supported
+ */
+export declare function applyTransformWithWebGPU(img: HTMLImageElement, transform: TransformState, adjustments: AdjustmentsState, cropArea?: CropArea | null, blurAreas?: BlurArea[], stampAreas?: StampArea[]): Promise<HTMLCanvasElement>;
 export declare function screenToImageCoords(screenX: number, screenY: number, canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, transform: TransformState): {
     x: number;
     y: number;

package/dist/utils/canvas.js

@@ -42,7 +42,7 @@ export function calculateFitScale(imageWidth, imageHeight, canvasWidth, canvasHe
     const scaleY = canvasHeight / imageHeight;
     return Math.min(scaleX, scaleY, 1); // Don't scale up, only down
 }
-export function drawImage(canvas, img, viewport, transform, adjustments, cropArea, blurAreas, stampAreas) {
+export async function drawImage(canvas, img, viewport, transform, adjustments, cropArea, blurAreas, stampAreas) {
     const ctx = canvas.getContext('2d');
     if (!ctx)
         return;
@@ -73,8 +73,8 @@ export function drawImage(canvas, img, viewport, transform, adjustments, cropAre
     }
     ctx.restore();
     // Apply all adjustments via pixel manipulation (Safari-compatible)
-    // This modifies the canvas pixels after drawing
-    applyAllAdjustments(canvas, img, viewport, adjustments, cropArea);
+    // Uses WebGPU acceleration when available, falls back to CPU
+    await applyAllAdjustments(canvas, img, viewport, adjustments, cropArea);
     // Apply blur areas
     if (blurAreas && blurAreas.length > 0) {
         applyBlurAreas(canvas, img, viewport, blurAreas, cropArea);
@@ -96,7 +96,7 @@ export function downloadImage(dataUrl, filename) {
     link.href = dataUrl;
     link.click();
 }
-export function applyTransform(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
+export async function applyTransform(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     if (!ctx)
@@ -122,6 +122,7 @@ export function applyTransform(img, transform, adjustments, cropArea = null, blu
     }
     ctx.restore();
     // Apply all adjustments via pixel manipulation (Safari-compatible)
+    // Uses WebGPU acceleration when available, falls back to CPU
     // For export, create a centered viewport with no offset
     const exportViewport = {
         zoom: 1,
@@ -129,7 +130,7 @@ export function applyTransform(img, transform, adjustments, cropArea = null, blu
         offsetY: 0,
         scale: 1
     };
-    applyAllAdjustments(canvas, img, exportViewport, adjustments, cropArea);
+    await applyAllAdjustments(canvas, img, exportViewport, adjustments, cropArea);
     // Apply blur areas for export
     if (blurAreas.length > 0) {
         applyBlurAreas(canvas, img, exportViewport, blurAreas, cropArea);
@@ -140,6 +141,48 @@ export function applyTransform(img, transform, adjustments, cropArea = null, blu
     }
     return canvas;
 }
+/**
+ * Apply all transformations and export using WebGPU (when available)
+ * Falls back to Canvas2D if WebGPU is not supported
+ */
+export async function applyTransformWithWebGPU(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
+    // Try WebGPU export first
+    if (navigator.gpu) {
+        try {
+            const { exportWithWebGPU } = await import('./webgpu-render');
+            const webgpuCanvas = await exportWithWebGPU(img, adjustments, transform, cropArea, blurAreas);
+            if (webgpuCanvas) {
+                // Apply stamps on top (WebGPU doesn't handle stamps yet)
+                if (stampAreas.length > 0) {
+                    // Create a new Canvas2D to composite WebGPU result + stamps
+                    const finalCanvas = document.createElement('canvas');
+                    finalCanvas.width = webgpuCanvas.width;
+                    finalCanvas.height = webgpuCanvas.height;
+                    const ctx = finalCanvas.getContext('2d');
+                    if (ctx) {
+                        // Draw WebGPU result
+                        ctx.drawImage(webgpuCanvas, 0, 0);
+                        // Apply stamps on top
+                        const exportViewport = {
+                            zoom: 1,
+                            offsetX: 0,
+                            offsetY: 0,
+                            scale: 1
+                        };
+                        applyStamps(finalCanvas, img, exportViewport, stampAreas, cropArea);
+                        return finalCanvas;
+                    }
+                }
+                return webgpuCanvas;
+            }
+        }
+        catch (error) {
+            console.warn('WebGPU export failed, falling back to Canvas2D:', error);
+        }
+    }
+    // Fallback to Canvas2D
+    return applyTransform(img, transform, adjustments, cropArea, blurAreas, stampAreas);
+}
 export function screenToImageCoords(screenX, screenY, canvas, img, viewport, transform) {
     const rect = canvas.getBoundingClientRect();
     // Convert screen coordinates to canvas coordinates