@zumer/snapdom 1.9.6 → 1.9.8

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.6
+* v.1.9.8
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -130,7 +130,7 @@
     if (cache.defaultStyle.has(tagName)) {
       return cache.defaultStyle.get(tagName);
     }
-    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
+    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
     if (skipTags.has(tagName)) {
       const empty = {};
       cache.defaultStyle.set(tagName, empty);
@@ -160,10 +160,14 @@
     cache.defaultStyle.set(tagName, defaults);
     return defaults;
   }
+  var IGNORED_PROPS = /* @__PURE__ */ new Set([
+    "-webkit-locale"
+  ]);
   function getStyleKey(snapshot, tagName, compress = false) {
     const entries = [];
     const defaultStyles = getDefaultStyleForTag(tagName);
     for (let [prop, value] of Object.entries(snapshot)) {
+      if (IGNORED_PROPS.has(prop)) continue;
       if (!compress) {
         if (value) {
           entries.push(`${prop}:${value}`);
@@ -213,6 +217,7 @@
     const classMap = /* @__PURE__ */ new Map();
     let counter = 1;
     for (const key of keySet) {
+      if (!key.trim()) continue;
       classMap.set(key, `c${counter++}`);
     }
     return classMap;
@@ -448,6 +453,7 @@
   // src/modules/styles.js
   function snapshotComputedStyleFull(style) {
     const result = {};
+    const computedVisibility = style.getPropertyValue("visibility");
     for (let i = 0; i < style.length; i++) {
       const prop = style[i];
       let val = style.getPropertyValue(prop);
@@ -456,6 +462,9 @@
       }
       result[prop] = val;
     }
+    if (computedVisibility === "hidden") {
+      result.opacity = "0";
+    }
     return result;
   }
   function inlineAllStyles(source, clone, compress) {
@@ -574,7 +583,6 @@
         if (node.checked) clone.setAttribute("checked", "");
         if (node.indeterminate) clone.indeterminate = node.indeterminate;
       }
-      return clone;
     }
     if (node instanceof HTMLSelectElement) {
       pendingSelectValue = node.value;
@@ -679,25 +687,38 @@
     return __async(this, null, function* () {
       fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
       const dpr = window.devicePixelRatio || 1;
-      const tempCanvas = document.createElement("canvas");
-      const tempCtx = tempCanvas.getContext("2d");
-      tempCtx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
-      const metrics = tempCtx.measureText(unicodeChar);
-      const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
-      const descent = metrics.actualBoundingBoxDescent || fontSize * 0.2;
-      const height = ascent + descent;
-      const width = metrics.width;
+      yield document.fonts.ready;
+      const span = document.createElement("span");
+      span.textContent = unicodeChar;
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.fontFamily = `"${fontFamily}"`;
+      span.style.fontWeight = fontWeight || "normal";
+      span.style.fontSize = `${fontSize}px`;
+      span.style.lineHeight = "1";
+      span.style.whiteSpace = "nowrap";
+      span.style.padding = "0";
+      span.style.margin = "0";
+      document.body.appendChild(span);
+      const rect = span.getBoundingClientRect();
+      const width = Math.ceil(rect.width);
+      const height = Math.ceil(rect.height);
+      document.body.removeChild(span);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.ceil(width * dpr);
-      canvas.height = Math.ceil(height * dpr);
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
       const ctx = canvas.getContext("2d");
       ctx.scale(dpr, dpr);
-      ctx.font = tempCtx.font;
+      ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
       ctx.textAlign = "left";
-      ctx.textBaseline = "alphabetic";
+      ctx.textBaseline = "top";
       ctx.fillStyle = color;
-      ctx.fillText(unicodeChar, 0, ascent);
-      return canvas.toDataURL();
+      ctx.fillText(unicodeChar, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
     });
   }
   function isStylesheetLoaded(href) {
@@ -798,8 +819,8 @@
                 if (!src || isIconFont(family)) continue;
                 const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
                 const localRegex = /local\((["']?)[^)]+?\1\)/g;
-                const hasURL = urlRegex.test(src);
-                const hasLocal = localRegex.test(src);
+                const hasURL = !!src.match(urlRegex);
+                const hasLocal = !!src.match(localRegex);
                 if (!hasURL && hasLocal) {
                   finalCSS += `@font-face{font-family:${family};src:${src};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
                   continue;
@@ -885,19 +906,25 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
+  function inlinePseudoElements(source, clone, options) {
     return __async(this, null, function* () {
+      var _a;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
         try {
           const style = getStyle(source, pseudo);
           if (!style || typeof style[Symbol.iterator] !== "function") continue;
+          const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
+          if (isEmptyPseudo) continue;
           if (pseudo === "::first-letter") {
             const normal = getComputedStyle(source);
             const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
             if (!isMeaningful) continue;
             const textNode = Array.from(clone.childNodes).find(
-              (n) => n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0
+              (n) => {
+                var _a2;
+                return n.nodeType === Node.TEXT_NODE && ((_a2 = n.textContent) == null ? void 0 : _a2.trim().length) > 0;
+              }
             );
             if (!textNode) continue;
             const text = textNode.textContent;
@@ -908,74 +935,83 @@
             const span = document.createElement("span");
             span.textContent = first;
             span.dataset.snapdomPseudo = "::first-letter";
-            const snapshot = snapshotComputedStyle(style);
-            const key = getStyleKey(snapshot, "span", compress);
-            cache.preStyleMap.set(span, key);
+            const snapshot2 = snapshotComputedStyle(style);
+            const key2 = getStyleKey(snapshot2, "span", options);
+            cache.preStyleMap.set(span, key2);
             const restNode = document.createTextNode(rest);
             clone.replaceChild(restNode, textNode);
             clone.insertBefore(span, restNode);
             continue;
           }
-          const content = style.getPropertyValue("content");
-          const bg = style.getPropertyValue("background-image");
-          const bgColor = style.getPropertyValue("background-color");
-          const hasContent = content !== "none";
+          const content = style.content;
+          const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+          const bg = style.backgroundImage;
+          const bgColor = style.backgroundColor;
+          const fontFamily = style.fontFamily;
+          const fontSize = parseInt(style.fontSize) || 32;
+          const fontWeight = parseInt(style.fontWeight) || false;
+          const color = style.color || "#000";
+          const display = style.display;
+          const width = parseFloat(style.width);
+          const height = parseFloat(style.height);
+          const borderStyle = style.borderStyle;
+          const borderWidth = parseFloat(style.borderWidth);
+          const transform = style.transform;
+          const isIconFont2 = isIconFont(fontFamily);
+          const hasExplicitContent = content !== "none" && cleanContent !== "";
           const hasBg = bg && bg !== "none";
           const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
-          if (hasContent || hasBg || hasBgColor) {
-            const fontFamily = style.getPropertyValue("font-family");
-            const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
-            const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
-            const color = style.getPropertyValue("color") || "#000";
-            const pseudoEl = document.createElement("span");
-            pseudoEl.dataset.snapdomPseudo = pseudo;
-            const snapshot = snapshotComputedStyle(style);
-            const key = getStyleKey(snapshot, "span", compress);
-            cache.preStyleMap.set(pseudoEl, key);
-            const isIconFont2 = isIconFont(fontFamily);
-            let cleanContent;
-            if (/counter\s*\(|counters\s*\(/.test(content)) {
-              cleanContent = "- ";
-            } else {
-              cleanContent = parseContent(content);
-            }
-            if (isIconFont2 && cleanContent.length === 1) {
-              const imgEl = document.createElement("img");
-              imgEl.src = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-              imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
-              pseudoEl.appendChild(imgEl);
-            } else if (cleanContent.startsWith("url(")) {
-              const rawUrl = extractURL(cleanContent);
-              if (rawUrl && rawUrl.trim() !== "") {
-                try {
-                  const imgEl = document.createElement("img");
-                  const dataUrl = yield fetchImage(safeEncodeURI(rawUrl, { useProxy }));
-                  imgEl.src = dataUrl;
-                  imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
-                  pseudoEl.appendChild(imgEl);
-                } catch (e) {
-                  console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
-                }
-              }
-            } else if (!isIconFont2 && cleanContent && cleanContent !== "none") {
-              pseudoEl.textContent = cleanContent;
-            }
-            if (hasBg) {
+          const hasBox = display !== "inline" && (width > 0 || height > 0);
+          const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
+          const hasTransform = transform && transform !== "none";
+          const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+          if (!shouldRender) continue;
+          const pseudoEl = document.createElement("span");
+          pseudoEl.dataset.snapdomPseudo = pseudo;
+          pseudoEl.style.verticalAlign = "middle";
+          const snapshot = snapshotComputedStyle(style);
+          const key = getStyleKey(snapshot, "span", options);
+          cache.preStyleMap.set(pseudoEl, key);
+          if (isIconFont2 && cleanContent.length === 1) {
+            const { dataUrl, width: width2, height: height2 } = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+            const imgEl = document.createElement("img");
+            imgEl.src = dataUrl;
+            imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
+            pseudoEl.appendChild(imgEl);
+            clone.dataset.snapdomHasIcon = "true";
+          } else if (cleanContent.startsWith("url(")) {
+            const rawUrl = extractURL(cleanContent);
+            if (rawUrl == null ? void 0 : rawUrl.trim()) {
               try {
-                const bgSplits = splitBackgroundImage(bg);
-                const newBgParts = yield Promise.all(
-                  bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-                );
-                pseudoEl.style.backgroundImage = newBgParts.join(", ");
+                const imgEl = document.createElement("img");
+                const dataUrl = yield fetchImage(safeEncodeURI(rawUrl), options);
+                imgEl.src = dataUrl;
+                imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+                pseudoEl.appendChild(imgEl);
               } catch (e) {
-                console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
+                console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
               }
             }
-            if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-            const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
-            const hasVisibleBox = hasContent2 || hasBg || hasBgColor;
-            if (!hasVisibleBox) continue;
-            pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
+          } else if (!isIconFont2 && hasExplicitContent) {
+            pseudoEl.textContent = cleanContent;
+          }
+          if (hasBg) {
+            try {
+              const bgSplits = splitBackgroundImage(bg);
+              const newBgParts = yield Promise.all(bgSplits.map(inlineSingleBackgroundEntry));
+              pseudoEl.style.backgroundImage = newBgParts.join(", ");
+            } catch (e) {
+              console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
+            }
+          }
+          if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
+          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.trim()) !== "";
+          const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+          if (!hasVisibleBox) continue;
+          if (pseudo === "::before") {
+            clone.insertBefore(pseudoEl, clone.firstChild);
+          } else {
+            clone.appendChild(pseudoEl);
           }
         } catch (e) {
           console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
@@ -984,53 +1020,73 @@
       const sChildren = Array.from(source.children);
       const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
       for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-        yield inlinePseudoElements(
-          sChildren[i],
-          cChildren[i],
-          compress,
-          embedFonts,
-          useProxy
-        );
+        yield inlinePseudoElements(sChildren[i], cChildren[i], options);
       }
     });
   }
 
   // src/modules/svgDefs.js
-  function inlineExternalDef(root) {
-    if (!root) return;
-    const defsSources = document.querySelectorAll("svg > defs");
-    if (!defsSources.length) return;
-    root.querySelectorAll("svg").forEach((svg) => {
-      const uses = svg.querySelectorAll("use");
-      if (!uses.length) return;
-      const usedIds = /* @__PURE__ */ new Set();
-      uses.forEach((use) => {
-        const href = use.getAttribute("xlink:href") || use.getAttribute("href");
-        if (href && href.startsWith("#")) usedIds.add(href.slice(1));
-      });
-      if (!usedIds.size) return;
-      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-      for (const id of usedIds) {
-        for (const source of defsSources) {
-          const def = source.querySelector(`#${CSS.escape(id)}`);
-          if (def) {
-            defs.appendChild(def.cloneNode(true));
-            break;
+  function inlineExternalDefsAndSymbols(rootElement) {
+    if (!rootElement) return;
+    const usedIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("use").forEach((use) => {
+      const href = use.getAttribute("xlink:href") || use.getAttribute("href");
+      if (href && href.startsWith("#")) {
+        usedIds.add(href.slice(1));
+      }
+    });
+    if (!usedIds.size) return;
+    const allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
+    const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
+    const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
+    let container = rootElement.querySelector("svg.inline-defs-container");
+    if (!container) {
+      container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      container.setAttribute("aria-hidden", "true");
+      container.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
+      container.classList.add("inline-defs-container");
+      rootElement.insertBefore(container, rootElement.firstChild);
+    }
+    const existingIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
+      existingIds.add(el.id);
+    });
+    usedIds.forEach((id) => {
+      if (existingIds.has(id)) return;
+      const symbol = globalSymbols.find((sym) => sym.id === id);
+      if (symbol) {
+        container.appendChild(symbol.cloneNode(true));
+        existingIds.add(id);
+        return;
+      }
+      for (const defs of globalDefs) {
+        const defEl = defs.querySelector(`#${CSS.escape(id)}`);
+        if (defEl) {
+          let defsContainer = container.querySelector("defs");
+          if (!defsContainer) {
+            defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+            container.appendChild(defsContainer);
           }
+          defsContainer.appendChild(defEl.cloneNode(true));
+          existingIds.add(id);
+          break;
         }
       }
-      if (defs.childNodes.length) {
-        svg.insertBefore(defs, svg.firstChild);
-      }
     });
   }
 
   // src/core/prepare.js
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
-      var _a;
+      var _a, _b;
       let clone;
       let classCSS = "";
+      stabilizeLayout(element);
+      try {
+        inlineExternalDefsAndSymbols(element);
+      } catch (e) {
+        console.warn("inlineExternal defs or symbol failed:", e);
+      }
       try {
         clone = deepClone(element, compress, options, element);
       } catch (e) {
@@ -1042,21 +1098,24 @@
       } catch (e) {
         console.warn("inlinePseudoElements failed:", e);
       }
-      try {
-        inlineExternalDef(clone);
-      } catch (e) {
-        console.warn("inlineExternalDef failed:", e);
-      }
       if (compress) {
         const keyToClass = generateCSSClasses();
         classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
         for (const [node, key] of cache.preStyleMap.entries()) {
           if (node.tagName === "STYLE") continue;
+          if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+            node.setAttribute("style", key.replace(/;/g, "; "));
+            continue;
+          }
           const className = keyToClass.get(key);
           if (className) node.classList.add(className);
           const bgImage = (_a = node.style) == null ? void 0 : _a.backgroundImage;
-          node.removeAttribute("style");
+          const hasIcon = (_b = node.dataset) == null ? void 0 : _b.snapdomHasIcon;
           if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+          if (hasIcon) {
+            node.style.verticalAlign = "middle";
+            node.style.display = "inline";
+          }
         }
       } else {
         for (const [node, key] of cache.preStyleMap.entries()) {
@@ -1107,6 +1166,18 @@
       return { clone, classCSS };
     });
   }
+  function stabilizeLayout(element) {
+    const style = getComputedStyle(element);
+    const outlineStyle = style.outlineStyle;
+    const outlineWidth = style.outlineWidth;
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+    const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+    if (outlineVisible && borderAbsent) {
+      element.style.border = `${outlineWidth} solid transparent`;
+    }
+  }
 
   // src/modules/images.js
   function inlineImages(_0) {
@@ -1145,13 +1216,27 @@
         "mask-source",
         "mask-box-image-source",
         "mask-border-source",
-        "-webkit-mask-box-image-source"
+        "-webkit-mask-box-image-source",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat"
       ];
       while (queue.length) {
         const [srcNode, cloneNode] = queue.shift();
         const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
         if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
+        const hasBorderImage = (() => {
+          const bi = style.getPropertyValue("border-image");
+          const bis = style.getPropertyValue("border-image-source");
+          return bi && bi !== "none" || bis && bis !== "none";
+        })();
         for (const prop of imageProps) {
+          if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
+            continue;
+          }
           const val = style.getPropertyValue(prop);
           if (!val || val === "none") continue;
           const splits = splitBackgroundImage(val);
@@ -1255,8 +1340,6 @@
             const existingTransform = clone.style.transform || "";
             const scaleTransform = `scale(${scaleX}, ${scaleY})`;
             clone.style.transform = `${scaleTransform} ${existingTransform}`.trim();
-          } else if (hasScale && isSafari()) {
-            clone.style.scale = `${scale}`;
           }
           const svgNS = "http://www.w3.org/2000/svg";
           const fo = document.createElementNS(svgNS, "foreignObject");
@@ -1282,17 +1365,14 @@
   }
 
   // src/api/snapdom.js
-  function toImg(_0, _1) {
-    return __async(this, arguments, function* (url, { dpr = 1, scale = 1 }) {
+  function toImg(_0) {
+    return __async(this, arguments, function* (url, { scale = 1 } = {}) {
       const img = new Image();
       img.src = url;
       yield img.decode();
-      if (isSafari) {
-        img.width = img.width * scale;
-        img.height = img.height * scale;
-      } else {
-        img.width = img.width / scale;
-        img.height = img.height / scale;
+      if (scale !== 1) {
+        img.style.width = `${img.naturalWidth * scale}px`;
+        img.style.height = `${img.naturalHeight * scale}px`;
       }
       return img;
     });
@@ -1301,17 +1381,34 @@
     return __async(this, arguments, function* (url, { dpr = 1, scale = 1 } = {}) {
       const img = new Image();
       img.src = url;
+      img.crossOrigin = "anonymous";
+      img.loading = "eager";
+      img.decoding = "sync";
+      const isSafariBrowser = isSafari();
+      let appended = false;
+      if (isSafariBrowser) {
+        document.body.appendChild(img);
+        appended = true;
+      }
       yield img.decode();
+      if (isSafariBrowser) {
+        yield new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      if (img.width === 0 || img.height === 0) {
+        if (appended) img.remove();
+        throw new Error("Image failed to load or has no dimensions");
+      }
+      const width = img.naturalWidth * scale;
+      const height = img.naturalHeight * scale;
       const canvas = document.createElement("canvas");
-      const width = img.width * scale;
-      const height = img.height * scale;
       canvas.width = Math.ceil(width * dpr);
       canvas.height = Math.ceil(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(dpr, dpr);
       ctx.drawImage(img, 0, 0, width, height);
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
+      if (appended) img.remove();
       return canvas;
     });
   }
@@ -1366,7 +1463,7 @@
     });
   }
   function download(_0) {
-    return __async(this, arguments, function* (url, { dpr = 1, scale = 1, backgroundColor = "#fff", format = "png", filename = "capture" } = {}) {
+    return __async(this, arguments, function* (url, { dpr = 1, scale = 1, backgroundColor, format = "png", filename = "snapDOM" } = {}) {
       if (format === "svg") {
         const blob = yield toBlob(url);
         const objectURL = URL.createObjectURL(blob);
@@ -1404,20 +1501,24 @@
     });
   }
   snapdom.capture = (_0, ..._1) => __async(null, [_0, ..._1], function* (el, options = {}) {
+    var _a;
     const url = yield captureDOM(el, options);
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = (_a = options.dpr) != null ? _a : window.devicePixelRatio || 1;
     const scale = options.scale || 1;
     return {
       url,
       options,
       toRaw: () => url,
-      toImg: () => toImg(url, { dpr, scale }),
-      toCanvas: () => toCanvas(url, { dpr, scale }),
-      toBlob: (options2) => toBlob(url, __spreadValues({ dpr, scale }, options2)),
-      toPng: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "png"),
-      toJpg: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "jpeg"),
-      toWebp: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "webp"),
-      download: ({ format = "png", filename = "capture", backgroundColor } = {}) => download(url, { dpr, scale, backgroundColor, format, filename })
+      toImg: (opts = {}) => toImg(url, __spreadValues({ dpr, scale }, opts)),
+      toCanvas: (opts = {}) => toCanvas(url, __spreadValues({ dpr, scale }, opts)),
+      toBlob: (opts = {}) => toBlob(url, __spreadValues({ dpr, scale }, opts)),
+      toPng: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "png"),
+      toJpg: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "jpeg"),
+      toWebp: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "webp"),
+      download: (_b = {}) => {
+        var _c = _b, { format = "png", filename = "snapDOM", backgroundColor } = _c, opts = __objRest(_c, ["format", "filename", "backgroundColor"]);
+        return download(url, __spreadValues({ dpr, scale, format, filename, backgroundColor }, opts));
+      }
     };
   });
   snapdom.toRaw = (el, options) => __async(null, null, function* () {