@pixldocs/canvas-renderer 0.5.195 → 0.5.197

package/README.md

@@ -275,17 +275,16 @@ const renderer = new PixldocsRenderer({
   pixelRatio?: number,       // default: 2
   assetWaitTimeoutMs?: number,    // default: 15000; use ~30000 for multi-photo PDF exports
   assetWaitEarlyExitMs?: number,  // default: 1500; ignored for strict PDF image-ID waits
-  maxImageEdgePx?: number,        // recommended: 2048 for user-uploaded PDF photos
+  maxImageEdgePx?: number,        // auto: 2048 for user-uploaded PDF photos; 0 disables
   debug?: boolean,                // logs image wait/SVG completeness diagnostics
 });
 ```
 
 For BioMaker-style PDFs with user-uploaded profile/gallery photos, use the live
-SVG path with `maxImageEdgePx: 2048` and **do not** set
-`forcePerElementPdf: true`. Since `0.5.193`, PDF export waits for every expected
-bound image ID, stamps those IDs into the captured SVG, preloads/decodes them
-before `svg2pdf`, and throws if any expected photo is missing instead of
-silently exporting an incomplete PDF.
+SVG path and **do not** set `forcePerElementPdf: true`. Large `data:image/*`
+photos are normalized before the hidden Fabric canvas mounts (default cap:
+2048px edge and ~2MB encoded data URL) so svg2pdf does not corrupt/drop
+multi-megapixel uploads.
 
 #### `renderer.renderFromForm(options)`
 
@@ -638,13 +637,12 @@ v0.5.191 fixes this with two new options:
 ```ts
 const renderer = new PixldocsRenderer({
   supabaseUrl, supabaseAnonKey,
-  // Force the per-element Fabric → jsPDF.addImage path on every export.
-  // Recommended for biodata-style flows that always have user photos.
-  forcePerElementPdf: true,           // true | false | 'auto' (default)
-  // Down-scale any data:image/* whose longest edge > 2048 to JPEG-0.85
-  // before mounting into Fabric. Prevents Safari from silently dropping
-  // multi-megapixel camera-roll JPEGs in jsPDF.addImage.
-  maxImageEdgePx: 2048,               // 0 to disable
+  // Keep the live SVG path. Use true only as a manual escape hatch because
+  // the per-element/config-space path can drift from live Fabric layout.
+  forcePerElementPdf: 'auto',         // true | false | 'auto' (default)
+  // Normalize data:image/* photos before mounting into Fabric. The default
+  // auto value is 2048 and also recompresses oversized encoded data URLs.
+  maxImageEdgePx: 2048,               // default auto; 0 disables
 });
 
 const pdf = await renderer.renderPdfFromForm({
@@ -655,10 +653,10 @@ const pdf = await renderer.renderPdfFromForm({
 });
 ```
 
-**Defaults:** `forcePerElementPdf: 'auto'` enables the safe path only when
-the resolved config contains a `data:image/(jpeg|png|webp)` source **and**
-the host is Safari / iOS (incl. iPadOS desktop spoof). Editors and
-non-Safari hosts keep the vector fast path unchanged.
+**Defaults:** `forcePerElementPdf: 'auto'` keeps the live SVG path. Any resolved
+config containing `data:image/(jpeg|png|webp)` sources is normalized before PDF
+mounting so large camera/gallery uploads behave consistently across browsers
+and server renderers.
 
 Hosts that previously monkey-patched `captureFabricCanvasSvgForPdf` to
 throw (the unofficial BioMaker workaround) can delete that patch after

package/dist/{index-BggTMIGH.js → index-6bqq7X_L.js}

@@ -16919,9 +16919,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.195";
+const resolvedPackageVersion = "0.5.197";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.195";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.197";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16981,11 +16981,16 @@ function detectSafariOrIos() {
     return false;
   }
 }
-async function downscaleConfigRasterImages(config, maxEdgePx) {
+async function downscaleConfigRasterImages(config, maxEdgePx, maxDataUrlBytes = 2e6) {
   if (!maxEdgePx || maxEdgePx <= 0) return 0;
   if (typeof document === "undefined") return 0;
   const targets = [];
   const isRasterDataUrl = (u) => typeof u === "string" && /^data:image\/(jpeg|jpg|png|webp)[;,]/i.test(u);
+  const estimateDataUrlBytes = (u) => {
+    const comma = u.indexOf(",");
+    const payload = comma >= 0 ? u.slice(comma + 1) : u;
+    return Math.floor(payload.length * 0.75);
+  };
   const walk = (nodes) => {
     if (!Array.isArray(nodes)) return;
     for (const node of nodes) {
@@ -17001,38 +17006,82 @@ async function downscaleConfigRasterImages(config, maxEdgePx) {
   if (targets.length === 0) return 0;
   const shrinkOne = async (dataUrl) => {
     try {
-      const img = await new Promise((resolve, reject) => {
+      const decode = async (src) => new Promise((resolve, reject) => {
         const el = new Image();
         el.onload = () => resolve(el);
         el.onerror = (e) => reject(e);
         el.decoding = "sync";
-        el.src = dataUrl;
+        el.src = src;
       });
+      let img;
+      let blobUrl = null;
+      try {
+        img = await decode(dataUrl);
+      } catch {
+        try {
+          const resp = await fetch(dataUrl);
+          const blob = await resp.blob();
+          blobUrl = URL.createObjectURL(blob);
+          img = await decode(blobUrl);
+        } catch (inner) {
+          if (blobUrl) URL.revokeObjectURL(blobUrl);
+          console.warn("[canvas-renderer] shrinkOne: failed to decode oversized data URL on this browser, dropping shrink attempt", inner);
+          return null;
+        }
+      }
       const w = img.naturalWidth, h = img.naturalHeight;
-      if (!w || !h) return null;
+      if (!w || !h) {
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        return null;
+      }
       const longest = Math.max(w, h);
-      if (longest <= maxEdgePx) return null;
-      const scale = maxEdgePx / longest;
-      const tw = Math.max(1, Math.round(w * scale));
-      const th = Math.max(1, Math.round(h * scale));
-      const canvas = document.createElement("canvas");
-      canvas.width = tw;
-      canvas.height = th;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return null;
-      ctx.fillStyle = "#ffffff";
-      ctx.fillRect(0, 0, tw, th);
-      ctx.drawImage(img, 0, 0, tw, th);
-      return canvas.toDataURL("image/jpeg", 0.85);
+      const tooLargeByEdge = longest > maxEdgePx;
+      const tooLargeByBytes = estimateDataUrlBytes(dataUrl) > maxDataUrlBytes;
+      if (!tooLargeByEdge && !tooLargeByBytes) {
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        return null;
+      }
+      let scale = tooLargeByEdge ? maxEdgePx / longest : 1;
+      let quality = 0.85;
+      let best = null;
+      for (let attempt = 0; attempt < 4; attempt++) {
+        const tw = Math.max(1, Math.round(w * scale));
+        const th = Math.max(1, Math.round(h * scale));
+        const canvas = document.createElement("canvas");
+        canvas.width = tw;
+        canvas.height = th;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          if (blobUrl) URL.revokeObjectURL(blobUrl);
+          return best;
+        }
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, tw, th);
+        ctx.drawImage(img, 0, 0, tw, th);
+        best = canvas.toDataURL("image/jpeg", quality);
+        const outBytes = estimateDataUrlBytes(best);
+        if (outBytes <= maxDataUrlBytes || attempt === 3) {
+          if (blobUrl) URL.revokeObjectURL(blobUrl);
+          return best;
+        }
+        const byteScale = Math.sqrt(maxDataUrlBytes / Math.max(1, outBytes)) * 0.92;
+        scale = Math.max(0.1, scale * Math.min(0.95, byteScale));
+        quality = Math.max(0.68, quality - 0.06);
+      }
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
+      return best;
     } catch {
       return null;
     }
   };
   let shrunk = 0;
   for (const { node, field } of targets) {
+    const before = String(node[field]);
     const next = await shrinkOne(String(node[field]));
     if (next) {
       node[field] = next;
+      const twin = field === "src" ? "imageUrl" : "src";
+      if (node[twin] === before) node[twin] = next;
       shrunk++;
     }
   }
@@ -17471,7 +17520,7 @@ class PixldocsRenderer {
     const isSafariLike = detectSafariOrIos();
     const shouldForcePerElement = forceMode === true ? true : forceMode === false ? false : hasUserDataImage && isSafariLike;
     const maxEdgeOpt = options.maxImageEdgePx ?? this.config.maxImageEdgePx;
-    const effectiveMaxEdge = typeof maxEdgeOpt === "number" ? Math.max(0, maxEdgeOpt | 0) : shouldForcePerElement ? 2048 : 0;
+    const effectiveMaxEdge = typeof maxEdgeOpt === "number" ? Math.max(0, maxEdgeOpt | 0) : hasUserDataImage ? 2048 : 0;
     if (effectiveMaxEdge > 0) {
       try {
         const downscaled = await downscaleConfigRasterImages(cloned, effectiveMaxEdge);
@@ -17548,7 +17597,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-eV507wxX.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-D4pUlnXw.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -17570,11 +17619,10 @@ class PixldocsRenderer {
         // correct. v0.5.191 shipped with this skip enabled and produced exactly
         // that regression.
         //
-        // The Safari/iOS "missing photo" issue is solved end-to-end by the
-        // `downscaleConfigRasterImages()` pre-pass above, which shrinks large
-        // `data:image/*` JPEGs to a safe edge length before the canvas mounts.
-        // That alone keeps Safari's SVG capture reliable without altering the
-        // layout pipeline.
+        // The large-photo missing/corrupt image issue is solved by the
+        // `downscaleConfigRasterImages()` pre-pass above, which shrinks and
+        // recompresses oversized `data:image/*` sources before the canvas
+        // mounts. That keeps SVG capture reliable without altering layout.
         //
         // We still honor an explicit `forcePerElementPdf: true` from the host
         // app (advanced opt-in for niche cases), but the auto path no longer
@@ -19746,7 +19794,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-eV507wxX.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-D4pUlnXw.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -20146,4 +20194,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-BggTMIGH.js.map
+//# sourceMappingURL=index-6bqq7X_L.js.map