tokimeki-image-editor 0.4.7 → 0.4.11

package/dist/utils/canvas.js

@@ -222,21 +222,13 @@ export async function applyTransformWithWebGPU(img, transform, adjustments, crop
             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;
                     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
-                        };
+                        const exportViewport = { zoom: 1, offsetX: 0, offsetY: 0, scale: 1 };
                         if (annotations.length > 0) {
                             applyAnnotations(finalCanvas, img, exportViewport, annotations, cropArea);
                         }

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