fix: capture at exact CSS pixel dimensions (scale:1) to avoid retina 2x pixelation

Author: bnqtoan

app/src/components/bulk-canvas-card.vue

@@ -160,6 +160,7 @@ onMounted(() => {
 .card__render-inner {
   transform-origin: top left;
   pointer-events: none;
+  image-rendering: -webkit-optimize-contrast;
 }
 
 .card__placeholder {

app/src/snapdom.d.ts

@@ -1,11 +1,15 @@
 declare module '@zumer/snapdom' {
+  interface SnapdomOptions {
+    scale?: number
+  }
   interface ToBlobOptions {
     type?: string
     scale?: number
   }
   interface SnapdomResult {
     toBlob(options?: ToBlobOptions): Promise<Blob>
+    toCanvas(options?: { scale?: number }): Promise<HTMLCanvasElement>
     toPng(): Promise<HTMLImageElement>
   }
-  export function snapdom(element: HTMLElement): Promise<SnapdomResult>
+  export function snapdom(element: HTMLElement, options?: SnapdomOptions): Promise<SnapdomResult>
 }

app/src/views/BuilderView.vue

@@ -205,10 +205,10 @@ async function exportPng() {
     const origT = wrapper!.style.transform
     wrapper!.style.transform = 'none'
 
-    // Capture with snapdom at native resolution
-    const result = await snapdom(thumb) as any
-    const canvas = await result.toCanvas()
-    const blob = await new Promise<Blob>((resolve) => canvas.toBlob((b: Blob) => resolve(b), 'image/png'))
+    // Capture at exact CSS pixel dimensions (scale:1 avoids retina 2x)
+    const result = await snapdom(thumb, { scale: 1 })
+    const canvas = await result.toCanvas({ scale: 1 })
+    const blob = await new Promise<Blob>((resolve) => canvas.toBlob((b) => resolve(b!), 'image/png'))
 
     // Restore transform
     wrapper!.style.transform = origT

app/src/views/BulkCreateView.vue

@@ -37,8 +37,9 @@ async function captureCanvas(id: string): Promise<{ id: string; canvas: HTMLCanv
   }))
 
   const { snapdom } = await import('@zumer/snapdom')
-  const result = await snapdom(thumb) as any
-  const c = await result.toCanvas() as HTMLCanvasElement
+  // scale:1 ensures we capture at exact CSS pixel dimensions (not retina 2x)
+  const result = await snapdom(thumb, { scale: 1 })
+  const c = await result.toCanvas({ scale: 1 }) as HTMLCanvasElement
 
   // Restore
   if (scaleEl) scaleEl.style.transform = origTransform