@impakers/debug 1.4.5 → 1.4.6

package/dist/react.js

@@ -1569,35 +1569,34 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/utils/capture-element.ts
+var UNSUPPORTED_COLOR_RE = /oklab|oklch|color-mix/i;
+var COLOR_DECLARATION_RE = /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi;
+function sanitizeUnsupportedColors(clonedDoc) {
+  clonedDoc.querySelectorAll("style").forEach((styleEl) => {
+    const text = styleEl.textContent || "";
+    if (UNSUPPORTED_COLOR_RE.test(text)) {
+      styleEl.textContent = text.replace(COLOR_DECLARATION_RE, "");
+    }
+  });
+  clonedDoc.querySelectorAll("*").forEach((el) => {
+    const s = el.style;
+    if (!s?.cssText) return;
+    if (UNSUPPORTED_COLOR_RE.test(s.cssText)) {
+      s.cssText = s.cssText.replace(COLOR_DECLARATION_RE, "");
+    }
+  });
+}
 async function captureElement(el, options = {}) {
   const { quality = 0.7, maxScale = 2 } = options;
-  const rect = el.getBoundingClientRect();
-  const scale = Math.min(window.devicePixelRatio, maxScale);
-  const canvas = document.createElement("canvas");
-  canvas.width = rect.width * scale;
-  canvas.height = rect.height * scale;
-  const ctx = canvas.getContext("2d");
-  ctx.scale(scale, scale);
-  const clone = el.cloneNode(true);
-  inlineComputedStyles(el, clone);
-  clone.style.margin = "0";
-  clone.style.position = "static";
-  const serializer = new XMLSerializer();
-  const html = serializer.serializeToString(clone);
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${rect.width}" height="${rect.height}">
-    <foreignObject width="100%" height="100%">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width:${rect.width}px;height:${rect.height}px;overflow:hidden">${html}</div>
-    </foreignObject>
-  </svg>`;
-  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
-  try {
-    const img = await loadImage(url);
-    ctx.drawImage(img, 0, 0, rect.width, rect.height);
-    return canvas.toDataURL("image/jpeg", quality);
-  } finally {
-    URL.revokeObjectURL(url);
-  }
+  const html2canvas = (await import("html2canvas")).default;
+  const canvas = await html2canvas(el, {
+    useCORS: true,
+    allowTaint: true,
+    scale: Math.min(window.devicePixelRatio, maxScale),
+    logging: false,
+    onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
+  });
+  return canvas.toDataURL("image/jpeg", quality);
 }
 async function captureFullPage(options = {}) {
   const { quality = 0.5, hideSelectors = [] } = options;
@@ -1614,17 +1613,7 @@ async function captureFullPage(options = {}) {
       logging: false,
       width: window.innerWidth,
       height: window.innerHeight,
-      onclone: (clonedDoc) => {
-        const unsupported = /oklab|oklch|color-mix/i;
-        clonedDoc.querySelectorAll("style").forEach((styleEl) => {
-          if (unsupported.test(styleEl.textContent || "")) {
-            styleEl.textContent = (styleEl.textContent || "").replace(
-              /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
-              ""
-            );
-          }
-        });
-      }
+      onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
     });
     return canvas.toDataURL("image/jpeg", quality);
   } catch {
@@ -1633,23 +1622,6 @@ async function captureFullPage(options = {}) {
     hiddenEls.forEach((el) => el.style.visibility = "");
   }
 }
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328"));
-    img.src = src;
-  });
-}
-function inlineComputedStyles(src, dst) {
-  const cs = window.getComputedStyle(src);
-  dst.style.cssText = cs.cssText;
-  const srcChildren = src.children;
-  const dstChildren = dst.children;
-  for (let i = 0; i < srcChildren.length && i < dstChildren.length; i++) {
-    inlineComputedStyles(srcChildren[i], dstChildren[i]);
-  }
-}
 
 // src/core/collector.ts
 var MAX_ERRORS = 20;