feat(frame-studio): full-resolution export for 48MP+ photos

Add tiled canvas rendering to bypass iOS Safari's ~16M pixel canvas
limit. Large images are rendered in horizontal strips, pixel data is
combined into a full-size buffer, and encoded using jpeg-js (JPEG) or
upng-js (PNG). Small images use the direct canvas.toBlob() fast path.

Dependencies: jpeg-js (~20KB), upng-js (~12KB)

Author: kevinkiklee

package-lock.json

@@ -20,13 +20,15 @@
     "@vercel/speed-insights": "^2.0.0",
     "exifreader": "^4.37.0",
     "framer-motion": "^12.38.0",
+    "jpeg-js": "^0.4.4",
     "next": "^16.2.2",
     "next-intl": "^4.9.0",
     "react": "^19.0.0",
     "react-advanced-cropper": "^0.20.1",
     "react-dom": "^19.0.0",
     "resend": "^6.10.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
+    "upng-js": "^2.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

package.json

@@ -1,9 +1,10 @@
 'use client'
 
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback } from 'react'
 import { useTranslations } from 'next-intl'
 import { computeExportDimensions, drawSolidBorder, drawGradientBorder, drawTextureBorder, drawInnerMat, drawShadow } from '@/lib/math/frame'
 import { transferExif } from '@/lib/utils/exif'
