tokimeki-image-editor 0.4.9 → 0.4.12

package/dist/utils/canvas.js

@@ -220,41 +220,25 @@ 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) {
-                // 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;
+                // Apply stamps and annotations on top (WebGPU doesn't handle these yet)
+                if (stampAreas.length > 0 || annotations.length > 0) {
+                    const finalCanvas = document.createElement('canvas');
+                    finalCanvas.width = webgpuCanvas.width;
+                    finalCanvas.height = webgpuCanvas.height;
                     const ctx = finalCanvas.getContext('2d');
-                    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);
+                    if (ctx) {
+                        ctx.drawImage(webgpuCanvas, 0, 0);
+                        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;
+                    }
                 }
-                return finalCanvas;
+                return webgpuCanvas;
             }
         }
         catch (error) {

package/dist/utils/editor-core.js

@@ -344,6 +344,31 @@ export function applyKeyboardAction(state, action) {
             return state;
     }
 }
+/**
+ * Encode pixel data to Blob in a Web Worker.
+ * Completely isolated from main thread GPU/compositor — avoids the browser
+ * layerization bottleneck that makes toBlob extremely slow on complex pages.
+ */
+function encodeInWorker(imageData, format, quality) {
+    return new Promise((resolve, reject) => {
+        const code = `self.onmessage=async e=>{const{pixels,w,h,fmt,q}=e.data;const c=new OffscreenCanvas(w,h);c.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(pixels),w,h),0,0);const b=await c.convertToBlob({type:fmt,quality:q});self.postMessage(b)}`;
+        const url = URL.createObjectURL(new Blob([code], { type: 'application/javascript' }));
+        const worker = new Worker(url);
+        worker.onmessage = (e) => {
+            resolve(e.data);
+            worker.terminate();
+            URL.revokeObjectURL(url);
+        };
+        worker.onerror = (e) => {
+            reject(new Error('Worker encode failed: ' + e.message));
+            worker.terminate();
+            URL.revokeObjectURL(url);
+        };
+        // Transfer the ArrayBuffer (zero-copy)
+        const buffer = imageData.data.buffer;
+        worker.postMessage({ pixels: buffer, w: imageData.width, h: imageData.height, fmt: format, q: quality }, [buffer]);
+    });
+}
 /**
  * Export editor state to image
  */
@@ -359,24 +384,34 @@ export async function exportImage(state) {
     if (_DEV)
         console.timeEnd('[export] 1. WebGPU render');
     const format = state.exportOptions.format === 'png' ? 'image/png' : 'image/jpeg';
+    const w = exportCanvas.width;
+    const h = exportCanvas.height;
+    // Extract pixel data on main thread
     if (_DEV)
-        console.time('[export] 2. toBlob');
-    const blob = await new Promise((resolve) => {
-        exportCanvas.toBlob(b => resolve(b), format, state.exportOptions.quality);
-    });
+        console.time('[export] 2. getImageData');
+    const ctx = exportCanvas.getContext('2d');
+    const imageData = ctx
+        ? ctx.getImageData(0, 0, w, h)
+        : new ImageData(w, h);
+    if (_DEV)
+        console.timeEnd('[export] 2. getImageData');
+    // Encode in a Web Worker to completely isolate from main thread GPU/compositor
+    if (_DEV)
+        console.time('[export] 3. worker encode');
+    const blob = await encodeInWorker(imageData, format, state.exportOptions.quality);
     if (_DEV) {
-        console.timeEnd('[export] 2. toBlob');
+        console.timeEnd('[export] 3. worker encode');
         console.log('[export] blob:', (blob.size / 1024 / 1024).toFixed(1) + 'MB');
     }
     if (_DEV)
-        console.time('[export] 3. readAsDataURL');
+        console.time('[export] 4. 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] 4. readAsDataURL');
         console.timeEnd('[export] total');
     }
     // Dimensions directly from the export canvas (already crop+rotation adjusted)

package/dist/utils/webgpu-render.js

@@ -1068,7 +1068,10 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
             console.warn('Failed to get WebGPU context for export');
             return null;
         }
-        context.configure({ device, format, alphaMode: 'premultiplied' });
+        context.configure({
+            device, format, alphaMode: 'premultiplied',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+        });
         if (_DEV)
             console.time('[exportGPU] a. createImageBitmap');
         const bitmap = imageSource instanceof ImageBitmap
