@zumer/snapdom 2.0.0-dev.1 → 2.0.0-dev.2

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.1
+* v.2.0.0-dev.2
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -328,19 +328,6 @@ async function snapFetch(url, options = {}) {
 }
 
 // src/utils/image.js
-function createBackground(baseCanvas, backgroundColor) {
-  if (!backgroundColor || !baseCanvas.width || !baseCanvas.height) {
-    return baseCanvas;
-  }
-  const temp = document.createElement("canvas");
-  temp.width = baseCanvas.width;
-  temp.height = baseCanvas.height;
-  const ctx = temp.getContext("2d");
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, temp.width, temp.height);
-  ctx.drawImage(baseCanvas, 0, 0);
-  return temp;
-}
 async function inlineSingleBackgroundEntry(entry, options = {}) {
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
   if (isGradient || entry.trim() === "none") {
@@ -616,11 +603,20 @@ function idle(fn, { fast = false } = {}) {
   }
 }
 function isSafari() {
-  const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
-  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
-  const isUIWebView = /AppleWebKit/i.test(ua) && /Mobile/i.test(ua) && !/Safari/i.test(ua);
-  const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
-  return isSafariUA || isUIWebView || isWeChatUA;
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const uaLower = ua.toLowerCase();
+  const isSafariUA = uaLower.includes("safari") && !uaLower.includes("chrome") && !uaLower.includes("crios") && // Chrome on iOS
+  !uaLower.includes("fxios") && // Firefox on iOS
+  !uaLower.includes("android");
+  const isWebKit = /applewebkit/i.test(ua);
+  const isMobile = /mobile/i.test(ua);
+  const missingSafariToken = !/safari/i.test(ua);
+  const isUIWebView = isWebKit && isMobile && missingSafariToken;
+  const isWeChatUA = /(micromessenger|wxwork|wecom|windowswechat|macwechat)/i.test(ua);
+  const isBaiduUA = /(baiduboxapp|baidubrowser|baidusearch|baiduboxlite)/i.test(uaLower);
+  const isIOSWebKit = /ipad|iphone|ipod/.test(uaLower) && isWebKit;
+  return isSafariUA || isUIWebView || isWeChatUA || isBaiduUA || isIOSWebKit;
 }
 
 // src/modules/styles.js
@@ -665,6 +661,22 @@ function snapshotComputedStyleFull(style, options = {}) {
     }
     out[prop] = val;
   }
