tokimeki-image-editor 0.4.9 → 0.4.11

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

@@ -358,6 +358,12 @@ export async function exportImage(state) {
     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');
+    // Diagnostic: force GPU readback to measure deferred drawImage cost
+    if (_DEV) {
+        console.time('[export] 1b. force readback (getImageData)');
+        exportCanvas.getContext('2d')?.getImageData(0, 0, 1, 1);
+        console.timeEnd('[export] 1b. force readback (getImageData)');
+    }
     const format = state.exportOptions.format === 'png' ? 'image/png' : 'image/jpeg';
     if (_DEV)
         console.time('[export] 2. toBlob');

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.11",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",