smooth-screenshot 1.1.2 → 1.1.4

package/README.md

@@ -6,6 +6,8 @@
 [![types](https://img.shields.io/npm/types/smooth-screenshot)](https://www.npmjs.com/package/smooth-screenshot)
 [![license](https://img.shields.io/npm/l/smooth-screenshot)](./LICENSE)
 
+**[Live demo & docs → luccas-carvalho.github.io/smooth-screenshot](https://luccas-carvalho.github.io/smooth-screenshot/)**
+
 **Capture any DOM element to PNG, JPEG, WebP, SVG, or PDF — without ever freezing the UI.**
 
 Most DOM-to-image libraries do all their work in one synchronous burst: on a large

package/dist/index.cjs

@@ -250,8 +250,25 @@ function createContext(target, options) {
   return context;
 }
 
+// src/util/ns.ts
+var svgNs = null;
+var xhtmlNs = null;
+function svgNamespace(doc) {
+  if (svgNs === null) {
+    const probe = doc.createElement("div");
+    probe.innerHTML = "<svg></svg>";
+    svgNs = probe.firstElementChild.namespaceURI ?? "";
+  }
+  return svgNs;
+}
+function xhtmlNamespace(doc) {
+  if (xhtmlNs === null) {
+    xhtmlNs = doc.createElement("div").namespaceURI ?? "";
+  }
+  return xhtmlNs;
+}
+
 // src/clone/default-style.ts
-var XHTML_NS = "http://www.w3.org/1999/xhtml";
 function ensureSandbox(context) {
   if (context.sandbox?.contentDocument) {
     return context.sandbox.contentDocument;
@@ -267,7 +284,8 @@ function ensureSandbox(context) {
   return doc;
 }
 function getDefaultStyle(context, source) {
-  const namespace = source.namespaceURI ?? XHTML_NS;
+  const xhtmlNs2 = xhtmlNamespace(context.ownerDocument);
+  const namespace = source.namespaceURI ?? xhtmlNs2;
   const key = `${namespace}|${source.localName}`;
   const cached = context.defaultStyleCache.get(key);
   if (cached) return cached;
@@ -278,7 +296,7 @@ function getDefaultStyle(context, source) {
     context.defaultStyleCache.set(key, empty);
     return empty;
   }
-  const element = namespace === XHTML_NS ? doc.createElement(source.localName) : doc.createElementNS(namespace, source.localName);
+  const element = namespace === xhtmlNs2 ? doc.createElement(source.localName) : doc.createElementNS(namespace, source.localName);
   doc.body.appendChild(element);
   const computed = sandboxWindow.getComputedStyle(element);
   const record = {};
@@ -738,14 +756,13 @@ async function embedResources(clone, context) {
 }
 
 // src/serialize/foreign-object-svg.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var XHTML_NS2 = "http://www.w3.org/1999/xhtml";
 function buildSvgString(params) {
   const {
     clone,
     doc,
     fullWidth,
     fullHeight,
+    scale,
     pseudoRules,
     fontCss,
     backgroundColor,
@@ -753,25 +770,26 @@ function buildSvgString(params) {
   } = params;
   const outW = crop ? crop.width : fullWidth;
   const outH = crop ? crop.height : fullHeight;
-  const svg = doc.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("xmlns", SVG_NS);
-  svg.setAttribute("width", String(outW));
-  svg.setAttribute("height", String(outH));
+  const svgNs2 = svgNamespace(doc);
+  const svg = doc.createElementNS(svgNs2, "svg");
+  svg.setAttribute("xmlns", svgNs2);
+  svg.setAttribute("width", String(Math.round(outW * scale)));
+  svg.setAttribute("height", String(Math.round(outH * scale)));
   svg.setAttribute("viewBox", `0 0 ${outW} ${outH}`);
   if (backgroundColor) {
-    const rect = doc.createElementNS(SVG_NS, "rect");
+    const rect = doc.createElementNS(svgNs2, "rect");
     rect.setAttribute("width", "100%");
     rect.setAttribute("height", "100%");
     rect.setAttribute("fill", backgroundColor);
     svg.appendChild(rect);
   }
-  const foreignObject = doc.createElementNS(SVG_NS, "foreignObject");
+  const foreignObject = doc.createElementNS(svgNs2, "foreignObject");
   foreignObject.setAttribute("x", String(crop ? -crop.x : 0));
   foreignObject.setAttribute("y", String(crop ? -crop.y : 0));
   foreignObject.setAttribute("width", String(fullWidth));
   foreignObject.setAttribute("height", String(fullHeight));
   const container = doc.createElement("div");
-  container.setAttribute("xmlns", XHTML_NS2);
+  container.setAttribute("xmlns", xhtmlNamespace(doc));
   if (fontCss || pseudoRules.length > 0) {
     const style = doc.createElement("style");
     style.textContent = `${fontCss}
@@ -830,9 +848,9 @@ function drawSvgToCanvas(svgImage, deviceWidth, deviceHeight, context) {
   return canvas;
 }
 async function* rgbaBands(svgImage, geometry2, maxTile, context) {
-  const { outWidth, outHeight, deviceWidth, deviceHeight } = geometry2;
-  const rx = outWidth / deviceWidth;
-  const ry = outHeight / deviceHeight;
+  const { deviceWidth, deviceHeight } = geometry2;
+  const rx = (svgImage.naturalWidth || deviceWidth) / deviceWidth;
+  const ry = (svgImage.naturalHeight || deviceHeight) / deviceHeight;
   const bandRows = Math.max(
     1,
     Math.min(maxTile, Math.floor(MAX_BAND_BYTES / (deviceWidth * 4)) || 1)
@@ -1143,6 +1161,7 @@ async function prepare(target, context, backgroundColor) {
     doc: context.ownerDocument,
     fullWidth,
     fullHeight,
+    scale: context.options.scale,
     pseudoRules,
     fontCss,
     backgroundColor,