@@ -1386,18 +1389,63 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
                 { binding: 2, resource: { buffer: grainUniformBuffer } },
             ],
         });
+        // Render final pass to canvas AND copy pixels to CPU buffer in the same command
+        const canvasTexture = context.getCurrentTexture();
         const finalEncoder = device.createCommandEncoder();
-        const canvasView = context.getCurrentTexture().createView();
-        createRenderPass(finalEncoder, canvasView, grainPipeline, grainBindGroup);
+        createRenderPass(finalEncoder, canvasTexture.createView(), grainPipeline, grainBindGroup);
+        // Copy rendered pixels directly from GPU texture to a CPU-readable buffer.
+        // This bypasses browser compositor layerization that makes drawImage/toBlob
+        // extremely slow on pages with many compositing layers.
+        const bytesPerRow = Math.ceil(outputWidth * 4 / 256) * 256; // 256-byte alignment required by WebGPU
+        const readBuffer = device.createBuffer({
+            size: bytesPerRow * outputHeight,
+            usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+        });
+        finalEncoder.copyTextureToBuffer({ texture: canvasTexture }, { buffer: readBuffer, bytesPerRow }, [outputWidth, outputHeight]);
         device.queue.submit([finalEncoder.finish()]);
         if (_DEV)
             console.timeEnd('[exportGPU] b. render passes');
         if (_DEV)
-            console.time('[exportGPU] c. onSubmittedWorkDone');
-        await device.queue.onSubmittedWorkDone();
+            console.time('[exportGPU] c. GPU readback');
+        await readBuffer.mapAsync(GPUMapMode.READ);
+        const gpuData = new Uint8Array(readBuffer.getMappedRange());
+        // Build a pure Canvas2D from the GPU pixel data.
+        // toBlob on this canvas won't trigger compositor layerization.
+        const resultCanvas = document.createElement('canvas');
+        resultCanvas.width = outputWidth;
+        resultCanvas.height = outputHeight;
+        const ctx2d = resultCanvas.getContext('2d');
+        const imageData = ctx2d.createImageData(outputWidth, outputHeight);
+        const dst = new Uint32Array(imageData.data.buffer);
+        const isBGRA = format === 'bgra8unorm';
+        const rowPixels = bytesPerRow / 4;
+        if (isBGRA) {
+            // Swap R↔B channels: BGRA → RGBA
+            const src = new Uint32Array(gpuData.buffer, gpuData.byteOffset, gpuData.byteLength / 4);
+            for (let y = 0; y < outputHeight; y++) {
+                const srcRow = y * rowPixels;
+                const dstRow = y * outputWidth;
+                for (let x = 0; x < outputWidth; x++) {
+                    const p = src[srcRow + x];
+                    dst[dstRow + x] = (p & 0xFF00FF00) | ((p & 0xFF) << 16) | ((p >> 16) & 0xFF);
+                }
+            }
+        }
+        else {
+            // RGBA — just copy rows (skip padding)
+            const src = new Uint8Array(gpuData.buffer, gpuData.byteOffset, gpuData.byteLength);
+            const dstBytes = imageData.data;
+            const rowBytes = outputWidth * 4;
+            for (let y = 0; y < outputHeight; y++) {
+                dstBytes.set(src.subarray(y * bytesPerRow, y * bytesPerRow + rowBytes), y * rowBytes);
+            }
+        }
+        ctx2d.putImageData(imageData, 0, 0);
+        readBuffer.unmap();
         if (_DEV)
-            console.timeEnd('[exportGPU] c. onSubmittedWorkDone');
-        // Cleanup per-export resources (pipelines/sampler are cached)
+            console.timeEnd('[exportGPU] c. GPU readback');
+        // Cleanup
+        readBuffer.destroy();
         texture.destroy();
         intermediate1.destroy();
         intermediate2?.destroy();
@@ -1411,7 +1459,7 @@ export async function exportWithWebGPU(imageSource, adjustments, transform, crop
         curveLUTTexture.destroy();
         if (_DEV)
             console.timeEnd('[exportGPU] total');
-        return canvas;
+        return resultCanvas;
     }
     catch (error) {
         console.error('Failed to export with WebGPU:', error);

package/package.json

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