+import { renderTiledExport, TILED_EXPORT_THRESHOLD } from '@/lib/utils/image-export'
 import {
   drawRuleOfThirds, drawGoldenRatio, drawGoldenSpiral, drawGoldenDiagonal,
   drawDiagonalLines, drawCenterCross, drawSquareGrid, drawTriangles,
@@ -39,65 +40,36 @@ const GRID_DRAW_MAP: Record<GridType, DrawFn> = {
   'triangles': (ctx, w, h) => drawTriangles(ctx, w, h),
 }
 
-function getLinePositions(
-  gridType: GridType, w: number, h: number, opts: GridOptions,
-): { v: number[]; h: number[] } | null {
+function getLinePositions(gridType: GridType, w: number, h: number, opts: GridOptions) {
   switch (gridType) {
-    case 'rule-of-thirds':
-      return { v: [0, w / 3, 2 * w / 3], h: [0, h / 3, 2 * h / 3] }
-    case 'golden-ratio': {
-      const pw = w / GOLDEN_RATIO, ph = h / GOLDEN_RATIO
-      return { v: [0, w - pw, pw], h: [0, h - ph, ph] }
+    case 'rule-of-thirds': return { v: [0, w / 3, 2 * w / 3], h: [0, h / 3, 2 * h / 3] }
+    case 'golden-ratio': { const pw = w / GOLDEN_RATIO, ph = h / GOLDEN_RATIO; return { v: [0, w - pw, pw], h: [0, h - ph, ph] } }
+    case 'center-cross': return { v: [0, w / 2], h: [0, h / 2] }
+    case 'square-grid': return {
+      v: Array.from({ length: opts.gridDensity }, (_, i) => (i * w) / opts.gridDensity),
+      h: Array.from({ length: opts.gridDensity }, (_, i) => (i * h) / opts.gridDensity),
     }
-    case 'center-cross':
-      return { v: [0, w / 2], h: [0, h / 2] }
-    case 'square-grid':
-      return {
-        v: Array.from({ length: opts.gridDensity }, (_, i) => (i * w) / opts.gridDensity),
-        h: Array.from({ length: opts.gridDensity }, (_, i) => (i * h) / opts.gridDensity),
-      }
-    default:
-      return null
+    default: return null
   }
 }
 
-function drawExportGrid(
+function drawGridOnExport(
   ctx: CanvasRenderingContext2D, gridType: GridType, drawFn: DrawFn,
-  originX: number, originY: number, gw: number, gh: number,
-  ox: number, oy: number, opts: GridOptions,
+  oX: number, oY: number, gw: number, gh: number, ox: number, oy: number, opts: GridOptions,
 ) {
-  if (ox === 0 && oy === 0) {
-    ctx.save()
-    ctx.translate(originX, originY)
-    ctx.beginPath()
-    drawFn(ctx, gw, gh, opts)
-    ctx.restore()
-    return
+  const positions = ox === 0 && oy === 0 ? null : getLinePositions(gridType, gw, gh, opts)
+  if (!positions && (ox === 0 && oy === 0)) {
+    ctx.save(); ctx.translate(oX, oY); ctx.beginPath(); drawFn(ctx, gw, gh, opts); ctx.restore(); return
   }
-
-  const positions = getLinePositions(gridType, gw, gh, opts)
   if (positions) {
     ctx.beginPath()
-    for (const base of positions.v) {
-      const x = ((base + ox) % gw + gw) % gw
-      if (x > 0.5) { ctx.moveTo(originX + x, originY); ctx.lineTo(originX + x, originY + gh) }
-    }
-    for (const base of positions.h) {
-      const y = ((base + oy) % gh + gh) % gh
-      if (y > 0.5) { ctx.moveTo(originX, originY + y); ctx.lineTo(originX + gw, originY + y) }
-    }
+    for (const b of positions.v) { const x = ((b + ox) % gw + gw) % gw; if (x > 0.5) { ctx.moveTo(oX + x, oY); ctx.lineTo(oX + x, oY + gh) } }
+    for (const b of positions.h) { const y = ((b + oy) % gh + gh) % gh; if (y > 0.5) { ctx.moveTo(oX, oY + y); ctx.lineTo(oX + gw, oY + y) } }
     ctx.stroke()
   } else {
-    const px = ((ox % gw) + gw) % gw
-    const py = ((oy % gh) + gh) % gh
-    for (let dx = -1; dx <= 0; dx++) {
-      for (let dy = -1; dy <= 0; dy++) {
-        ctx.save()
-        ctx.translate(originX + px + dx * gw, originY + py + dy * gh)
-        ctx.beginPath()
-        drawFn(ctx, gw, gh, opts)
-        ctx.restore()
-      }
+    const px = ((ox % gw) + gw) % gw, py = ((oy % gh) + gh) % gh
+    for (let dx = -1; dx <= 0; dx++) for (let dy = -1; dy <= 0; dy++) {
+      ctx.save(); ctx.translate(oX + px + dx * gw, oY + py + dy * gh); ctx.beginPath(); drawFn(ctx, gw, gh, opts); ctx.restore()
     }
   }
 }
@@ -111,106 +83,53 @@ export function ExportDialog({
   const [exporting, setExporting] = useState(false)
   const [closing, setClosing] = useState(false)
 
-  const MAX_CANVAS_PIXELS = 16_000_000
-  const downscaleInfo = useMemo(() => {
-    const sw = crop?.width ?? image.naturalWidth
-    const sh = crop?.height ?? image.naturalHeight
-    const bw = frameConfig.borderWidth
-    const matW = frameConfig.innerMatEnabled ? frameConfig.innerMatWidth : 0
-    const { width: ew, height: eh } = computeExportDimensions(sw, sh, bw, matW)
-    if (ew * eh <= MAX_CANVAS_PIXELS) return null
-    const scale = Math.sqrt(MAX_CANVAS_PIXELS / (ew * eh))
-    return { from: `${sw}×${sh}`, to: `${Math.floor(sw * scale)}×${Math.floor(sh * scale)}` }
-  }, [crop, image, frameConfig])
-
-  const handleClose = useCallback(() => {
-    setClosing(true)
-    setTimeout(onClose, 150)
-  }, [onClose])
+  const handleClose = useCallback(() => { setClosing(true); setTimeout(onClose, 150) }, [onClose])
 
   const handleExport = useCallback(async () => {
     setExporting(true)
-
     try {
-      const sx = crop?.x ?? 0
-      const sy = crop?.y ?? 0
-      const sw = crop?.width ?? image.naturalWidth
-      const sh = crop?.height ?? image.naturalHeight
-
+      const sx = crop?.x ?? 0, sy = crop?.y ?? 0
+      const sw = crop?.width ?? image.naturalWidth, sh = crop?.height ?? image.naturalHeight
       const bw = frameConfig.borderWidth
       const matW = frameConfig.innerMatEnabled ? frameConfig.innerMatWidth : 0
       const { width: exportW, height: exportH } = computeExportDimensions(sw, sh, bw, matW)
 
-      // iOS Safari limits canvas to ~16M pixels; scale down for large images
-      const MAX_CANVAS_PIXELS = 16_000_000
-      let exportScale = 1
-      if (exportW * exportH > MAX_CANVAS_PIXELS) {
-        exportScale = Math.sqrt(MAX_CANVAS_PIXELS / (exportW * exportH))
-      }
-
-      const canvas = document.createElement('canvas')
-      canvas.width = Math.floor(exportW * exportScale)
-      canvas.height = Math.floor(exportH * exportScale)
-      const ctx = canvas.getContext('2d')!
-      if (exportScale < 1) ctx.scale(exportScale, exportScale)
-
-      // All drawing below uses original (exportW × exportH) coordinates;
-      // ctx.scale handles the physical pixel reduction automatically.
-
-      if (frameConfig.shadowEnabled && bw > 0) {
-        drawShadow(ctx, exportW, exportH, bw, frameConfig.cornerRadius, {
-          color: frameConfig.shadowColor,
-          blur: frameConfig.shadowBlur,
-          offsetX: frameConfig.shadowOffsetX,
-          offsetY: frameConfig.shadowOffsetY,
-        })
-      }
-
-      if (bw > 0) {
-        if (frameConfig.fillType === 'solid') {
-          drawSolidBorder(ctx, exportW, exportH, frameConfig.solidColor, frameConfig.cornerRadius)
-        } else if (frameConfig.fillType === 'gradient') {
-          drawGradientBorder(ctx, exportW, exportH, frameConfig.gradientColor1, frameConfig.gradientColor2, frameConfig.gradientDirection, frameConfig.cornerRadius)
-        } else {
-          drawTextureBorder(ctx, exportW, exportH, frameConfig.texture, frameConfig.cornerRadius)
+      const drawScene = (ctx: CanvasRenderingContext2D) => {
+        if (frameConfig.shadowEnabled && bw > 0) {
+          drawShadow(ctx, exportW, exportH, bw, frameConfig.cornerRadius, {
+            color: frameConfig.shadowColor, blur: frameConfig.shadowBlur,
+            offsetX: frameConfig.shadowOffsetX, offsetY: frameConfig.shadowOffsetY,
+          })
         }
-      }
-
-      if (frameConfig.innerMatEnabled && matW > 0) {
-        drawInnerMat(ctx, exportW, exportH, bw, frameConfig.cornerRadius, matW, frameConfig.innerMatColor)
-      }
-
-      const imgX = bw + matW
-      const imgY = bw + matW
-      ctx.drawImage(image, sx, sy, sw, sh, imgX, imgY, sw, sh)
-
-      if (includeGrid && activeGrids.length > 0) {
-        ctx.save()
-        ctx.beginPath()
-        ctx.rect(imgX, imgY, sw, sh)
-        ctx.clip()
-        const scaleX = gridDisplaySize && gridDisplaySize.width > 0 ? sw / gridDisplaySize.width : 1
-        const scaleY = gridDisplaySize && gridDisplaySize.height > 0 ? sh / gridDisplaySize.height : 1
-        const ox = (gridOffset?.x ?? 0) * scaleX
-        const oy = (gridOffset?.y ?? 0) * scaleY
-        ctx.strokeStyle = gridOptions.color
-        ctx.globalAlpha = gridOptions.opacity
-        ctx.lineWidth = thicknessToPx(gridOptions.thickness)
-        for (const gridType of activeGrids) {
-          const drawFn = GRID_DRAW_MAP[gridType]
-          if (drawFn) drawExportGrid(ctx, gridType, drawFn, imgX, imgY, sw, sh, ox, oy, gridOptions)
+        if (bw > 0) {
+          if (frameConfig.fillType === 'solid') drawSolidBorder(ctx, exportW, exportH, frameConfig.solidColor, frameConfig.cornerRadius)
+          else if (frameConfig.fillType === 'gradient') drawGradientBorder(ctx, exportW, exportH, frameConfig.gradientColor1, frameConfig.gradientColor2, frameConfig.gradientDirection, frameConfig.cornerRadius)
+          else drawTextureBorder(ctx, exportW, exportH, frameConfig.texture, frameConfig.cornerRadius)
+        }
+        if (frameConfig.innerMatEnabled && matW > 0) drawInnerMat(ctx, exportW, exportH, bw, frameConfig.cornerRadius, matW, frameConfig.innerMatColor)
+        const imgX = bw + matW, imgY = bw + matW
+        ctx.drawImage(image, sx, sy, sw, sh, imgX, imgY, sw, sh)
+        if (includeGrid && activeGrids.length > 0) {
+          ctx.save(); ctx.beginPath(); ctx.rect(imgX, imgY, sw, sh); ctx.clip()
+          const scX = gridDisplaySize && gridDisplaySize.width > 0 ? sw / gridDisplaySize.width : 1
+          const scY = gridDisplaySize && gridDisplaySize.height > 0 ? sh / gridDisplaySize.height : 1
+          ctx.strokeStyle = gridOptions.color; ctx.globalAlpha = gridOptions.opacity; ctx.lineWidth = thicknessToPx(gridOptions.thickness)
+          for (const gt of activeGrids) { const fn = GRID_DRAW_MAP[gt]; if (fn) drawGridOnExport(ctx, gt, fn, imgX, imgY, sw, sh, (gridOffset?.x ?? 0) * scX, (gridOffset?.y ?? 0) * scY, gridOptions) }
+          ctx.restore()
         }
-        ctx.restore()
       }
 
-      const quality = (originalMimeType === 'image/png') ? undefined : 1
-      let blob = await new Promise<Blob | null>((resolve) => {
-        canvas.toBlob(resolve, originalMimeType, quality)
-      })
-      if (!blob) {
-        console.error('Export failed: canvas.toBlob returned null (image may be too large)')
-        return
+      let blob: Blob | null
+      if (exportW * exportH > TILED_EXPORT_THRESHOLD) {
+        blob = await renderTiledExport(exportW, exportH, drawScene, originalMimeType)
+      } else {
+        const canvas = document.createElement('canvas')
+        canvas.width = exportW; canvas.height = exportH
+        const ctx = canvas.getContext('2d')!
+        drawScene(ctx)
+        blob = await new Promise<Blob | null>((r) => canvas.toBlob(r, originalMimeType, 1))
       }
+      if (!blob) { console.error('Export failed: could not create image blob'); return }
 
       const originalBuffer = await originalFile.arrayBuffer()
       blob = await transferExif(originalBuffer, blob, originalMimeType)
@@ -220,62 +139,35 @@ export function ExportDialog({
       const fileName = `${baseName}_edited${ext}`
       const file = new File([blob], fileName, { type: originalMimeType })
 
-      // Try Web Share API first (iOS Safari doesn't support anchor downloads)
       let shared = false
       if (typeof navigator.share === 'function') {
-        try {
-          await navigator.share({ files: [file] })
-          shared = true
-        } catch (e) {
-          // AbortError = user cancelled share sheet (still counts as handled)
-          if (e instanceof DOMException && e.name === 'AbortError') shared = true
-          // TypeError = files not supported → fall through to anchor download
-        }
+        try { await navigator.share({ files: [file] }); shared = true }
+        catch (e) { if (e instanceof DOMException && e.name === 'AbortError') shared = true }
       }
-
       if (!shared) {
         const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = fileName
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
+        const a = document.createElement('a'); a.href = url; a.download = fileName
+        document.body.appendChild(a); a.click(); document.body.removeChild(a)
         setTimeout(() => URL.revokeObjectURL(url), 30000)
       }
       onClose()
-    } finally {
-      setExporting(false)
-    }
+    } finally { setExporting(false) }
   }, [image, crop, frameConfig, includeGrid, activeGrids, gridOptions, gridOffset, gridDisplaySize, originalFile, originalMimeType, onClose])
 
   return (
     <div className={`${styles.overlay} ${closing ? styles.closing : ''}`} onClick={handleClose}>
       <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
         <h3 className={styles.title}>{t('exportPhoto')}</h3>
-
         <div className={styles.info}>
           <span>{t('format')} {originalMimeType.split('/')[1]?.toUpperCase() ?? 'PNG'}</span>
           <span>{t('quality')} {t('qualityMaximum')}</span>
         </div>
-
-        {downscaleInfo && (
-          <div className={styles.notice}>
-            {t('downscaleNotice', { from: downscaleInfo.from, to: downscaleInfo.to })}
-          </div>
-        )}
-
         {activeGrids.length > 0 && (
           <label className={styles.toggle}>
-            <input
-              type="checkbox"
-              checked={includeGrid}
-              onChange={(e) => setIncludeGrid(e.target.checked)}
-            />
+            <input type="checkbox" checked={includeGrid} onChange={(e) => setIncludeGrid(e.target.checked)} />
             <span>{t('includeGridOverlay')}</span>
           </label>
         )}
-
         <div className={styles.actions}>
           <button className={styles.cancelBtn} onClick={handleClose}>{t('cancel')}</button>
           <button className={styles.exportBtn} onClick={handleExport} disabled={exporting}>