tokimeki-image-editor 0.4.5 → 0.4.7

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/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);
-    const format = state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png';
-    // Single async encode (toBlob) — avoids synchronous toDataURL blocking the main thread
+    if (_DEV)
+        console.timeEnd('[export] 1. WebGPU render');
+    const format = state.exportOptions.format === 'png' ? 'image/png' : 'image/jpeg';
+    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.5",
+  "version": "0.4.7",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",