+  const EXTRA_TEXT_DECORATION_PROPS = [
+    "text-decoration-line",
+    "text-decoration-color",
+    "text-decoration-style",
+    "text-decoration-thickness",
+    "text-underline-offset",
+    "text-decoration-skip-ink"
+  ];
+  for (const prop of EXTRA_TEXT_DECORATION_PROPS) {
+    if (out[prop]) continue;
+    try {
+      const v = style.getPropertyValue(prop);
+      if (v) out[prop] = v;
+    } catch {
+    }
+  }
   if (options.embedFonts) {
     const EXTRA_FONT_PROPS = [
       "font-feature-settings",
@@ -1421,17 +1433,19 @@ var defaultIconFonts = [
   /layui/i,
   /lucide/i
 ];
+var ICON_FONT_URLS = Object.assign({
+  materialIconsFilled: "https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2",
+  materialIconsOutlined: "https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2",
+  materialIconsRound: "https://fonts.gstatic.com/s/materialiconsround/v109/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2",
+  materialIconsSharp: "https://fonts.gstatic.com/s/materialiconssharp/v110/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvRImcycg.woff2"
+}, typeof window !== "undefined" && window.__SNAPDOM_ICON_FONTS__ || {});
 var userIconFonts = [];
 function extendIconFonts(fonts) {
   const list = Array.isArray(fonts) ? fonts : [fonts];
   for (const f of list) {
-    if (f instanceof RegExp) {
-      userIconFonts.push(f);
-    } else if (typeof f === "string") {
-      userIconFonts.push(new RegExp(f, "i"));
-    } else {
-      console.warn("[snapdom] Ignored invalid iconFont value:", f);
-    }
+    if (f instanceof RegExp) userIconFonts.push(f);
+    else if (typeof f === "string") userIconFonts.push(new RegExp(f, "i"));
+    else console.warn("[snapdom] Ignored invalid iconFont value:", f);
   }
 }
 function isIconFont2(input) {
@@ -1447,10 +1461,62 @@ function isMaterialFamily(family = "") {
   const s = String(family).toLowerCase();
   return /\bmaterial\s*icons\b/.test(s) || /\bmaterial\s*symbols\b/.test(s);
 }
+var loadedCanvasFamilies = /* @__PURE__ */ new Map();
+function parseAxes(variation = "") {
+  const out = /* @__PURE__ */ Object.create(null);
+  const v = String(variation || "");
+  const rx = /['"]?\s*([A-Za-z]{3,4})\s*['"]?\s*([+-]?\d+(?:\.\d+)?)\s*/g;
+  let m;
+  while (m = rx.exec(v)) out[m[1].toUpperCase()] = Number(m[2]);
+  return out;
+}
+async function ensureLigatureCanvasFont(cssFamily, className, axes) {
+  const fam = String(cssFamily || "");
+  const lowerFam = fam.toLowerCase();
+  const cls = String(className || "").toLowerCase();
+  if (/\bmaterial\s*icons\b/.test(lowerFam) && !/\bsymbols\b/.test(lowerFam)) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const isSymbols = /\bmaterial\s*symbols\b/.test(lowerFam);
+  if (!isSymbols) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const FILL = axes && (axes.FILL ?? axes.fill);
+  let style = "outlined";
+  if (/\brounded\b/.test(cls) || /\bround\b/.test(cls)) style = "rounded";
+  else if (/\bsharp\b/.test(cls)) style = "sharp";
+  else if (/\boutlined\b/.test(cls)) style = "outlined";
+  const filled = FILL === 1;
+  let pick = null;
+  if (filled) {
+    if (style === "outlined" && ICON_FONT_URLS.materialIconsFilled) {
+      pick = { url: ICON_FONT_URLS.materialIconsFilled, alias: "snapdom-mi-filled" };
+    } else if (style === "rounded" && ICON_FONT_URLS.materialIconsRound) {
+      pick = { url: ICON_FONT_URLS.materialIconsRound, alias: "snapdom-mi-round" };
+    } else if (style === "sharp" && ICON_FONT_URLS.materialIconsSharp) {
+      pick = { url: ICON_FONT_URLS.materialIconsSharp, alias: "snapdom-mi-sharp" };
+    }
+  }
+  if (!pick) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  if (!loadedCanvasFamilies.has(pick.alias)) {
+    try {
+      const ff = new FontFace(pick.alias, `url(${pick.url})`, { style: "normal", weight: "400" });
+      document.fonts.add(ff);
+      await ff.load();
+      loadedCanvasFamilies.set(pick.alias, true);
+    } catch {
+      return { familyForMeasure: fam, familyForCanvas: fam };
+    }
+  }
+  const quoted = `"${pick.alias}"`;
+  return { familyForMeasure: quoted, familyForCanvas: quoted };
+}
 async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
   try {
     await Promise.all([
-      document.fonts.load(`400 ${px}px "${family.replace(/["']/g, "")}"`),
+      document.fonts.load(`400 ${px}px "${String(family).replace(/["']/g, "")}"`),
       document.fonts.ready
     ]);
   } catch {
@@ -1458,10 +1524,8 @@ async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
 }
 function resolvePaintColor(cs) {
   let fill = cs.getPropertyValue("-webkit-text-fill-color")?.trim() || "";
-  const isTransparent = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
-  if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") {
-    return fill;
-  }
+  const isTransparent = /^transparent$/i.test(fill) || /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
+  if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") return fill;
   const c = cs.color?.trim();
   return c && c !== "inherit" ? c : "#000";
 }
@@ -1470,18 +1534,21 @@ async function materialIconToImage(ligatureText, {
   weight = "normal",
   fontSize = 32,
   color = "#000",
-  variation = ""
+  variation = "",
+  className = ""
 } = {}) {
   const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
   const dpr = window.devicePixelRatio || 1;
-  await ensureMaterialFontsReady(fam, fontSize);
+  const axes = parseAxes(variation);
+  const { familyForMeasure, familyForCanvas } = await ensureLigatureCanvasFont(fam, className, axes);
+  await ensureMaterialFontsReady(familyForCanvas.replace(/^["']+|["']+$/g, ""), fontSize);
   const span = document.createElement("span");
   span.textContent = ligatureText;
   span.style.position = "absolute";
   span.style.visibility = "hidden";
   span.style.left = "-99999px";
   span.style.whiteSpace = "nowrap";
-  span.style.fontFamily = `"${fam}"`;
+  span.style.fontFamily = familyForMeasure;
   span.style.fontWeight = String(weight || "normal");
   span.style.fontSize = `${fontSize}px`;
   span.style.lineHeight = "1";
@@ -1489,7 +1556,6 @@ async function materialIconToImage(ligatureText, {
   span.style.padding = "0";
   span.style.fontFeatureSettings = "'liga' 1";
   span.style.fontVariantLigatures = "normal";
-  if (variation) span.style.fontVariationSettings = variation;
   span.style.color = color;
   document.body.appendChild(span);
   const rect = span.getBoundingClientRect();
@@ -1501,7 +1567,7 @@ async function materialIconToImage(ligatureText, {
   canvas.height = height * dpr;
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
-  ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px "${fam}"`;
+  ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px ${familyForCanvas}`;
   ctx.textAlign = "left";
   ctx.textBaseline = "top";
   ctx.fillStyle = color;
@@ -1529,21 +1595,23 @@ async function ligatureIconToImage(cloneRoot, sourceRoot) {
     const el = cloneNodes[i];
     const src = sourceNodes[i] || null;
     try {
-      const csSrc = src ? getComputedStyle(src) : getComputedStyle(el);
-      const family = csSrc.fontFamily || "Material Icons";
+      const cs = src ? getComputedStyle(src) : getComputedStyle(el);
+      const family = cs.fontFamily || "Material Icons";
       if (!isMaterialFamily(family)) continue;
       const text = (src || el).textContent.trim();
       if (!text) continue;
-      const size = parseInt(csSrc.fontSize, 10) || 24;
-      const weight = csSrc.fontWeight && csSrc.fontWeight !== "normal" ? csSrc.fontWeight : "normal";
-      const color = resolvePaintColor(csSrc);
-      const variation = csSrc.fontVariationSettings && csSrc.fontVariationSettings !== "normal" ? csSrc.fontVariationSettings : "";
+      const size = parseInt(cs.fontSize, 10) || 24;
+      const weight = cs.fontWeight && cs.fontWeight !== "normal" ? cs.fontWeight : "normal";
+      const color = resolvePaintColor(cs);
+      const variation = cs.fontVariationSettings && cs.fontVariationSettings !== "normal" ? cs.fontVariationSettings : "";
+      const className = (src || el).className || "";
       const { dataUrl, width, height } = await materialIconToImage(text, {
         family,
         weight,
         fontSize: size,
         color,
-        variation
+        variation,
+        className
       });
       el.textContent = "";
       const img = el.ownerDocument.createElement("img");
@@ -1909,7 +1977,7 @@ function dedupeFontFaces(cssText) {
     const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
     const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
     const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-    const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+    const srcRaw = (block.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
     const urls = extractSrcUrls(srcRaw, location.href);
     const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
     const key = [
@@ -2117,7 +2185,7 @@ async function embedCustomFonts({
         const styleSpec = (face.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
         const stretchSpec = (face.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
         const urange = (face.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-        const srcRaw = (face.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+        const srcRaw = (face.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
         const srcUrls = extractSrcUrls(srcRaw, link.href);
         if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
         const ranges = parseUnicodeRange(urange);
@@ -3559,6 +3627,50 @@ function stripRootShadows(originalEl, cloneRoot) {
   } catch {
   }
 }
+function removeAllComments(root) {
+  const it = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+  const toRemove = [];
+  while (it.nextNode()) toRemove.push(it.currentNode);
+  for (const n of toRemove) n.remove();
+}
+function sanitizeAttributesForXHTML(root, opts = {}) {
+  const { stripFrameworkDirectives = true } = opts;
+  const ALLOWED_PREFIXES = /* @__PURE__ */ new Set(["xml", "xlink"]);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name;
+      if (name.includes("@")) {
+        el.removeAttribute(name);
+        continue;
+      }
+      if (name.includes(":")) {
+        const prefix = name.split(":", 1)[0];
+        if (!ALLOWED_PREFIXES.has(prefix)) {
+          el.removeAttribute(name);
+          continue;
+        }
+      }
+      if (!stripFrameworkDirectives) continue;
+      if (name.startsWith("x-") || // Alpine
+      name.startsWith("v-") || // Vue
+      name.startsWith(":") || // Vue/Alpine shorthand
+      name.startsWith("on:") || // Svelte
+      name.startsWith("bind:") || // Svelte
+      name.startsWith("let:") || // Svelte
+      name.startsWith("class:")) {
+        el.removeAttribute(name);
+        continue;
+      }
+    }
+  }
+}
+function sanitizeCloneForXHTML(root, opts = {}) {
+  if (!root) return;
+  sanitizeAttributesForXHTML(root, opts);
+  removeAllComments(root);
+}
 async function captureDOM(element, options) {
   if (!element) throw new Error("Element cannot be null or undefined");
   applyCachePolicy(options.cache);
@@ -3588,6 +3700,14 @@ async function captureDOM(element, options) {
   }
   state = { clone, classCSS, styleCache, ...state };
   await runHook("afterClone", state);
+  sanitizeCloneForXHTML(state.clone);
+  if (state.options?.excludeMode === "remove") {
+    try {
+      shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
+    } catch (e) {
+      console.warn("[snapdom] shrink pass failed:", e);
+    }
+  }
   try {
     await ligatureIconToImage(state.clone, state.element);
   } catch {
@@ -3645,8 +3765,15 @@ async function captureDOM(element, options) {
     idle(() => {
       const csEl = getComputedStyle(state.element);
       const rect = state.element.getBoundingClientRect();
-      const w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
-      const h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      if (state.options?.excludeMode === "remove") {
+        const hEst = estimateKeptHeight(state.element, state.options);
+        const EPS = 1;
+        if (Number.isFinite(hEst) && hEst > 0) {
+          h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)));
+        }
+      }
       const coerceNum = (v, def = NaN) => {
         const n = typeof v === "string" ? parseFloat(v) : v;
         return Number.isFinite(n) ? n : def;
@@ -3769,6 +3896,57 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   return state.dataURL;
 }
+function authorHasExplicitSize(el) {
+  try {
+    const s = el.getAttribute?.("style") || "";
+    return /\b(height|width|block-size|inline-size)\s*:/.test(s);
+  } catch {
+    return false;
+  }
+}
+function isReplacedElement(el) {
+  return el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof HTMLVideoElement || el instanceof HTMLIFrameElement || el instanceof SVGElement || el instanceof HTMLObjectElement || el instanceof HTMLEmbedElement;
+}
+function shouldShrinkBox(srcEl, cs) {
+  if (!(srcEl instanceof Element)) return false;
+  if (authorHasExplicitSize(srcEl)) return false;
+  if (isReplacedElement(srcEl)) return false;
+  const pos = cs.position;
+  if (pos === "absolute" || pos === "fixed" || pos === "sticky") return false;
+  const disp = cs.display || "";
+  if (disp.includes("flex") || disp.includes("grid") || disp.startsWith("table")) return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function shrinkAutoSizeBoxes(sourceRoot, cloneRoot, styleCache = /* @__PURE__ */ new Map()) {
+  function walk(src, cln) {
+    if (!(src instanceof Element) || !(cln instanceof Element)) return;
+    const lostKids = src.childElementCount > cln.childElementCount;
+    const cs = styleCache.get(src) || getComputedStyle(src);
+    if (!styleCache.has(src)) styleCache.set(src, cs);
+    if (lostKids && shouldShrinkBox(src, cs)) {
+      if (!cln.style.height) cln.style.height = "auto";
+      if (!cln.style.width) cln.style.width = "auto";
+      cln.style.removeProperty("block-size");
+      cln.style.removeProperty("inline-size");
+      if (!cln.style.minHeight) cln.style.minHeight = "0";
+      if (!cln.style.minWidth) cln.style.minWidth = "0";
+      if (!cln.style.maxHeight) cln.style.maxHeight = "none";
+      if (!cln.style.maxWidth) cln.style.maxWidth = "none";
+      const oy = cs.overflowY || cs.overflowBlock || "visible";
+      const ox = cs.overflowX || cs.overflowInline || "visible";
+      if (oy !== "visible" || ox !== "visible") {
+        cln.style.overflow = "visible";
+      }
+    }
+    const sKids = Array.from(src.children);
+    const cKids = Array.from(cln.children);
+    for (let i = 0; i < Math.min(sKids.length, cKids.length); i++) {
+      walk(sKids[i], cKids[i]);
+    }
+  }
+  walk(sourceRoot, cloneRoot);
+}
 var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * 10 ** n) / 10 ** n : v;
 function parseFilterDropShadows(cs) {
   const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
@@ -4035,6 +4213,52 @@ function readTotalTransformMatrix(t) {
   host.removeChild(tmp);
   return M;
 }
+function isInNormalFlow(el) {
+  const cs = getComputedStyle(el);
+  if (cs.display === "none") return false;
+  if (cs.position === "absolute" || cs.position === "fixed" || cs.position === "sticky") return false;
+  if ((cs.cssFloat || cs.float || "none") !== "none") return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function willBeExcluded(el, options) {
+  if (!(el instanceof Element)) return false;
+  if (el.getAttribute("data-capture") === "exclude" && options?.excludeMode === "remove") return true;
+  if (Array.isArray(options?.exclude)) {
+    for (const sel of options.exclude) {
+      try {
+        if (el.matches(sel)) return options.excludeMode === "remove";
+      } catch {
+      }
+    }
+  }
+  return false;
+}
+function estimateKeptHeight(container, options) {
+  const csC = getComputedStyle(container);
+  const rC = container.getBoundingClientRect();
+  let minTop = Infinity;
+  let maxBottom = -Infinity;
+  let found = false;
+  const kids = Array.from(container.children);
+  for (const k of kids) {
+    if (willBeExcluded(k, options)) continue;
+    if (!isInNormalFlow(k)) continue;
+    const rk = k.getBoundingClientRect();
+    const top = rk.top - rC.top;
+    const bottom = rk.bottom - rC.top;
+    if (bottom <= top) continue;
+    if (top < minTop) minTop = top;
+    if (bottom > maxBottom) maxBottom = bottom;
+    found = true;
+  }
+  const contentSpan = found ? Math.max(0, maxBottom - minTop) : 0;
+  const bt = parseFloat(csC.borderTopWidth) || 0;
+  const bb = parseFloat(csC.borderBottomWidth) || 0;
+  const pt = parseFloat(csC.paddingTop) || 0;
+  const pb = parseFloat(csC.paddingBottom) || 0;
+  return bt + bb + pt + pb + contentSpan;
+}
 
 // src/core/context.js
 function normalizeCachePolicy(v) {
@@ -4191,7 +4415,7 @@ function maybeConvertBoxShadowForSafari(url) {
   }
 }
 async function toCanvas(url, options) {
-  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {} } = options;
+  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {}, backgroundColor } = options;
   url = maybeConvertBoxShadowForSafari(url);
   const img = new Image();
   img.loading = "eager";
@@ -4230,6 +4454,12 @@ async function toCanvas(url, options) {
   canvas.style.height = `${outH}px`;
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
+  if (backgroundColor) {
+    ctx.save();
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, outW, outH);
+    ctx.restore();
+  }
   ctx.drawImage(img, 0, 0, outW, outH);
   return canvas;
 }
@@ -4237,12 +4467,11 @@ async function toCanvas(url, options) {
 // src/modules/rasterize.js
 async function rasterize(url, options) {
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const img = new Image();
-  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  img.src = canvas.toDataURL(`image/${options.format}`, options.quality);
   await img.decode();
-  img.style.width = `${finalCanvas.width / options.dpr}px`;
-  img.style.height = `${finalCanvas.height / options.dpr}px`;
+  img.style.width = `${canvas.width / options.dpr}px`;
+  img.style.height = `${canvas.height / options.dpr}px`;
   return img;
 }
 
@@ -4302,13 +4531,8 @@ async function toBlob(url, options) {
     return new Blob([svgText], { type: "image/svg+xml" });
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   return new Promise(
-    (resolve) => finalCanvas.toBlob(
-      (blob) => resolve(blob),
-      `image/${type}`,
-      options.quality
-    )
+    (resolve) => canvas.toBlob((blob) => resolve(blob), `image/${type}`, options.quality)
   );
 }
 
@@ -4326,9 +4550,8 @@ async function download(url, options) {
     return;
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const a = document.createElement("a");
-  a.href = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  a.href = canvas.toDataURL(`image/${options.format}`, options.quality);
   a.download = options.filename;
   a.click();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "2.0.0-dev.1",
+  "version": "2.0.0-dev.2",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",