image-exporter 1.0.6 → 1.0.8

package/dist/image-exporter.umd.js

@@ -3,810 +3,1581 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["image-exporter"] = {}));
 })(this, function(exports2) {
   "use strict";
+  var _a;
+  function handleFileNames(imageOptions, filenames) {
+    let proposedFilename = imageOptions.label;
+    if (imageOptions.includeScaleInLabel) proposedFilename += `_@${imageOptions.scale}x`;
+    const extension = `.${imageOptions.format}`;
+    proposedFilename += extension;
+    if (!filenames.includes(proposedFilename)) {
+      filenames.push(proposedFilename);
+      return proposedFilename;
+    }
+    const numberPattern = /-(\d+)$/;
+    const match = proposedFilename.match(numberPattern);
+    if (match) {
+      const baseFilename = proposedFilename.replace(numberPattern, "");
+      let counter = parseInt(match[1], 10);
+      while (filenames.includes(`${baseFilename}-${counter}${extension}`)) {
+        counter++;
+      }
+      const newFilename = `${baseFilename}-${counter}${extension}`;
+      filenames.push(newFilename);
+      return newFilename;
+    } else {
+      const baseFilename = proposedFilename.replace(extension, "");
+      let counter = 2;
+      while (filenames.includes(`${baseFilename}-${counter}${extension}`)) {
+        counter++;
+      }
+      const newFilename = `${baseFilename}-${counter}${extension}`;
+      filenames.push(newFilename);
+      return newFilename;
+    }
+  }
+  function changeJpegDpi(uint8Array, dpi) {
+    uint8Array[13] = 1;
+    uint8Array[14] = dpi >> 8;
+    uint8Array[15] = dpi & 255;
+    uint8Array[16] = dpi >> 8;
+    uint8Array[17] = dpi & 255;
+    return uint8Array;
+  }
+  const _P = "p".charCodeAt(0);
+  const _H = "H".charCodeAt(0);
+  const _Y = "Y".charCodeAt(0);
+  const _S = "s".charCodeAt(0);
+  let pngDataTable;
+  function createPngDataTable() {
+    const crcTable = new Int32Array(256);
+    for (let n = 0; n < 256; n++) {
+      let c = n;
+      for (let k = 0; k < 8; k++) {
+        c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+      }
+      crcTable[n] = c;
+    }
+    return crcTable;
+  }
+  function calcCrc(uint8Array) {
+    let c = -1;
+    if (!pngDataTable)
+      pngDataTable = createPngDataTable();
+    for (let n = 0; n < uint8Array.length; n++) {
+      c = pngDataTable[(c ^ uint8Array[n]) & 255] ^ c >>> 8;
+    }
+    return c ^ -1;
+  }
+  function searchStartOfPhys(uint8Array) {
+    const length = uint8Array.length - 1;
+    for (let i = length; i >= 4; i--) {
+      if (uint8Array[i - 4] === 9 && uint8Array[i - 3] === _P && uint8Array[i - 2] === _H && uint8Array[i - 1] === _Y && uint8Array[i] === _S) {
+        return i - 3;
+      }
+    }
+    return 0;
+  }
+  function changePngDpi(uint8Array, dpi, overwritepHYs = false) {
+    const physChunk = new Uint8Array(13);
+    dpi *= 39.3701;
+    physChunk[0] = _P;
+    physChunk[1] = _H;
+    physChunk[2] = _Y;
+    physChunk[3] = _S;
+    physChunk[4] = dpi >>> 24;
+    physChunk[5] = dpi >>> 16;
+    physChunk[6] = dpi >>> 8;
+    physChunk[7] = dpi & 255;
+    physChunk[8] = physChunk[4];
+    physChunk[9] = physChunk[5];
+    physChunk[10] = physChunk[6];
+    physChunk[11] = physChunk[7];
+    physChunk[12] = 1;
+    const crc = calcCrc(physChunk);
+    const crcChunk = new Uint8Array(4);
+    crcChunk[0] = crc >>> 24;
+    crcChunk[1] = crc >>> 16;
+    crcChunk[2] = crc >>> 8;
+    crcChunk[3] = crc & 255;
+    if (overwritepHYs) {
+      const startingIndex = searchStartOfPhys(uint8Array);
+      uint8Array.set(physChunk, startingIndex);
+      uint8Array.set(crcChunk, startingIndex + 13);
+      return uint8Array;
+    } else {
+      const chunkLength = new Uint8Array(4);
+      chunkLength[0] = 0;
+      chunkLength[1] = 0;
+      chunkLength[2] = 0;
+      chunkLength[3] = 9;
+      const finalHeader = new Uint8Array(54);
+      finalHeader.set(uint8Array, 0);
+      finalHeader.set(chunkLength, 33);
+      finalHeader.set(physChunk, 37);
+      finalHeader.set(crcChunk, 50);
+      return finalHeader;
+    }
+  }
+  const b64PhysSignature1 = "AAlwSFlz";
+  const b64PhysSignature2 = "AAAJcEhZ";
+  const b64PhysSignature3 = "AAAACXBI";
+  function detectPhysChunkFromDataUrl(dataUrl) {
+    let b64index = dataUrl.indexOf(b64PhysSignature1);
+    if (b64index === -1) {
+      b64index = dataUrl.indexOf(b64PhysSignature2);
+    }
+    if (b64index === -1) {
+      b64index = dataUrl.indexOf(b64PhysSignature3);
+    }
+    return b64index;
+  }
+  const PREFIX = "[modern-screenshot]";
+  const IN_BROWSER = typeof window !== "undefined";
+  const SUPPORT_WEB_WORKER = IN_BROWSER && "Worker" in window;
+  const SUPPORT_ATOB = IN_BROWSER && "atob" in window;
+  const SUPPORT_BTOA = IN_BROWSER && "btoa" in window;
+  const USER_AGENT = IN_BROWSER ? (_a = window.navigator) == null ? void 0 : _a.userAgent : "";
+  const IN_CHROME = USER_AGENT.includes("Chrome");
+  const IN_SAFARI = USER_AGENT.includes("AppleWebKit") && !IN_CHROME;
+  const IN_FIREFOX = USER_AGENT.includes("Firefox");
+  const isContext = (value) => value && "__CONTEXT__" in value;
+  const isCssFontFaceRule = (rule) => rule.constructor.name === "CSSFontFaceRule";
+  const isCSSImportRule = (rule) => rule.constructor.name === "CSSImportRule";
+  const isElementNode = (node) => node.nodeType === 1;
+  const isSVGElementNode = (node) => typeof node.className === "object";
+  const isSVGImageElementNode = (node) => node.tagName === "image";
+  const isSVGUseElementNode = (node) => node.tagName === "use";
+  const isHTMLElementNode = (node) => isElementNode(node) && typeof node.style !== "undefined" && !isSVGElementNode(node);
+  const isCommentNode = (node) => node.nodeType === 8;
+  const isTextNode = (node) => node.nodeType === 3;
+  const isImageElement = (node) => node.tagName === "IMG";
+  const isVideoElement = (node) => node.tagName === "VIDEO";
+  const isCanvasElement = (node) => node.tagName === "CANVAS";
+  const isTextareaElement = (node) => node.tagName === "TEXTAREA";
+  const isInputElement = (node) => node.tagName === "INPUT";
+  const isStyleElement = (node) => node.tagName === "STYLE";
+  const isScriptElement = (node) => node.tagName === "SCRIPT";
+  const isSelectElement = (node) => node.tagName === "SELECT";
+  const isSlotElement = (node) => node.tagName === "SLOT";
+  const isIFrameElement = (node) => node.tagName === "IFRAME";
+  const consoleWarn = (...args) => console.warn(PREFIX, ...args);
+  function supportWebp(ownerDocument) {
+    var _a2;
+    const canvas = (_a2 = ownerDocument == null ? void 0 : ownerDocument.createElement) == null ? void 0 : _a2.call(ownerDocument, "canvas");
+    if (canvas) {
+      canvas.height = canvas.width = 1;
+    }
+    return Boolean(canvas) && "toDataURL" in canvas && Boolean(canvas.toDataURL("image/webp").includes("image/webp"));
+  }
+  const isDataUrl = (url) => url.startsWith("data:");
   function resolveUrl(url, baseUrl) {
-    if (url.match(/^[a-z]+:\/\//i)) {
+    if (url.match(/^[a-z]+:\/\//i))
       return url;
-    }
-    if (url.match(/^\/\//)) {
+    if (IN_BROWSER && url.match(/^\/\//))
       return window.location.protocol + url;
-    }
-    if (url.match(/^[a-z]+:/i)) {
+    if (url.match(/^[a-z]+:/i))
       return url;
-    }
-    const doc = document.implementation.createHTMLDocument();
+    if (!IN_BROWSER)
+      return url;
+    const doc = getDocument().implementation.createHTMLDocument();
     const base = doc.createElement("base");
     const a = doc.createElement("a");
     doc.head.appendChild(base);
     doc.body.appendChild(a);
-    if (baseUrl) {
+    if (baseUrl)
       base.href = baseUrl;
-    }
     a.href = url;
     return a.href;
   }
-  const uuid = /* @__PURE__ */ (() => {
-    let counter = 0;
-    const random = () => (
-      // eslint-disable-next-line no-bitwise
-      `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
-    );
-    return () => {
-      counter += 1;
-      return `u${random()}${counter}`;
-    };
-  })();
-  function toArray(arrayLike) {
-    const arr = [];
-    for (let i = 0, l = arrayLike.length; i < l; i++) {
-      arr.push(arrayLike[i]);
-    }
-    return arr;
-  }
-  let styleProps = null;
-  function getStyleProperties(options = {}) {
-    if (styleProps) {
-      return styleProps;
-    }
-    if (options.includeStyleProperties) {
-      styleProps = options.includeStyleProperties;
-      return styleProps;
-    }
-    styleProps = toArray(window.getComputedStyle(document.documentElement));
-    return styleProps;
-  }
-  function px(node, styleProperty) {
-    const win = node.ownerDocument.defaultView || window;
-    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
-    return val ? parseFloat(val.replace("px", "")) : 0;
-  }
-  function getNodeWidth(node) {
-    const leftBorder = px(node, "border-left-width");
-    const rightBorder = px(node, "border-right-width");
-    return node.clientWidth + leftBorder + rightBorder;
-  }
-  function getNodeHeight(node) {
-    const topBorder = px(node, "border-top-width");
-    const bottomBorder = px(node, "border-bottom-width");
-    return node.clientHeight + topBorder + bottomBorder;
-  }
-  function getImageSize(targetNode, options = {}) {
-    const width = options.width || getNodeWidth(targetNode);
-    const height = options.height || getNodeHeight(targetNode);
-    return { width, height };
+  function getDocument(target) {
+    return (target && isElementNode(target) ? target == null ? void 0 : target.ownerDocument : target) ?? window.document;
   }
-  function getPixelRatio() {
-    let ratio;
-    let FINAL_PROCESS;
-    try {
-      FINAL_PROCESS = process;
-    } catch (e) {
-    }
-    const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
-    if (val) {
-      ratio = parseInt(val, 10);
-      if (Number.isNaN(ratio)) {
-        ratio = 1;
-      }
-    }
-    return ratio || window.devicePixelRatio || 1;
+  const XMLNS = "http://www.w3.org/2000/svg";
+  function createSvg(width, height, ownerDocument) {
+    const svg = getDocument(ownerDocument).createElementNS(XMLNS, "svg");
+    svg.setAttributeNS(null, "width", width.toString());
+    svg.setAttributeNS(null, "height", height.toString());
+    svg.setAttributeNS(null, "viewBox", `0 0 ${width} ${height}`);
+    return svg;
   }
-  const canvasDimensionLimit = 16384;
-  function checkCanvasDimensions(canvas) {
-    if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
-      if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
-        if (canvas.width > canvas.height) {
-          canvas.height *= canvasDimensionLimit / canvas.width;
-          canvas.width = canvasDimensionLimit;
-        } else {
-          canvas.width *= canvasDimensionLimit / canvas.height;
-          canvas.height = canvasDimensionLimit;
-        }
-      } else if (canvas.width > canvasDimensionLimit) {
-        canvas.height *= canvasDimensionLimit / canvas.width;
-        canvas.width = canvasDimensionLimit;
-      } else {
-        canvas.width *= canvasDimensionLimit / canvas.height;
-        canvas.height = canvasDimensionLimit;
-      }
+  function svgToDataUrl(svg, removeControlCharacter) {
+    let xhtml = new XMLSerializer().serializeToString(svg);
+    if (removeControlCharacter) {
+      xhtml = xhtml.replace(/[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/gu, "");
     }
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xhtml)}`;
   }
-  function createImage(url) {
+  function readBlob(blob, type) {
     return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        img.decode().then(() => {
-          requestAnimationFrame(() => resolve(img));
-        });
-      };
-      img.onerror = reject;
-      img.crossOrigin = "anonymous";
-      img.decoding = "async";
-      img.src = url;
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.onabort = () => reject(new Error(`Failed read blob to ${type}`));
+      {
+        reader.readAsDataURL(blob);
+      }
     });
   }
-  async function svgToDataURL(svg) {
-    return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
-  }
-  async function nodeToDataURL(node, width, height) {
-    const xmlns = "http://www.w3.org/2000/svg";
-    const svg = document.createElementNS(xmlns, "svg");
-    const foreignObject = document.createElementNS(xmlns, "foreignObject");
-    svg.setAttribute("width", `${width}`);
-    svg.setAttribute("height", `${height}`);
-    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    foreignObject.setAttribute("width", "100%");
-    foreignObject.setAttribute("height", "100%");
-    foreignObject.setAttribute("x", "0");
-    foreignObject.setAttribute("y", "0");
-    foreignObject.setAttribute("externalResourcesRequired", "true");
-    svg.appendChild(foreignObject);
-    foreignObject.appendChild(node);
-    return svgToDataURL(svg);
+  const blobToDataUrl = (blob) => readBlob(blob, "dataUrl");
+  function createImage(url, ownerDocument) {
+    const img = getDocument(ownerDocument).createElement("img");
+    img.decoding = "sync";
+    img.loading = "eager";
+    img.src = url;
+    return img;
   }
-  const isInstanceOfElement = (node, instance) => {
-    if (node instanceof instance)
-      return true;
-    const nodePrototype = Object.getPrototypeOf(node);
-    if (nodePrototype === null)
-      return false;
-    return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
-  };
-  function formatCSSText(style) {
-    const content = style.getPropertyValue("content");
-    return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
+  function loadMedia(media, options) {
+    return new Promise((resolve) => {
+      const { timeout, ownerDocument, onError: userOnError, onWarn } = options ?? {};
+      const node = typeof media === "string" ? createImage(media, getDocument(ownerDocument)) : media;
+      let timer = null;
+      let removeEventListeners = null;
+      function onResolve() {
+        resolve(node);
+        timer && clearTimeout(timer);
+        removeEventListeners == null ? void 0 : removeEventListeners();
+      }
+      if (timeout) {
+        timer = setTimeout(onResolve, timeout);
+      }
+      if (isVideoElement(node)) {
+        const currentSrc = node.currentSrc || node.src;
+        if (!currentSrc) {
+          if (node.poster) {
+            return loadMedia(node.poster, options).then(resolve);
+          }
+          return onResolve();
+        }
+        if (node.readyState >= 2) {
+          return onResolve();
+        }
+        const onLoadeddata = onResolve;
+        const onError = (error) => {
+          onWarn == null ? void 0 : onWarn(
+            "Failed video load",
+            currentSrc,
+            error
+          );
+          userOnError == null ? void 0 : userOnError(error);
+          onResolve();
+        };
+        removeEventListeners = () => {
+          node.removeEventListener("loadeddata", onLoadeddata);
+          node.removeEventListener("error", onError);
+        };
+        node.addEventListener("loadeddata", onLoadeddata, { once: true });
+        node.addEventListener("error", onError, { once: true });
+      } else {
+        const currentSrc = isSVGImageElementNode(node) ? node.href.baseVal : node.currentSrc || node.src;
+        if (!currentSrc) {
+          return onResolve();
+        }
+        const onLoad = async () => {
+          if (isImageElement(node) && "decode" in node) {
+            try {
+              await node.decode();
+            } catch (error) {
+              onWarn == null ? void 0 : onWarn(
+                "Failed to decode image, trying to render anyway",
+                node.dataset.originalSrc || currentSrc,
+                error
+              );
+            }
+          }
+          onResolve();
+        };
+        const onError = (error) => {
+          onWarn == null ? void 0 : onWarn(
+            "Failed image load",
+            node.dataset.originalSrc || currentSrc,
+            error
+          );
+          onResolve();
+        };
+        if (isImageElement(node) && node.complete) {
+          return onLoad();
+        }
+        removeEventListeners = () => {
+          node.removeEventListener("load", onLoad);
+          node.removeEventListener("error", onError);
+        };
+        node.addEventListener("load", onLoad, { once: true });
+        node.addEventListener("error", onError, { once: true });
+      }
+    });
   }
-  function formatCSSProperties(style, options) {
-    return getStyleProperties(options).map((name) => {
-      const value = style.getPropertyValue(name);
-      const priority = style.getPropertyPriority(name);
-      return `${name}: ${value}${priority ? " !important" : ""};`;
-    }).join(" ");
-  }
-  function getPseudoElementStyle(className, pseudo, style, options) {
-    const selector = `.${className}:${pseudo}`;
-    const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
-    return document.createTextNode(`${selector}{${cssText}}`);
-  }
-  function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
-    const style = window.getComputedStyle(nativeNode, pseudo);
-    const content = style.getPropertyValue("content");
-    if (content === "" || content === "none") {
-      return;
-    }
-    const className = uuid();
-    try {
-      clonedNode.className = `${clonedNode.className} ${className}`;
-    } catch (err) {
-      return;
+  async function waitUntilLoad(node, options) {
+    if (isHTMLElementNode(node)) {
+      if (isImageElement(node) || isVideoElement(node)) {
+        await loadMedia(node, options);
+      } else {
+        await Promise.all(
+          ["img", "video"].flatMap((selectors) => {
+            return Array.from(node.querySelectorAll(selectors)).map((el) => loadMedia(el, options));
+          })
+        );
+      }
     }
-    const styleElement = document.createElement("style");
-    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
-    clonedNode.appendChild(styleElement);
-  }
-  function clonePseudoElements(nativeNode, clonedNode, options) {
-    clonePseudoElement(nativeNode, clonedNode, ":before", options);
-    clonePseudoElement(nativeNode, clonedNode, ":after", options);
-  }
-  const WOFF = "application/font-woff";
-  const JPEG = "image/jpeg";
-  const mimes = {
-    woff: WOFF,
-    woff2: WOFF,
-    ttf: "application/font-truetype",
-    eot: "application/vnd.ms-fontobject",
-    png: "image/png",
-    jpg: JPEG,
-    jpeg: JPEG,
-    gif: "image/gif",
-    tiff: "image/tiff",
-    svg: "image/svg+xml",
-    webp: "image/webp"
-  };
-  function getExtension(url) {
-    const match = /\.([^./]*?)$/g.exec(url);
-    return match ? match[1] : "";
   }
-  function getMimeType(url) {
-    const extension = getExtension(url).toLowerCase();
-    return mimes[extension] || "";
+  const uuid = /* @__PURE__ */ function uuid2() {
+    let counter = 0;
+    const random = () => `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4);
+    return () => {
+      counter += 1;
+      return `u${random()}${counter}`;
+    };
+  }();
+  function splitFontFamily(fontFamily) {
+    return fontFamily == null ? void 0 : fontFamily.split(",").map((val) => val.trim().replace(/"|'/g, "").toLowerCase()).filter(Boolean);
   }
-  function getContentFromDataUrl(dataURL) {
-    return dataURL.split(/,/)[1];
+  let uid = 0;
+  function createLogger(debug) {
+    const prefix = `${PREFIX}[#${uid}]`;
+    uid++;
+    return {
+      // eslint-disable-next-line no-console
+      time: (label) => debug && console.time(`${prefix} ${label}`),
+      // eslint-disable-next-line no-console
+      timeEnd: (label) => debug && console.timeEnd(`${prefix} ${label}`),
+      warn: (...args) => debug && consoleWarn(...args)
+    };
   }
-  function isDataUrl(url) {
-    return url.search(/^(data:)/) !== -1;
+  function getDefaultRequestInit(bypassingCache) {
+    return {
+      cache: bypassingCache ? "no-cache" : "force-cache"
+    };
   }
-  function makeDataUrl(content, mimeType) {
-    return `data:${mimeType};base64,${content}`;
+  async function orCreateContext(node, options) {
+    return isContext(node) ? node : createContext(node, { ...options, autoDestruct: true });
   }
-  async function fetchAsDataURL(url, init, process2) {
-    const res = await fetch(url, init);
-    if (res.status === 404) {
-      throw new Error(`Resource "${res.url}" not found`);
-    }
-    const blob = await res.blob();
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onerror = reject;
-      reader.onloadend = () => {
+  async function createContext(node, options) {
+    var _a2, _b;
+    const { scale = 1, workerUrl, workerNumber = 1 } = options || {};
+    const debug = Boolean(options == null ? void 0 : options.debug);
+    const features = (options == null ? void 0 : options.features) ?? true;
+    const ownerDocument = node.ownerDocument ?? (IN_BROWSER ? window.document : void 0);
+    const ownerWindow = ((_a2 = node.ownerDocument) == null ? void 0 : _a2.defaultView) ?? (IN_BROWSER ? window : void 0);
+    const requests = /* @__PURE__ */ new Map();
+    const context = {
+      // Options
+      width: 0,
+      height: 0,
+      quality: 1,
+      type: "image/png",
+      scale,
+      backgroundColor: null,
+      style: null,
+      filter: null,
+      maximumCanvasSize: 0,
+      timeout: 3e4,
+      progress: null,
+      debug,
+      fetch: {
+        requestInit: getDefaultRequestInit((_b = options == null ? void 0 : options.fetch) == null ? void 0 : _b.bypassingCache),
+        placeholderImage: "data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+        bypassingCache: false,
+        ...options == null ? void 0 : options.fetch
+      },
+      fetchFn: null,
+      font: {},
+      drawImageInterval: 100,
+      workerUrl: null,
+      workerNumber,
+      onCloneNode: null,
+      onEmbedNode: null,
+      onCreateForeignObjectSvg: null,
+      includeStyleProperties: null,
+      autoDestruct: false,
+      ...options,
+      // InternalContext
+      __CONTEXT__: true,
+      log: createLogger(debug),
+      node,
+      ownerDocument,
+      ownerWindow,
+      dpi: scale === 1 ? null : 96 * scale,
+      svgStyleElement: createStyleElement(ownerDocument),
+      svgDefsElement: ownerDocument == null ? void 0 : ownerDocument.createElementNS(XMLNS, "defs"),
+      svgStyles: /* @__PURE__ */ new Map(),
+      defaultComputedStyles: /* @__PURE__ */ new Map(),
+      workers: [
+        ...Array.from({
+          length: SUPPORT_WEB_WORKER && workerUrl && workerNumber ? workerNumber : 0
+        })
+      ].map(() => {
         try {
-          resolve(process2({ res, result: reader.result }));
+          const worker = new Worker(workerUrl);
+          worker.onmessage = async (event) => {
+            var _a3, _b2, _c, _d;
+            const { url, result } = event.data;
+            if (result) {
+              (_b2 = (_a3 = requests.get(url)) == null ? void 0 : _a3.resolve) == null ? void 0 : _b2.call(_a3, result);
+            } else {
+              (_d = (_c = requests.get(url)) == null ? void 0 : _c.reject) == null ? void 0 : _d.call(_c, new Error(`Error receiving message from worker: ${url}`));
+            }
+          };
+          worker.onmessageerror = (event) => {
+            var _a3, _b2;
+            const { url } = event.data;
+            (_b2 = (_a3 = requests.get(url)) == null ? void 0 : _a3.reject) == null ? void 0 : _b2.call(_a3, new Error(`Error receiving message from worker: ${url}`));
+          };
+          return worker;
         } catch (error) {
-          reject(error);
+          context.log.warn("Failed to new Worker", error);
+          return null;
         }
-      };
-      reader.readAsDataURL(blob);
-    });
+      }).filter(Boolean),
+      fontFamilies: /* @__PURE__ */ new Map(),
+      fontCssTexts: /* @__PURE__ */ new Map(),
+      acceptOfImage: `${[
+        supportWebp(ownerDocument) && "image/webp",
+        "image/svg+xml",
+        "image/*",
+        "*/*"
+      ].filter(Boolean).join(",")};q=0.8`,
+      requests,
+      drawImageCount: 0,
+      tasks: [],
+      features,
+      isEnable: (key) => {
+        if (key === "restoreScrollPosition") {
+          return typeof features === "boolean" ? false : features[key] ?? false;
+        }
+        if (typeof features === "boolean") {
+          return features;
+        }
+        return features[key] ?? true;
+      }
+    };
+    context.log.time("wait until load");
+    await waitUntilLoad(node, { timeout: context.timeout, onWarn: context.log.warn });
+    context.log.timeEnd("wait until load");
+    const { width, height } = resolveBoundingBox(node, context);
+    context.width = width;
+    context.height = height;
+    return context;
+  }
+  function createStyleElement(ownerDocument) {
+    if (!ownerDocument)
+      return void 0;
+    const style = ownerDocument.createElement("style");
+    const cssText = style.ownerDocument.createTextNode(`
+.______background-clip--text {
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+`);
+    style.appendChild(cssText);
+    return style;
   }
-  const cache = {};
-  function getCacheKey(url, contentType, includeQueryParams) {
-    let key = url.replace(/\?.*/, "");
-    if (includeQueryParams) {
-      key = url;
+  function resolveBoundingBox(node, context) {
+    let { width, height } = context;
+    if (isElementNode(node) && (!width || !height)) {
+      const box = node.getBoundingClientRect();
+      width = width || box.width || Number(node.getAttribute("width")) || 0;
+      height = height || box.height || Number(node.getAttribute("height")) || 0;
     }
-    if (/ttf|otf|eot|woff2?/i.test(key)) {
-      key = key.replace(/.*\//, "");
+    return { width, height };
+  }
+  async function imageToCanvas(image, context) {
+    const {
+      log: log2,
+      timeout,
+      drawImageCount,
+      drawImageInterval
+    } = context;
+    log2.time("image to canvas");
+    const loaded = await loadMedia(image, { timeout, onWarn: context.log.warn });
+    const { canvas, context2d } = createCanvas(image.ownerDocument, context);
+    const drawImage = () => {
+      try {
+        context2d == null ? void 0 : context2d.drawImage(loaded, 0, 0, canvas.width, canvas.height);
+      } catch (error) {
+        context.log.warn("Failed to drawImage", error);
+      }
+    };
+    drawImage();
+    if (context.isEnable("fixSvgXmlDecode")) {
+      for (let i = 0; i < drawImageCount; i++) {
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            drawImage();
+            resolve();
+          }, i + drawImageInterval);
+        });
+      }
     }
-    return contentType ? `[${contentType}]${key}` : key;
+    context.drawImageCount = 0;
+    log2.timeEnd("image to canvas");
+    return canvas;
   }
-  async function resourceToDataURL(resourceUrl, contentType, options) {
-    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
-    if (cache[cacheKey] != null) {
-      return cache[cacheKey];
+  function createCanvas(ownerDocument, context) {
+    const { width, height, scale, backgroundColor, maximumCanvasSize: max } = context;
+    const canvas = ownerDocument.createElement("canvas");
+    canvas.width = Math.floor(width * scale);
+    canvas.height = Math.floor(height * scale);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    if (max) {
+      if (canvas.width > max || canvas.height > max) {
+        if (canvas.width > max && canvas.height > max) {
+          if (canvas.width > canvas.height) {
+            canvas.height *= max / canvas.width;
+            canvas.width = max;
+          } else {
+            canvas.width *= max / canvas.height;
+            canvas.height = max;
+          }
+        } else if (canvas.width > max) {
+          canvas.height *= max / canvas.width;
+          canvas.width = max;
+        } else {
+          canvas.width *= max / canvas.height;
+          canvas.height = max;
+        }
+      }
     }
-    if (options.cacheBust) {
-      resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
+    const context2d = canvas.getContext("2d");
+    if (context2d && backgroundColor) {
+      context2d.fillStyle = backgroundColor;
+      context2d.fillRect(0, 0, canvas.width, canvas.height);
     }
-    let dataURL;
-    try {
-      const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
-        if (!contentType) {
-          contentType = res.headers.get("Content-Type") || "";
+    return { canvas, context2d };
+  }
+  function cloneCanvas(canvas, context) {
+    if (canvas.ownerDocument) {
+      try {
+        const dataURL = canvas.toDataURL();
+        if (dataURL !== "data:,") {
+          return createImage(dataURL, canvas.ownerDocument);
         }
-        return getContentFromDataUrl(result);
-      });
-      dataURL = makeDataUrl(content, contentType);
+      } catch (error) {
+        context.log.warn("Failed to clone canvas", error);
+      }
+    }
+    const cloned = canvas.cloneNode(false);
+    const ctx = canvas.getContext("2d");
+    const clonedCtx = cloned.getContext("2d");
+    try {
+      if (ctx && clonedCtx) {
+        clonedCtx.putImageData(
+          ctx.getImageData(0, 0, canvas.width, canvas.height),
+          0,
+          0
+        );
+      }
+      return cloned;
     } catch (error) {
-      dataURL = options.imagePlaceholder || "";
-      let msg = `Failed to fetch resource: ${resourceUrl}`;
-      if (error) {
-        msg = typeof error === "string" ? error : error.message;
-      }
-      if (msg) {
-        console.warn(msg);
-      }
-    }
-    cache[cacheKey] = dataURL;
-    return dataURL;
-  }
-  async function cloneCanvasElement(canvas) {
-    const dataURL = canvas.toDataURL();
-    if (dataURL === "data:,") {
-      return canvas.cloneNode(false);
-    }
-    return createImage(dataURL);
-  }
-  async function cloneVideoElement(video, options) {
-    if (video.currentSrc) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      canvas.width = video.clientWidth;
-      canvas.height = video.clientHeight;
-      ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      const dataURL2 = canvas.toDataURL();
-      return createImage(dataURL2);
-    }
-    const poster = video.poster;
-    const contentType = getMimeType(poster);
-    const dataURL = await resourceToDataURL(poster, contentType, options);
-    return createImage(dataURL);
-  }
-  async function cloneIFrameElement(iframe, options) {
-    var _a;
+      context.log.warn("Failed to clone canvas", error);
+    }
+    return cloned;
+  }
+  function cloneIframe(iframe, context) {
+    var _a2;
     try {
-      if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
-        return await cloneNode(iframe.contentDocument.body, options, true);
+      if ((_a2 = iframe == null ? void 0 : iframe.contentDocument) == null ? void 0 : _a2.body) {
+        return cloneNode(iframe.contentDocument.body, context);
       }
-    } catch (_b) {
+    } catch (error) {
+      context.log.warn("Failed to clone iframe", error);
     }
     return iframe.cloneNode(false);
   }
-  async function cloneSingleNode(node, options) {
-    if (isInstanceOfElement(node, HTMLCanvasElement)) {
-      return cloneCanvasElement(node);
+  function cloneImage(image) {
+    const cloned = image.cloneNode(false);
+    if (image.currentSrc && image.currentSrc !== image.src) {
+      cloned.src = image.currentSrc;
+      cloned.srcset = "";
     }
-    if (isInstanceOfElement(node, HTMLVideoElement)) {
-      return cloneVideoElement(node, options);
+    if (cloned.loading === "lazy") {
+      cloned.loading = "eager";
     }
-    if (isInstanceOfElement(node, HTMLIFrameElement)) {
-      return cloneIFrameElement(node, options);
+    return cloned;
+  }
+  async function cloneVideo(video, context) {
+    if (video.ownerDocument && !video.currentSrc && video.poster) {
+      return createImage(video.poster, video.ownerDocument);
+    }
+    const cloned = video.cloneNode(false);
+    cloned.crossOrigin = "anonymous";
+    if (video.currentSrc && video.currentSrc !== video.src) {
+      cloned.src = video.currentSrc;
     }
-    return node.cloneNode(isSVGElement(node));
+    const ownerDocument = cloned.ownerDocument;
+    if (ownerDocument) {
+      let canPlay = true;
+      await loadMedia(cloned, { onError: () => canPlay = false, onWarn: context.log.warn });
+      if (!canPlay) {
+        if (video.poster) {
+          return createImage(video.poster, video.ownerDocument);
+        }
+        return cloned;
+      }
+      cloned.currentTime = video.currentTime;
+      await new Promise((resolve) => {
+        cloned.addEventListener("seeked", resolve, { once: true });
+      });
+      const canvas = ownerDocument.createElement("canvas");
+      canvas.width = video.offsetWidth;
+      canvas.height = video.offsetHeight;
+      try {
+        const ctx = canvas.getContext("2d");
+        if (ctx)
+          ctx.drawImage(cloned, 0, 0, canvas.width, canvas.height);
+      } catch (error) {
+        context.log.warn("Failed to clone video", error);
+        if (video.poster) {
+          return createImage(video.poster, video.ownerDocument);
+        }
+        return cloned;
+      }
+      return cloneCanvas(canvas, context);
+    }
+    return cloned;
   }
-  const isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
-  const isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SVG";
-  async function cloneChildren(nativeNode, clonedNode, options) {
-    var _a, _b;
-    if (isSVGElement(clonedNode)) {
-      return clonedNode;
+  function cloneElement(node, context) {
+    if (isCanvasElement(node)) {
+      return cloneCanvas(node, context);
     }
-    let children = [];
-    if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
-      children = toArray(nativeNode.assignedNodes());
-    } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
-      children = toArray(nativeNode.contentDocument.body.childNodes);
-    } else {
-      children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+    if (isIFrameElement(node)) {
+      return cloneIframe(node, context);
     }
-    if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
-      return clonedNode;
+    if (isImageElement(node)) {
+      return cloneImage(node);
     }
-    await children.reduce((deferred, child) => deferred.then(() => cloneNode(child, options)).then((clonedChild) => {
-      if (clonedChild) {
-        clonedNode.appendChild(clonedChild);
+    if (isVideoElement(node)) {
+      return cloneVideo(node, context);
+    }
+    return node.cloneNode(false);
+  }
+  function getSandBox(context) {
+    var _a2;
+    let sandbox = context.sandbox;
+    if (!sandbox) {
+      const { ownerDocument } = context;
+      try {
+        if (ownerDocument) {
+          sandbox = ownerDocument.createElement("iframe");
+          sandbox.id = `__SANDBOX__-${uuid()}`;
+          sandbox.width = "0";
+          sandbox.height = "0";
+          sandbox.style.visibility = "hidden";
+          sandbox.style.position = "fixed";
+          ownerDocument.body.appendChild(sandbox);
+          (_a2 = sandbox.contentWindow) == null ? void 0 : _a2.document.write('<!DOCTYPE html><meta charset="UTF-8"><title></title><body>');
+          context.sandbox = sandbox;
+        }
+      } catch (error) {
+        context.log.warn("Failed to getSandBox", error);
       }
-    }), Promise.resolve());
-    return clonedNode;
+    }
+    return sandbox;
   }
-  function cloneCSSStyle(nativeNode, clonedNode, options) {
-    const targetStyle = clonedNode.style;
-    if (!targetStyle) {
-      return;
+  const ignoredStyles = [
+    "width",
+    "height",
+    "-webkit-text-fill-color"
+  ];
+  const includedAttributes = [
+    "stroke",
+    "fill"
+  ];
+  function getDefaultStyle(node, pseudoElement, context) {
+    const { defaultComputedStyles } = context;
+    const nodeName = node.nodeName.toLowerCase();
+    const isSvgNode = isSVGElementNode(node) && nodeName !== "svg";
+    const attributes = isSvgNode ? includedAttributes.map((name) => [name, node.getAttribute(name)]).filter(([, value]) => value !== null) : [];
+    const key = [
+      isSvgNode && "svg",
+      nodeName,
+      attributes.map((name, value) => `${name}=${value}`).join(","),
+      pseudoElement
+    ].filter(Boolean).join(":");
+    if (defaultComputedStyles.has(key))
+      return defaultComputedStyles.get(key);
+    const sandbox = getSandBox(context);
+    const sandboxWindow = sandbox == null ? void 0 : sandbox.contentWindow;
+    if (!sandboxWindow)
+      return /* @__PURE__ */ new Map();
+    const sandboxDocument = sandboxWindow == null ? void 0 : sandboxWindow.document;
+    let root;
+    let el;
+    if (isSvgNode) {
+      root = sandboxDocument.createElementNS(XMLNS, "svg");
+      el = root.ownerDocument.createElementNS(root.namespaceURI, nodeName);
+      attributes.forEach(([name, value]) => {
+        el.setAttributeNS(null, name, value);
+      });
+      root.appendChild(el);
+    } else {
+      root = el = sandboxDocument.createElement(nodeName);
     }
-    const sourceStyle = window.getComputedStyle(nativeNode);
-    if (sourceStyle.cssText) {
-      targetStyle.cssText = sourceStyle.cssText;
-      targetStyle.transformOrigin = sourceStyle.transformOrigin;
+    el.textContent = " ";
+    sandboxDocument.body.appendChild(root);
+    const computedStyle = sandboxWindow.getComputedStyle(el, pseudoElement);
+    const styles = /* @__PURE__ */ new Map();
+    for (let len = computedStyle.length, i = 0; i < len; i++) {
+      const name = computedStyle.item(i);
+      if (ignoredStyles.includes(name))
+        continue;
+      styles.set(name, computedStyle.getPropertyValue(name));
+    }
+    sandboxDocument.body.removeChild(root);
+    defaultComputedStyles.set(key, styles);
+    return styles;
+  }
+  function getDiffStyle(style, defaultStyle, includeStyleProperties) {
+    var _a2;
+    const diffStyle = /* @__PURE__ */ new Map();
+    const prefixs = [];
+    const prefixTree = /* @__PURE__ */ new Map();
+    if (includeStyleProperties) {
+      for (const name of includeStyleProperties) {
+        applyTo(name);
+      }
     } else {
-      getStyleProperties(options).forEach((name) => {
-        let value = sourceStyle.getPropertyValue(name);
-        if (name === "font-size" && value.endsWith("px")) {
-          const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
-          value = `${reducedFont}px`;
-        }
-        if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") {
-          value = "block";
-        }
-        if (name === "d" && clonedNode.getAttribute("d")) {
-          value = `path(${clonedNode.getAttribute("d")})`;
+      for (let len = style.length, i = 0; i < len; i++) {
+        const name = style.item(i);
+        applyTo(name);
+      }
+    }
+    for (let len = prefixs.length, i = 0; i < len; i++) {
+      (_a2 = prefixTree.get(prefixs[i])) == null ? void 0 : _a2.forEach((value, name) => diffStyle.set(name, value));
+    }
+    function applyTo(name) {
+      const value = style.getPropertyValue(name);
+      const priority = style.getPropertyPriority(name);
+      const subIndex = name.lastIndexOf("-");
+      const prefix = subIndex > -1 ? name.substring(0, subIndex) : void 0;
+      if (prefix) {
+        let map = prefixTree.get(prefix);
+        if (!map) {
+          map = /* @__PURE__ */ new Map();
+          prefixTree.set(prefix, map);
         }
-        targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
-      });
+        map.set(name, [value, priority]);
+      }
+      if (defaultStyle.get(name) === value && !priority)
+        return;
+      if (prefix) {
+        prefixs.push(prefix);
+      } else {
+        diffStyle.set(name, [value, priority]);
+      }
     }
+    return diffStyle;
   }
-  function cloneInputValue(nativeNode, clonedNode) {
-    if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
-      clonedNode.innerHTML = nativeNode.value;
+  function copyCssStyles(node, cloned, isRoot, context) {
+    var _a2, _b, _c, _d;
+    const { ownerWindow, includeStyleProperties, currentParentNodeStyle } = context;
+    const clonedStyle = cloned.style;
+    const computedStyle = ownerWindow.getComputedStyle(node);
+    const defaultStyle = getDefaultStyle(node, null, context);
+    currentParentNodeStyle == null ? void 0 : currentParentNodeStyle.forEach((_, key) => {
+      defaultStyle.delete(key);
+    });
+    const style = getDiffStyle(computedStyle, defaultStyle, includeStyleProperties);
+    style.delete("transition-property");
+    style.delete("all");
+    style.delete("d");
+    style.delete("content");
+    if (isRoot) {
+      style.delete("margin-top");
+      style.delete("margin-right");
+      style.delete("margin-bottom");
+      style.delete("margin-left");
+      style.delete("margin-block-start");
+      style.delete("margin-block-end");
+      style.delete("margin-inline-start");
+      style.delete("margin-inline-end");
+      style.set("box-sizing", ["border-box", ""]);
     }
-    if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
-      clonedNode.setAttribute("value", nativeNode.value);
+    if (((_a2 = style.get("background-clip")) == null ? void 0 : _a2[0]) === "text") {
+      cloned.classList.add("______background-clip--text");
     }
-  }
-  function cloneSelectValue(nativeNode, clonedNode) {
-    if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
-      const clonedSelect = clonedNode;
-      const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
-      if (selectedOption) {
-        selectedOption.setAttribute("selected", "");
+    if (IN_CHROME) {
+      if (!style.has("font-kerning"))
+        style.set("font-kerning", ["normal", ""]);
+      if ((((_b = style.get("overflow-x")) == null ? void 0 : _b[0]) === "hidden" || ((_c = style.get("overflow-y")) == null ? void 0 : _c[0]) === "hidden") && ((_d = style.get("text-overflow")) == null ? void 0 : _d[0]) === "ellipsis" && node.scrollWidth === node.clientWidth) {
+        style.set("text-overflow", ["clip", ""]);
       }
     }
-  }
-  function decorate(nativeNode, clonedNode, options) {
-    if (isInstanceOfElement(clonedNode, Element)) {
-      cloneCSSStyle(nativeNode, clonedNode, options);
-      clonePseudoElements(nativeNode, clonedNode, options);
-      cloneInputValue(nativeNode, clonedNode);
-      cloneSelectValue(nativeNode, clonedNode);
+    for (let len = clonedStyle.length, i = 0; i < len; i++) {
+      clonedStyle.removeProperty(clonedStyle.item(i));
     }
-    return clonedNode;
+    style.forEach(([value, priority], name) => {
+      clonedStyle.setProperty(name, value, priority);
+    });
+    return style;
   }
-  async function ensureSVGSymbols(clone, options) {
-    const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
-    if (uses.length === 0) {
-      return clone;
+  function copyInputValue(node, cloned) {
+    if (isTextareaElement(node) || isInputElement(node) || isSelectElement(node)) {
+      cloned.setAttribute("value", node.value);
     }
-    const processedDefs = {};
-    for (let i = 0; i < uses.length; i++) {
-      const use = uses[i];
-      const id = use.getAttribute("xlink:href");
-      if (id) {
-        const exist = clone.querySelector(id);
-        const definition = document.querySelector(id);
-        if (!exist && definition && !processedDefs[id]) {
-          processedDefs[id] = await cloneNode(definition, options, true);
-        }
+  }
+  const pseudoClasses = [
+    ":before",
+    ":after"
+    // ':placeholder', TODO
+  ];
+  const scrollbarPseudoClasses = [
+    ":-webkit-scrollbar",
+    ":-webkit-scrollbar-button",
+    // ':-webkit-scrollbar:horizontal', TODO
+    ":-webkit-scrollbar-thumb",
+    ":-webkit-scrollbar-track",
+    ":-webkit-scrollbar-track-piece",
+    // ':-webkit-scrollbar:vertical', TODO
+    ":-webkit-scrollbar-corner",
+    ":-webkit-resizer"
+  ];
+  function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFamilies) {
+    const { ownerWindow, svgStyleElement, svgStyles, currentNodeStyle } = context;
+    if (!svgStyleElement || !ownerWindow)
+      return;
+    function copyBy(pseudoClass) {
+      var _a2;
+      const computedStyle = ownerWindow.getComputedStyle(node, pseudoClass);
+      let content = computedStyle.getPropertyValue("content");
+      if (!content || content === "none")
+        return;
+      addWordToFontFamilies == null ? void 0 : addWordToFontFamilies(content);
+      content = content.replace(/(')|(")|(counter\(.+\))/g, "");
+      const klasses = [uuid()];
+      const defaultStyle = getDefaultStyle(node, pseudoClass, context);
+      currentNodeStyle == null ? void 0 : currentNodeStyle.forEach((_, key) => {
+        defaultStyle.delete(key);
+      });
+      const style = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties);
+      style.delete("content");
+      style.delete("-webkit-locale");
+      if (((_a2 = style.get("background-clip")) == null ? void 0 : _a2[0]) === "text") {
+        cloned.classList.add("______background-clip--text");
       }
-    }
-    const nodes = Object.values(processedDefs);
-    if (nodes.length) {
-      const ns = "http://www.w3.org/1999/xhtml";
-      const svg = document.createElementNS(ns, "svg");
-      svg.setAttribute("xmlns", ns);
-      svg.style.position = "absolute";
-      svg.style.width = "0";
-      svg.style.height = "0";
-      svg.style.overflow = "hidden";
-      svg.style.display = "none";
-      const defs = document.createElementNS(ns, "defs");
-      svg.appendChild(defs);
-      for (let i = 0; i < nodes.length; i++) {
-        defs.appendChild(nodes[i]);
+      const cloneStyle = [
+        `content: '${content}';`
+      ];
+      style.forEach(([value, priority], name) => {
+        cloneStyle.push(`${name}: ${value}${priority ? " !important" : ""};`);
+      });
+      if (cloneStyle.length === 1)
+        return;
+      try {
+        cloned.className = [cloned.className, ...klasses].join(" ");
+      } catch (err) {
+        context.log.warn("Failed to copyPseudoClass", err);
+        return;
+      }
+      const cssText = cloneStyle.join("\n  ");
+      let allClasses = svgStyles.get(cssText);
+      if (!allClasses) {
+        allClasses = [];
+        svgStyles.set(cssText, allClasses);
       }
-      clone.appendChild(svg);
+      allClasses.push(`.${klasses[0]}:${pseudoClass}`);
     }
-    return clone;
+    pseudoClasses.forEach(copyBy);
+    if (copyScrollbar)
+      scrollbarPseudoClasses.forEach(copyBy);
   }
-  async function cloneNode(node, options, isRoot) {
-    if (!isRoot && options.filter && !options.filter(node)) {
-      return null;
+  const excludeParentNodes = /* @__PURE__ */ new Set([
+    "symbol"
+    // test/fixtures/svg.symbol.html
+  ]);
+  async function appendChildNode(node, cloned, child, context, addWordToFontFamilies) {
+    if (isElementNode(child) && (isStyleElement(child) || isScriptElement(child)))
+      return;
+    if (context.filter && !context.filter(child))
+      return;
+    if (excludeParentNodes.has(cloned.nodeName) || excludeParentNodes.has(child.nodeName)) {
+      context.currentParentNodeStyle = void 0;
+    } else {
+      context.currentParentNodeStyle = context.currentNodeStyle;
+    }
+    const childCloned = await cloneNode(child, context, false, addWordToFontFamilies);
+    if (context.isEnable("restoreScrollPosition")) {
+      restoreScrollPosition(node, childCloned);
     }
-    return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+    cloned.appendChild(childCloned);
   }
-  const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
-  const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
-  const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
-  function toRegex(url) {
-    const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
-    return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+  async function cloneChildNodes(node, cloned, context, addWordToFontFamilies) {
+    var _a2;
+    const firstChild = (isElementNode(node) ? (_a2 = node.shadowRoot) == null ? void 0 : _a2.firstChild : void 0) ?? node.firstChild;
+    for (let child = firstChild; child; child = child.nextSibling) {
+      if (isCommentNode(child))
+        continue;
+      if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === "function") {
+        const nodes = child.assignedNodes();
+        for (let i = 0; i < nodes.length; i++) {
+          await appendChildNode(node, cloned, nodes[i], context, addWordToFontFamilies);
+        }
+      } else {
+        await appendChildNode(node, cloned, child, context, addWordToFontFamilies);
+      }
+    }
   }
-  function parseURLs(cssText) {
-    const urls = [];
-    cssText.replace(URL_REGEX, (raw, quotation, url) => {
-      urls.push(url);
-      return raw;
-    });
-    return urls.filter((url) => !isDataUrl(url));
+  function restoreScrollPosition(node, chlidCloned) {
+    if (!isHTMLElementNode(node) || !isHTMLElementNode(chlidCloned))
+      return;
+    const { scrollTop, scrollLeft } = node;
+    if (!scrollTop && !scrollLeft) {
+      return;
+    }
+    const { transform } = chlidCloned.style;
+    const matrix = new DOMMatrix(transform);
+    const { a, b, c, d } = matrix;
+    matrix.a = 1;
+    matrix.b = 0;
+    matrix.c = 0;
+    matrix.d = 1;
+    matrix.translateSelf(-scrollLeft, -scrollTop);
+    matrix.a = a;
+    matrix.b = b;
+    matrix.c = c;
+    matrix.d = d;
+    chlidCloned.style.transform = matrix.toString();
   }
-  async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
-    try {
-      const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
-      const contentType = getMimeType(resourceURL);
-      let dataURL;
-      if (getContentFromUrl) ;
-      else {
-        dataURL = await resourceToDataURL(resolvedURL, contentType, options);
-      }
-      return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
-    } catch (error) {
+  function applyCssStyleWithOptions(cloned, context) {
+    const { backgroundColor, width, height, style: styles } = context;
+    const clonedStyle = cloned.style;
+    if (backgroundColor)
+      clonedStyle.setProperty("background-color", backgroundColor, "important");
+    if (width)
+      clonedStyle.setProperty("width", `${width}px`, "important");
+    if (height)
+      clonedStyle.setProperty("height", `${height}px`, "important");
+    if (styles) {
+      for (const name in styles) clonedStyle[name] = styles[name];
     }
-    return cssText;
   }
-  function filterPreferredFontFormat(str, { preferredFontFormat }) {
-    return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match) => {
-      while (true) {
-        const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
-        if (!format) {
-          return "";
+  const NORMAL_ATTRIBUTE_RE = /^[\w-:]+$/;
+  async function cloneNode(node, context, isRoot = false, addWordToFontFamilies) {
+    var _a2, _b, _c, _d;
+    const { ownerDocument, ownerWindow, fontFamilies } = context;
+    if (ownerDocument && isTextNode(node)) {
+      if (addWordToFontFamilies && /\S/.test(node.data)) {
+        addWordToFontFamilies(node.data);
+      }
+      return ownerDocument.createTextNode(node.data);
+    }
+    if (ownerDocument && ownerWindow && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
+      const cloned2 = await cloneElement(node, context);
+      if (context.isEnable("removeAbnormalAttributes")) {
+        const names = cloned2.getAttributeNames();
+        for (let len = names.length, i = 0; i < len; i++) {
+          const name = names[i];
+          if (!NORMAL_ATTRIBUTE_RE.test(name)) {
+            cloned2.removeAttribute(name);
+          }
         }
-        if (format === preferredFontFormat) {
-          return `src: ${src};`;
+      }
+      const style = context.currentNodeStyle = copyCssStyles(node, cloned2, isRoot, context);
+      if (isRoot)
+        applyCssStyleWithOptions(cloned2, context);
+      let copyScrollbar = false;
+      if (context.isEnable("copyScrollbar")) {
+        const overflow = [
+          (_a2 = style.get("overflow-x")) == null ? void 0 : _a2[0],
+          (_b = style.get("overflow-y")) == null ? void 0 : _b[0]
+        ];
+        copyScrollbar = overflow.includes("scroll") || (overflow.includes("auto") || overflow.includes("overlay")) && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth);
+      }
+      const textTransform = (_c = style.get("text-transform")) == null ? void 0 : _c[0];
+      const families = splitFontFamily((_d = style.get("font-family")) == null ? void 0 : _d[0]);
+      const addWordToFontFamilies2 = families ? (word) => {
+        if (textTransform === "uppercase") {
+          word = word.toUpperCase();
+        } else if (textTransform === "lowercase") {
+          word = word.toLowerCase();
+        } else if (textTransform === "capitalize") {
+          word = word[0].toUpperCase() + word.substring(1);
         }
+        families.forEach((family) => {
+          let fontFamily = fontFamilies.get(family);
+          if (!fontFamily) {
+            fontFamilies.set(family, fontFamily = /* @__PURE__ */ new Set());
+          }
+          word.split("").forEach((text) => fontFamily.add(text));
+        });
+      } : void 0;
+      copyPseudoClass(
+        node,
+        cloned2,
+        copyScrollbar,
+        context,
+        addWordToFontFamilies2
+      );
+      copyInputValue(node, cloned2);
+      if (!isVideoElement(node)) {
+        await cloneChildNodes(
+          node,
+          cloned2,
+          context,
+          addWordToFontFamilies2
+        );
       }
-    });
-  }
-  function shouldEmbed(url) {
-    return url.search(URL_REGEX) !== -1;
-  }
-  async function embedResources(cssText, baseUrl, options) {
-    if (!shouldEmbed(cssText)) {
-      return cssText;
+      return cloned2;
     }
-    const filteredCSSText = filterPreferredFontFormat(cssText, options);
-    const urls = parseURLs(filteredCSSText);
-    return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
+    const cloned = node.cloneNode(false);
+    await cloneChildNodes(node, cloned, context);
+    return cloned;
   }
-  async function embedProp(propName, node, options) {
-    var _a;
-    const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
-    if (propValue) {
-      const cssString = await embedResources(propValue, null, options);
-      node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
-      return true;
+  function destroyContext(context) {
+    context.ownerDocument = void 0;
+    context.ownerWindow = void 0;
+    context.svgStyleElement = void 0;
+    context.svgDefsElement = void 0;
+    context.svgStyles.clear();
+    context.defaultComputedStyles.clear();
+    if (context.sandbox) {
+      try {
+        context.sandbox.remove();
+      } catch (err) {
+        context.log.warn("Failed to destroyContext", err);
+      }
+      context.sandbox = void 0;
     }
-    return false;
+    context.workers = [];
+    context.fontFamilies.clear();
+    context.fontCssTexts.clear();
+    context.requests.clear();
+    context.tasks = [];
   }
-  async function embedBackground(clonedNode, options) {
-    await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
-    await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
+  function baseFetch(options) {
+    const { url, timeout, responseType, ...requestInit } = options;
+    const controller = new AbortController();
+    const timer = timeout ? setTimeout(() => controller.abort(), timeout) : void 0;
+    return fetch(url, { signal: controller.signal, ...requestInit }).then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed fetch, not 2xx response", { cause: response });
+      }
+      switch (responseType) {
+        case "arrayBuffer":
+          return response.arrayBuffer();
+        case "dataUrl":
+          return response.blob().then(blobToDataUrl);
+        case "text":
+        default:
+          return response.text();
+      }
+    }).finally(() => clearTimeout(timer));
   }
-  async function embedImageNode(clonedNode, options) {
-    const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
-    if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
-      return;
+  function contextFetch(context, options) {
+    const { url: rawUrl, requestType = "text", responseType = "text", imageDom } = options;
+    let url = rawUrl;
+    const {
+      timeout,
+      acceptOfImage,
+      requests,
+      fetchFn,
+      fetch: {
+        requestInit,
+        bypassingCache,
+        placeholderImage
+      },
+      font,
+      workers,
+      fontFamilies
+    } = context;
+    if (requestType === "image" && (IN_SAFARI || IN_FIREFOX)) {
+      context.drawImageCount++;
     }
-    const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
-    const dataURL = await resourceToDataURL(url, getMimeType(url), options);
-    await new Promise((resolve, reject) => {
-      clonedNode.onload = resolve;
-      clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
-        try {
-          resolve(options.onImageErrorHandler(...attributes));
-        } catch (error) {
-          reject(error);
+    let request = requests.get(rawUrl);
+    if (!request) {
+      if (bypassingCache) {
+        if (bypassingCache instanceof RegExp && bypassingCache.test(url)) {
+          url += (/\?/.test(url) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
         }
-      } : reject;
-      const image = clonedNode;
-      if (image.decode) {
-        image.decode = resolve;
       }
-      if (image.loading === "lazy") {
-        image.loading = "eager";
+      const canFontMinify = requestType.startsWith("font") && font && font.minify;
+      const fontTexts = /* @__PURE__ */ new Set();
+      if (canFontMinify) {
+        const families = requestType.split(";")[1].split(",");
+        families.forEach((family) => {
+          if (!fontFamilies.has(family))
+            return;
+          fontFamilies.get(family).forEach((text) => fontTexts.add(text));
+        });
       }
-      if (isImageElement) {
-        clonedNode.srcset = "";
-        clonedNode.src = dataURL;
-      } else {
-        clonedNode.href.baseVal = dataURL;
+      const needFontMinify = canFontMinify && fontTexts.size;
+      const baseFetchOptions = {
+        url,
+        timeout,
+        responseType: needFontMinify ? "arrayBuffer" : responseType,
+        headers: requestType === "image" ? { accept: acceptOfImage } : void 0,
+        ...requestInit
+      };
+      request = {
+        type: requestType,
+        resolve: void 0,
+        reject: void 0,
+        response: null
+      };
+      request.response = (async () => {
+        if (fetchFn && requestType === "image") {
+          const result = await fetchFn(rawUrl);
+          if (result)
+            return result;
+        }
+        if (!IN_SAFARI && rawUrl.startsWith("http") && workers.length) {
+          return new Promise((resolve, reject) => {
+            const worker = workers[requests.size & workers.length - 1];
+            worker.postMessage({ rawUrl, ...baseFetchOptions });
+            request.resolve = resolve;
+            request.reject = reject;
+          });
+        }
+        return baseFetch(baseFetchOptions);
+      })().catch((error) => {
+        requests.delete(rawUrl);
+        if (requestType === "image" && placeholderImage) {
+          context.log.warn("Failed to fetch image base64, trying to use placeholder image", url);
+          return typeof placeholderImage === "string" ? placeholderImage : placeholderImage(imageDom);
+        }
+        throw error;
+      });
+      requests.set(rawUrl, request);
+    }
+    return request.response;
+  }
+  async function replaceCssUrlToDataUrl(cssText, baseUrl, context, isImage) {
+    if (!hasCssUrl(cssText))
+      return cssText;
+    for (const [rawUrl, url] of parseCssUrls(cssText, baseUrl)) {
+      try {
+        const dataUrl = await contextFetch(
+          context,
+          {
+            url,
+            requestType: isImage ? "image" : "text",
+            responseType: "dataUrl"
+          }
+        );
+        cssText = cssText.replace(toRE(rawUrl), `$1${dataUrl}$3`);
+      } catch (error) {
+        context.log.warn("Failed to fetch css data url", rawUrl, error);
       }
+    }
+    return cssText;
+  }
+  function hasCssUrl(cssText) {
+    return /url\((['"]?)([^'"]+?)\1\)/.test(cssText);
+  }
+  const URL_RE = /url\((['"]?)([^'"]+?)\1\)/g;
+  function parseCssUrls(cssText, baseUrl) {
+    const result = [];
+    cssText.replace(URL_RE, (raw, quotation, url) => {
+      result.push([url, resolveUrl(url, baseUrl)]);
+      return raw;
     });
+    return result.filter(([url]) => !isDataUrl(url));
   }
-  async function embedChildren(clonedNode, options) {
-    const children = toArray(clonedNode.childNodes);
-    const deferreds = children.map((child) => embedImages(child, options));
-    await Promise.all(deferreds).then(() => clonedNode);
+  function toRE(url) {
+    const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+    return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
   }
-  async function embedImages(clonedNode, options) {
-    if (isInstanceOfElement(clonedNode, Element)) {
-      await embedBackground(clonedNode, options);
-      await embedImageNode(clonedNode, options);
-      await embedChildren(clonedNode, options);
+  const properties = [
+    "background-image",
+    "border-image-source",
+    "-webkit-border-image",
+    "-webkit-mask-image",
+    "list-style-image"
+  ];
+  function embedCssStyleImage(style, context) {
+    return properties.map((property) => {
+      const value = style.getPropertyValue(property);
+      if (!value || value === "none") {
+        return null;
+      }
+      if (IN_SAFARI || IN_FIREFOX) {
+        context.drawImageCount++;
+      }
+      return replaceCssUrlToDataUrl(value, null, context, true).then((newValue) => {
+        if (!newValue || value === newValue)
+          return;
+        style.setProperty(
+          property,
+          newValue,
+          style.getPropertyPriority(property)
+        );
+      });
+    }).filter(Boolean);
+  }
+  function embedImageElement(cloned, context) {
+    if (isImageElement(cloned)) {
+      const originalSrc = cloned.currentSrc || cloned.src;
+      if (!isDataUrl(originalSrc)) {
+        return [
+          contextFetch(context, {
+            url: originalSrc,
+            imageDom: cloned,
+            requestType: "image",
+            responseType: "dataUrl"
+          }).then((url) => {
+            if (!url)
+              return;
+            cloned.srcset = "";
+            cloned.dataset.originalSrc = originalSrc;
+            cloned.src = url || "";
+          })
+        ];
+      }
+      if (IN_SAFARI || IN_FIREFOX) {
+        context.drawImageCount++;
+      }
+    } else if (isSVGElementNode(cloned) && !isDataUrl(cloned.href.baseVal)) {
+      const originalSrc = cloned.href.baseVal;
+      return [
+        contextFetch(context, {
+          url: originalSrc,
+          imageDom: cloned,
+          requestType: "image",
+          responseType: "dataUrl"
+        }).then((url) => {
+          if (!url)
+            return;
+          cloned.dataset.originalSrc = originalSrc;
+          cloned.href.baseVal = url || "";
+        })
+      ];
     }
+    return [];
   }
-  function applyStyle(node, options) {
-    const { style } = node;
-    if (options.backgroundColor) {
-      style.backgroundColor = options.backgroundColor;
+  function embedSvgUse(cloned, context) {
+    const { ownerDocument, svgDefsElement } = context;
+    const href = cloned.getAttribute("href") ?? cloned.getAttribute("xlink:href");
+    if (!href)
+      return [];
+    const [svgUrl, id] = href.split("#");
+    if (id) {
+      const query = `#${id}`;
+      const definition = ownerDocument == null ? void 0 : ownerDocument.querySelector(`svg ${query}`);
+      if (svgUrl) {
+        cloned.setAttribute("href", query);
+      }
+      if (svgDefsElement == null ? void 0 : svgDefsElement.querySelector(query))
+        return [];
+      if (definition) {
+        svgDefsElement == null ? void 0 : svgDefsElement.appendChild(definition.cloneNode(true));
+        return [];
+      } else if (svgUrl) {
+        return [
+          contextFetch(context, {
+            url: svgUrl,
+            responseType: "text"
+          }).then((svgData) => {
+            svgDefsElement == null ? void 0 : svgDefsElement.insertAdjacentHTML("beforeend", svgData);
+          })
+        ];
+      }
     }
-    if (options.width) {
-      style.width = `${options.width}px`;
+    return [];
+  }
+  function embedNode(cloned, context) {
+    const { tasks } = context;
+    if (isElementNode(cloned)) {
+      if (isImageElement(cloned) || isSVGImageElementNode(cloned)) {
+        tasks.push(...embedImageElement(cloned, context));
+      }
+      if (isSVGUseElementNode(cloned)) {
+        tasks.push(...embedSvgUse(cloned, context));
+      }
     }
-    if (options.height) {
-      style.height = `${options.height}px`;
+    if (isHTMLElementNode(cloned)) {
+      tasks.push(...embedCssStyleImage(cloned.style, context));
     }
-    const manual = options.style;
-    if (manual != null) {
-      Object.keys(manual).forEach((key) => {
-        style[key] = manual[key];
-      });
+    cloned.childNodes.forEach((child) => {
+      embedNode(child, context);
+    });
+  }
+  async function embedWebFont(clone, context) {
+    const {
+      ownerDocument,
+      svgStyleElement,
+      fontFamilies,
+      fontCssTexts,
+      tasks,
+      font
+    } = context;
+    if (!ownerDocument || !svgStyleElement || !fontFamilies.size) {
+      return;
     }
-    return node;
-  }
-  const cssFetchCache = {};
-  async function fetchCSS(url) {
-    let cache2 = cssFetchCache[url];
-    if (cache2 != null) {
-      return cache2;
-    }
-    const res = await fetch(url);
-    const cssText = await res.text();
-    cache2 = { url, cssText };
-    cssFetchCache[url] = cache2;
-    return cache2;
-  }
-  async function embedFonts(data, options) {
-    let cssText = data.cssText;
-    const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
-    const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
-    const loadFonts = fontLocs.map(async (loc) => {
-      let url = loc.replace(regexUrl, "$1");
-      if (!url.startsWith("https://")) {
-        url = new URL(url, data.url).href;
-      }
-      return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
-        cssText = cssText.replace(loc, `url(${result})`);
-        return [loc, result];
+    if (font && font.cssText) {
+      const cssText = filterPreferredFormat(font.cssText, context);
+      svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
+`));
+    } else {
+      const styleSheets = Array.from(ownerDocument.styleSheets).filter((styleSheet) => {
+        try {
+          return "cssRules" in styleSheet && Boolean(styleSheet.cssRules.length);
+        } catch (error) {
+          context.log.warn(`Error while reading CSS rules from ${styleSheet.href}`, error);
+          return false;
+        }
       });
-    });
-    return Promise.all(loadFonts).then(() => cssText);
+      await Promise.all(
+        styleSheets.flatMap((styleSheet) => {
+          return Array.from(styleSheet.cssRules).map(async (cssRule, index) => {
+            if (isCSSImportRule(cssRule)) {
+              let importIndex = index + 1;
+              const baseUrl = cssRule.href;
+              let cssText = "";
+              try {
+                cssText = await contextFetch(context, {
+                  url: baseUrl,
+                  requestType: "text",
+                  responseType: "text"
+                });
+              } catch (error) {
+                context.log.warn(`Error fetch remote css import from ${baseUrl}`, error);
+              }
+              const replacedCssText = cssText.replace(
+                URL_RE,
+                (raw, quotation, url) => raw.replace(url, resolveUrl(url, baseUrl))
+              );
+              for (const rule of parseCss(replacedCssText)) {
+                try {
+                  styleSheet.insertRule(
+                    rule,
+                    rule.startsWith("@import") ? importIndex += 1 : styleSheet.cssRules.length
+                  );
+                } catch (error) {
+                  context.log.warn("Error inserting rule from remote css import", { rule, error });
+                }
+              }
+            }
+          });
+        })
+      );
+      const cssRules = styleSheets.flatMap((styleSheet) => Array.from(styleSheet.cssRules));
+      cssRules.filter((cssRule) => {
+        var _a2;
+        return isCssFontFaceRule(cssRule) && hasCssUrl(cssRule.style.getPropertyValue("src")) && ((_a2 = splitFontFamily(cssRule.style.getPropertyValue("font-family"))) == null ? void 0 : _a2.some((val) => fontFamilies.has(val)));
+      }).forEach((value) => {
+        const rule = value;
+        const cssText = fontCssTexts.get(rule.cssText);
+        if (cssText) {
+          svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}
+`));
+        } else {
+          tasks.push(
+            replaceCssUrlToDataUrl(
+              rule.cssText,
+              rule.parentStyleSheet ? rule.parentStyleSheet.href : null,
+              context
+            ).then((cssText2) => {
+              cssText2 = filterPreferredFormat(cssText2, context);
+              fontCssTexts.set(rule.cssText, cssText2);
+              svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText2}
+`));
+            })
+          );
+        }
+      });
+    }
   }
-  function parseCSS(source) {
-    if (source == null) {
+  const COMMENTS_RE = /(\/\*[\s\S]*?\*\/)/g;
+  const KEYFRAMES_RE = /((@.*?keyframes [\s\S]*?){([\s\S]*?}\s*?)})/gi;
+  function parseCss(source) {
+    if (source == null)
       return [];
-    }
     const result = [];
-    const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
-    let cssText = source.replace(commentsRegex, "");
-    const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+    let cssText = source.replace(COMMENTS_RE, "");
     while (true) {
-      const matches = keyframesRegex.exec(cssText);
-      if (matches === null) {
+      const matches = KEYFRAMES_RE.exec(cssText);
+      if (!matches)
         break;
-      }
       result.push(matches[0]);
     }
-    cssText = cssText.replace(keyframesRegex, "");
-    const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
-    const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
-    const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
+    cssText = cssText.replace(KEYFRAMES_RE, "");
+    const IMPORT_RE = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+    const UNIFIED_RE = new RegExp(
+      // eslint-disable-next-line
+      "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",
+      "gi"
+    );
     while (true) {
-      let matches = importRegex.exec(cssText);
-      if (matches === null) {
-        matches = unifiedRegex.exec(cssText);
-        if (matches === null) {
+      let matches = IMPORT_RE.exec(cssText);
+      if (!matches) {
+        matches = UNIFIED_RE.exec(cssText);
+        if (!matches) {
           break;
         } else {
-          importRegex.lastIndex = unifiedRegex.lastIndex;
+          IMPORT_RE.lastIndex = UNIFIED_RE.lastIndex;
         }
       } else {
-        unifiedRegex.lastIndex = importRegex.lastIndex;
+        UNIFIED_RE.lastIndex = IMPORT_RE.lastIndex;
       }
       result.push(matches[0]);
     }
     return result;
   }
-  async function getCSSRules(styleSheets, options) {
-    const ret = [];
-    const deferreds = [];
-    styleSheets.forEach((sheet) => {
-      if ("cssRules" in sheet) {
+  const URL_WITH_FORMAT_RE = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+  const FONT_SRC_RE = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+  function filterPreferredFormat(str, context) {
+    const { font } = context;
+    const preferredFormat = font ? font == null ? void 0 : font.preferredFormat : void 0;
+    return preferredFormat ? str.replace(FONT_SRC_RE, (match) => {
+      while (true) {
+        const [src, , format] = URL_WITH_FORMAT_RE.exec(match) || [];
+        if (!format)
+          return "";
+        if (format === preferredFormat)
+          return `src: ${src};`;
+      }
+    }) : str;
+  }
+  async function domToForeignObjectSvg(node, options) {
+    const context = await orCreateContext(node, options);
+    if (isElementNode(context.node) && isSVGElementNode(context.node))
+      return context.node;
+    const {
+      ownerDocument,
+      log: log2,
+      tasks,
+      svgStyleElement,
+      svgDefsElement,
+      svgStyles,
+      font,
+      progress,
+      autoDestruct,
+      onCloneNode,
+      onEmbedNode,
+      onCreateForeignObjectSvg
+    } = context;
+    log2.time("clone node");
+    const clone = await cloneNode(context.node, context, true);
+    if (svgStyleElement && ownerDocument) {
+      let allCssText = "";
+      svgStyles.forEach((klasses, cssText) => {
+        allCssText += `${klasses.join(",\n")} {
+  ${cssText}
+}
+`;
+      });
+      svgStyleElement.appendChild(ownerDocument.createTextNode(allCssText));
+    }
+    log2.timeEnd("clone node");
+    await (onCloneNode == null ? void 0 : onCloneNode(clone));
+    if (font !== false && isElementNode(clone)) {
+      log2.time("embed web font");
+      await embedWebFont(clone, context);
+      log2.timeEnd("embed web font");
+    }
+    log2.time("embed node");
+    embedNode(clone, context);
+    const count = tasks.length;
+    let current = 0;
+    const runTask = async () => {
+      while (true) {
+        const task = tasks.pop();
+        if (!task)
+          break;
         try {
-          toArray(sheet.cssRules || []).forEach((item, index) => {
-            if (item.type === CSSRule.IMPORT_RULE) {
-              let importIndex = index + 1;
-              const url = item.href;
-              const deferred = fetchCSS(url).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
-                try {
-                  sheet.insertRule(rule, rule.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
-                } catch (error) {
-                  console.error("Error inserting rule from remote css", {
-                    rule,
-                    error
-                  });
-                }
-              })).catch((e) => {
-                console.error("Error loading remote css", e.toString());
-              });
-              deferreds.push(deferred);
-            }
-          });
-        } catch (e) {
-          const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
-          if (sheet.href != null) {
-            deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
-              inline.insertRule(rule, inline.cssRules.length);
-            })).catch((err) => {
-              console.error("Error loading remote stylesheet", err);
-            }));
-          }
-          console.error("Error inlining remote css file", e);
+          await task;
+        } catch (error) {
+          context.log.warn("Failed to run task", error);
         }
+        progress == null ? void 0 : progress(++current, count);
       }
-    });
-    return Promise.all(deferreds).then(() => {
-      styleSheets.forEach((sheet) => {
-        if ("cssRules" in sheet) {
-          try {
-            toArray(sheet.cssRules || []).forEach((item) => {
-              ret.push(item);
-            });
-          } catch (e) {
-            console.error(`Error while reading CSS rules from ${sheet.href}`, e);
-          }
-        }
-      });
-      return ret;
-    });
+    };
+    progress == null ? void 0 : progress(current, count);
+    await Promise.all([...Array.from({ length: 4 })].map(runTask));
+    log2.timeEnd("embed node");
+    await (onEmbedNode == null ? void 0 : onEmbedNode(clone));
+    const svg = createForeignObjectSvg(clone, context);
+    svgDefsElement && svg.insertBefore(svgDefsElement, svg.children[0]);
+    svgStyleElement && svg.insertBefore(svgStyleElement, svg.children[0]);
+    autoDestruct && destroyContext(context);
+    await (onCreateForeignObjectSvg == null ? void 0 : onCreateForeignObjectSvg(svg));
+    return svg;
   }
-  function getWebFontRules(cssRules) {
-    return cssRules.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE).filter((rule) => shouldEmbed(rule.style.getPropertyValue("src")));
+  function createForeignObjectSvg(clone, context) {
+    const { width, height } = context;
+    const svg = createSvg(width, height, clone.ownerDocument);
+    const foreignObject = svg.ownerDocument.createElementNS(svg.namespaceURI, "foreignObject");
+    foreignObject.setAttributeNS(null, "x", "0%");
+    foreignObject.setAttributeNS(null, "y", "0%");
+    foreignObject.setAttributeNS(null, "width", "100%");
+    foreignObject.setAttributeNS(null, "height", "100%");
+    foreignObject.append(clone);
+    svg.appendChild(foreignObject);
+    return svg;
   }
-  async function parseWebFontRules(node, options) {
-    if (node.ownerDocument == null) {
-      throw new Error("Provided element is not within a Document");
+  async function domToCanvas(node, options) {
+    var _a2;
+    const context = await orCreateContext(node, options);
+    const svg = await domToForeignObjectSvg(context);
+    const dataUrl = svgToDataUrl(svg, context.isEnable("removeControlCharacter"));
+    if (!context.autoDestruct) {
+      context.svgStyleElement = createStyleElement(context.ownerDocument);
+      context.svgDefsElement = (_a2 = context.ownerDocument) == null ? void 0 : _a2.createElementNS(XMLNS, "defs");
+      context.svgStyles.clear();
     }
-    const styleSheets = toArray(node.ownerDocument.styleSheets);
-    const cssRules = await getCSSRules(styleSheets, options);
-    return getWebFontRules(cssRules);
-  }
-  function normalizeFontFamily(font) {
-    return font.trim().replace(/["']/g, "");
+    const image = createImage(dataUrl, svg.ownerDocument);
+    return await imageToCanvas(image, context);
   }
-  function getUsedFonts(node) {
-    const fonts = /* @__PURE__ */ new Set();
-    function traverse(node2) {
-      const fontFamily = node2.style.fontFamily || getComputedStyle(node2).fontFamily;
-      fontFamily.split(",").forEach((font) => {
-        fonts.add(normalizeFontFamily(font));
-      });
-      Array.from(node2.children).forEach((child) => {
-        if (child instanceof HTMLElement) {
-          traverse(child);
+  async function domToDataUrl(node, options) {
+    const context = await orCreateContext(node, options);
+    const { log: log2, quality, type, dpi } = context;
+    const canvas = await domToCanvas(context);
+    log2.time("canvas to data url");
+    let dataUrl = canvas.toDataURL(type, quality);
+    if (["image/png", "image/jpeg"].includes(type) && dpi && SUPPORT_ATOB && SUPPORT_BTOA) {
+      const [format, body] = dataUrl.split(",");
+      let headerLength = 0;
+      let overwritepHYs = false;
+      if (type === "image/png") {
+        const b64Index = detectPhysChunkFromDataUrl(body);
+        if (b64Index >= 0) {
+          headerLength = Math.ceil((b64Index + 28) / 3) * 4;
+          overwritepHYs = true;
+        } else {
+          headerLength = 33 / 3 * 4;
         }
-      });
+      } else if (type === "image/jpeg") {
+        headerLength = 18 / 3 * 4;
+      }
+      const stringHeader = body.substring(0, headerLength);
+      const restOfData = body.substring(headerLength);
+      const headerBytes = window.atob(stringHeader);
+      const uint8Array = new Uint8Array(headerBytes.length);
+      for (let i = 0; i < uint8Array.length; i++) {
+        uint8Array[i] = headerBytes.charCodeAt(i);
+      }
+      const finalArray = type === "image/png" ? changePngDpi(uint8Array, dpi, overwritepHYs) : changeJpegDpi(uint8Array, dpi);
+      const base64Header = window.btoa(String.fromCharCode(...finalArray));
+      dataUrl = [format, ",", base64Header, restOfData].join("");
     }
-    traverse(node);
-    return fonts;
-  }
-  async function getWebFontCSS(node, options) {
-    const rules = await parseWebFontRules(node, options);
-    const usedFonts = getUsedFonts(node);
-    const cssTexts = await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
-      const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
-      return embedResources(rule.cssText, baseUrl, options);
-    }));
-    return cssTexts.join("\n");
-  }
-  async function embedWebFonts(clonedNode, options) {
-    const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
-    if (cssText) {
-      const styleNode = document.createElement("style");
-      const sytleContent = document.createTextNode(cssText);
-      styleNode.appendChild(sytleContent);
-      if (clonedNode.firstChild) {
-        clonedNode.insertBefore(styleNode, clonedNode.firstChild);
-      } else {
-        clonedNode.appendChild(styleNode);
-      }
-    }
-  }
-  async function toSvg(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const clonedNode = await cloneNode(node, options, true);
-    await embedWebFonts(clonedNode, options);
-    await embedImages(clonedNode, options);
-    applyStyle(clonedNode, options);
-    const datauri = await nodeToDataURL(clonedNode, width, height);
-    return datauri;
-  }
-  async function toCanvas(node, options = {}) {
-    const { width, height } = getImageSize(node, options);
-    const svg = await toSvg(node, options);
-    const img = await createImage(svg);
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    const ratio = options.pixelRatio || getPixelRatio();
-    const canvasWidth = options.canvasWidth || width;
-    const canvasHeight = options.canvasHeight || height;
-    canvas.width = canvasWidth * ratio;
-    canvas.height = canvasHeight * ratio;
-    if (!options.skipAutoScale) {
-      checkCanvasDimensions(canvas);
-    }
-    canvas.style.width = `${canvasWidth}`;
-    canvas.style.height = `${canvasHeight}`;
-    if (options.backgroundColor) {
-      context.fillStyle = options.backgroundColor;
-      context.fillRect(0, 0, canvas.width, canvas.height);
-    }
-    context.drawImage(img, 0, 0, canvas.width, canvas.height);
-    return canvas;
+    log2.timeEnd("canvas to data url");
+    return dataUrl;
   }
-  async function toPng(node, options = {}) {
-    const canvas = await toCanvas(node, options);
-    return canvas.toDataURL();
+  async function domToSvg(node, options) {
+    const context = await orCreateContext(node, options);
+    const { width, height, ownerDocument } = context;
+    const dataUrl = await domToDataUrl(context);
+    const svg = createSvg(width, height, ownerDocument);
+    const svgImage = svg.ownerDocument.createElementNS(svg.namespaceURI, "image");
+    svgImage.setAttributeNS(null, "href", dataUrl);
+    svgImage.setAttributeNS(null, "height", "100%");
+    svgImage.setAttributeNS(null, "width", "100%");
+    svg.appendChild(svgImage);
+    return svgToDataUrl(svg, context.isEnable("removeControlCharacter"));
   }
-  async function toJpeg(node, options = {}) {
-    const canvas = await toCanvas(node, options);
-    return canvas.toDataURL("image/jpeg", options.quality || 1);
+  async function domToJpeg(node, options) {
+    return domToDataUrl(
+      await orCreateContext(node, { ...options, type: "image/jpeg" })
+    );
   }
-  function handleFileNames(imageOptions, filenames) {
-    let proposedFilename = imageOptions.label;
-    if (imageOptions.includeScaleInLabel) proposedFilename += `_@${imageOptions.scale}x`;
-    proposedFilename += `.${imageOptions.format}`;
-    if (!filenames.includes(proposedFilename)) {
-      filenames.push(proposedFilename);
-      return proposedFilename;
-    }
-    const numberPattern = /-(\d+)$/;
-    const match = proposedFilename.match(numberPattern);
-    if (match) {
-      const baseFilename = proposedFilename.replace(numberPattern, "");
-      let counter = parseInt(match[1], 10);
-      while (filenames.includes(`${baseFilename}-${counter}`)) {
-        counter++;
-      }
-      const newFilename = `${baseFilename}-${counter}`;
-      filenames.push(newFilename);
-      return newFilename;
-    } else {
-      let counter = 2;
-      while (filenames.includes(`${proposedFilename}-${counter}`)) {
-        counter++;
-      }
-      const newFilename = `${proposedFilename}-${counter}`;
-      filenames.push(newFilename);
-      return newFilename;
-    }
+  async function domToPng(node, options) {
+    return domToDataUrl(
+      await orCreateContext(node, { ...options, type: "image/png" })
+    );
+  }
+  async function domToWebp(node, options) {
+    return domToDataUrl(
+      await orCreateContext(node, { ...options, type: "image/webp" })
+    );
   }
   async function captureElement(element, imageOptions, filenames) {
     try {
@@ -815,7 +1586,7 @@
         // Ensure quality is a number
         quality: imageOptions.quality,
         // Ensure scale is a number
-        pixelRatio: imageOptions.scale,
+        scale: imageOptions.scale,
         // Ignores elements with data-ignore-capture attribute
         filter
       };
@@ -829,13 +1600,16 @@
       }
       switch (imageOptions.format) {
         case "jpg":
-          dataURL = await toJpeg(element, htmlToImageOptions);
+          dataURL = await domToJpeg(element, htmlToImageOptions);
           break;
         case "png":
-          dataURL = await toPng(element, htmlToImageOptions);
+          dataURL = await domToPng(element, htmlToImageOptions);
           break;
         case "svg":
-          dataURL = await toSvg(element, htmlToImageOptions);
+          dataURL = await domToSvg(element, htmlToImageOptions);
+          break;
+        case "webp":
+          dataURL = await domToWebp(element, htmlToImageOptions);
           break;
       }
       if (cleanUpBackground) {
@@ -986,15 +1760,15 @@
   var jszip_min = { exports: {} };
   /*!
   
-      JSZip v3.10.1 - A JavaScript class for generating and reading zip files
-      <http://stuartk.com/jszip>
+    JSZip v3.10.1 - A JavaScript class for generating and reading zip files
+    <http://stuartk.com/jszip>
   
-      (c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
-      Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
+    (c) 2009-2016 Stuart Knightley <stuart [at] stuartk.com>
+    Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.
   
-      JSZip uses the library pako released under the MIT license :
-      https://github.com/nodeca/pako/blob/main/LICENSE
-      */
+    JSZip uses the library pako released under the MIT license :
+    https://github.com/nodeca/pako/blob/main/LICENSE
+    */
   (function(module2, exports3) {
     !function(e) {
       module2.exports = e();