tokimeki-image-editor 0.4.6 → 0.4.9

package/dist/components/ImageEditor.svelte

@@ -193,13 +193,22 @@ async function handleComplete() {
         return;
     isApplying = true;
     haptic('success');
+    const _DEV = import.meta.env.DEV;
+    if (_DEV)
+        console.time('[handleComplete] total');
     try {
         const result = await exportImage(state);
+        if (_DEV)
+            console.time('[handleComplete] onComplete callback');
         if (result)
             onComplete(result.dataUrl, { blob: result.blob, width: result.width, height: result.height });
+        if (_DEV)
+            console.timeEnd('[handleComplete] onComplete callback');
     }
     finally {
         isApplying = false;
+        if (_DEV)
+            console.timeEnd('[handleComplete] total');
     }
 }
 function handleCancel() {

package/dist/utils/canvas.js

@@ -220,33 +220,41 @@ export async function applyTransformWithWebGPU(img, transform, adjustments, crop
             const { exportWithWebGPU } = await import('./webgpu-render');
             const webgpuCanvas = await exportWithWebGPU(img, adjustments, transform, cropArea, blurAreas);
             if (webgpuCanvas) {
-                // Apply stamps and annotations on top (WebGPU doesn't handle these yet)
-                if (stampAreas.length > 0 || annotations.length > 0) {
-                    // Create a new Canvas2D to composite WebGPU result + stamps + annotations
-                    const finalCanvas = document.createElement('canvas');
-                    finalCanvas.width = webgpuCanvas.width;
-                    finalCanvas.height = webgpuCanvas.height;
+                // Copy WebGPU result to a Canvas2D canvas.
+                // Calling toBlob directly on a WebGPU canvas triggers expensive browser
+                // compositor layerization in complex DOM trees. Canvas2D avoids this.
+                // Use OffscreenCanvas for the initial blit to bypass the compositor entirely.
+                const w = webgpuCanvas.width;
+                const h = webgpuCanvas.height;
+                let finalCanvas;
+                if (typeof OffscreenCanvas !== 'undefined') {
+                    // OffscreenCanvas path: completely avoids DOM compositor
+                    const offscreen = new OffscreenCanvas(w, h);
+                    const offCtx = offscreen.getContext('2d');
+                    offCtx.drawImage(webgpuCanvas, 0, 0);
+                    // Transfer to a regular canvas for stamps/annotations (which need DOM canvas APIs)
+                    finalCanvas = document.createElement('canvas');
+                    finalCanvas.width = w;
+                    finalCanvas.height = h;
                     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
-                        };
-                        if (annotations.length > 0) {
-                            applyAnnotations(finalCanvas, img, exportViewport, annotations, cropArea);
-                        }
-                        if (stampAreas.length > 0) {
-                            applyStamps(finalCanvas, img, exportViewport, stampAreas, cropArea);
-                        }
-                        return finalCanvas;
-                    }
+                    ctx.drawImage(offscreen, 0, 0);
+                }
+                else {
+                    finalCanvas = document.createElement('canvas');
+                    finalCanvas.width = w;
+                    finalCanvas.height = h;
+                    const ctx = finalCanvas.getContext('2d');
+                    ctx.drawImage(webgpuCanvas, 0, 0);
+                }
+                // Apply stamps and annotations on top
+                const exportViewport = { zoom: 1, offsetX: 0, offsetY: 0, scale: 1 };
+                if (annotations.length > 0) {
+                    applyAnnotations(finalCanvas, img, exportViewport, annotations, cropArea);
+                }
+                if (stampAreas.length > 0) {
+                    applyStamps(finalCanvas, img, exportViewport, stampAreas, cropArea);
                 }
-                return webgpuCanvas;
+                return finalCanvas;
             }
         }
         catch (error) {

package/dist/utils/editor-core.js

@@ -49,8 +49,8 @@ export function createDefaultTransform() {
  */
 export function createDefaultExportOptions() {
     return {
-        format: 'png',
-        quality: 0.9
+        format: 'jpeg',
+        quality: 0.92
     };
 }
 /**
@@ -350,18 +350,35 @@ export function applyKeyboardAction(state, action) {
 export async function exportImage(state) {
     if (!state.imageData.original)
         return null;
+    const _DEV = import.meta.env.DEV;
+    if (_DEV)
+        console.time('[export] total');
+    if (_DEV)
+        console.time('[export] 1. WebGPU render');
     const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas, state.annotations);
+    if (_DEV)
+        console.timeEnd('[export] 1. WebGPU render');
     const format = state.exportOptions.format === 'png' ? 'image/png' : 'image/jpeg';
-    // Single async encode (toBlob) — avoids synchronous toDataURL blocking the main thread
+    if (_DEV)
+        console.time('[export] 2. toBlob');
     const blob = await new Promise((resolve) => {
         exportCanvas.toBlob(b => resolve(b), format, state.exportOptions.quality);
     });
-    // Convert blob to data URL without re-encoding (just base64-wraps the existing bytes)
+    if (_DEV) {
+        console.timeEnd('[export] 2. toBlob');
+        console.log('[export] blob:', (blob.size / 1024 / 1024).toFixed(1) + 'MB');
+    }
+    if (_DEV)
+        console.time('[export] 3. readAsDataURL');
     const dataUrl = await new Promise((resolve) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result);
         reader.readAsDataURL(blob);
     });
+    if (_DEV) {
+        console.timeEnd('[export] 3. readAsDataURL');
+        console.timeEnd('[export] total');
+    }
     // Dimensions directly from the export canvas (already crop+rotation adjusted)
     return {
         dataUrl,

package/dist/utils/webgpu-render.js

@@ -1035,6 +1035,9 @@ function getExportPipelines(device) {
  */
 export async function exportWithWebGPU(imageSource, adjustments, transform, cropArea = null, blurAreas = []) {
     try {
+        const _DEV = import.meta.env.DEV;
+        if (_DEV)
+            console.time('[exportGPU] total');
         if (!navigator.gpu) {
             console.warn('WebGPU not supported for export');
             return null;
@@ -1066,10 +1069,13 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
             return null;
         }
         context.configure({ device, format, alphaMode: 'premultiplied' });
-        // Upload image as texture
+        if (_DEV)
+            console.time('[exportGPU] a. createImageBitmap');
         const bitmap = imageSource instanceof ImageBitmap
             ? imageSource
             : await createImageBitmap(imageSource);
+        if (_DEV)
+            console.timeEnd('[exportGPU] a. createImageBitmap');
         const texture = device.createTexture({
             size: [bitmap.width, bitmap.height, 1],
             format: 'rgba8unorm',
@@ -1156,6 +1162,8 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
                 { binding: 4, resource: curveLUTTexture.createView() },
             ],
         });
+        if (_DEV)
+            console.time('[exportGPU] b. render passes');
         // Track which texture holds the current result for the grain/final pass
         let currentResultView = intermediate1.createView();
         // Helper: submit a single render pass with its own command encoder
@@ -1382,7 +1390,13 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
         const canvasView = context.getCurrentTexture().createView();
         createRenderPass(finalEncoder, canvasView, grainPipeline, grainBindGroup);
         device.queue.submit([finalEncoder.finish()]);
+        if (_DEV)
+            console.timeEnd('[exportGPU] b. render passes');
+        if (_DEV)
+            console.time('[exportGPU] c. onSubmittedWorkDone');
         await device.queue.onSubmittedWorkDone();
+        if (_DEV)
+            console.timeEnd('[exportGPU] c. onSubmittedWorkDone');
         // Cleanup per-export resources (pipelines/sampler are cached)
         texture.destroy();
         intermediate1.destroy();
@@ -1395,6 +1409,8 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
         sharpenUniformBuffer.destroy();
         denoiseUniformBuffer.destroy();
         curveLUTTexture.destroy();
+        if (_DEV)
+            console.timeEnd('[exportGPU] total');
         return canvas;
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokimeki-image-editor",
-  "version": "0.4.6",
+  "version": "0.4.9",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",