image-exporter 0.0.1 → 1.0.0

package/dist/image-exporter.umd.js

@@ -3,284 +3,6 @@
   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";
-  function pushToWindow(propertyName, value) {
-    window[propertyName] = value;
-  }
-  function getWrapperOptions(options) {
-    try {
-      const wrapper = document.querySelector(options.selectors.wrapper);
-      if (!wrapper) {
-        new Error("Wrapper element not found");
-        return options;
-      }
-      Object.keys(options.image).forEach((key) => {
-        const attrValue = wrapper.getAttribute(options.image[key].attributeSelector);
-        if (attrValue !== null) {
-          const safeValue = optionSafetyCheck(key, attrValue);
-          if (safeValue === null) return;
-          options.image[key].value = safeValue;
-        }
-      });
-      Object.keys(options.zip).forEach((key) => {
-        const attrValue = wrapper.getAttribute(options.zip[key].attributeSelector);
-        if (attrValue !== null) {
-          const safeValue = optionSafetyCheck(key, attrValue);
-          if (safeValue === null) return;
-          options.zip[key].value = safeValue;
-        }
-      });
-      if (options.debug) pushToWindow("getWrapperOptionsDebug", options);
-      return options;
-    } catch (e) {
-      console.error("ImageExporter: Error in getWrapperOptions", e);
-      return options;
-    }
-  }
-  function optionSafetyCheck(key, value) {
-    if (value === "on") return true;
-    if (value === "off") return false;
-    if (key === "scale" || key === "quality") {
-      if (typeof value === "number") return value;
-      value = value.trim();
-      value = parseFloat(value);
-      if (isNaN(value)) return null;
-      return value;
-    }
-    if (key === "dateInLabel" || key === "scaleInLabel") {
-      if (typeof value === "boolean") return value;
-      value = value.trim();
-      return value === "true";
-    }
-    if (key === "format") {
-      value = value.trim();
-      if (value === "jpg" || value === "png") return value;
-      return null;
-    }
-    return value;
-  }
-  async function handleOptions(optionsType, key) {
-    const selector = optionsType[key].inputSelector;
-    const inputElement = document.querySelector(`[${selector}]`);
-    if (!inputElement) return;
-    if (inputElement.getAttribute("type") === "checkbox") {
-      optionsType[key].value = inputElement.checked;
-      return;
-    }
-    if (inputElement.value) {
-      const safeValue = optionSafetyCheck(key, inputElement.value);
-      if (safeValue === null) return;
-      optionsType[key].value = safeValue;
-    }
-  }
-  function getInputOptions(options) {
-    try {
-      Promise.all(
-        Object.keys(options.image).map((key) => handleOptions(options.image, key))
-      );
-      Promise.all(Object.keys(options.zip).map((key) => handleOptions(options.zip, key)));
-      if (options.debug) pushToWindow("getInputOptionsDebug", options);
-      return options;
-    } catch (e) {
-      console.error("ImageExporter: Error in getUserOptions", e);
-      return options;
-    }
-  }
-  function convertToSlug(input) {
-    if (!input) {
-      return null;
-    }
-    input = input.toLowerCase();
-    input = input.replace(/[^a-z0-9_@ -]/g, "");
-    input = input.replace(/\s+/g, "-");
-    return input;
-  }
-  function isVisible(element) {
-    if (!(element instanceof HTMLElement)) return false;
-    if (element.offsetParent === null) return false;
-    const rect = element.getBoundingClientRect();
-    return rect.width > 0 && rect.height > 0;
-  }
-  function getDateMMDDYY() {
-    return String((/* @__PURE__ */ new Date()).getMonth() + 1).padStart(2, "0") + String((/* @__PURE__ */ new Date()).getDate()).padStart(2, "0") + (/* @__PURE__ */ new Date()).getFullYear().toString().slice(-2);
-  }
-  function parseZipLabel(options) {
-    const date = getDateMMDDYY();
-    const zipScale = convertStringToBoolean(options.zip.scaleInLabel.value) ? `_@${options.image.scale.value}x` : "";
-    const zipDate = convertStringToBoolean(options.zip.dateInLabel.value) ? `_${date}` : "";
-    const zipNameSlug = convertToSlug(options.zip.label.value);
-    const zipLabel = `${zipNameSlug}${zipDate}${zipScale}.zip`;
-    return zipLabel;
-  }
-  function parseImageLabel(itemOptions) {
-    const date = getDateMMDDYY();
-    const imgScale = itemOptions.image.scaleInLabel.value ? `_@${itemOptions.image.scale.value}x` : "";
-    const imgDate = itemOptions.image.dateInLabel.value ? `_${date}` : "";
-    const imgNameSlug = convertToSlug(itemOptions.userSlug) || `img-${itemOptions.id}`;
-    const imgLabel = `${imgNameSlug}${imgDate}${imgScale}`;
-    return imgLabel;
-  }
-  function convertStringToBoolean(str) {
-    if (str === "true") {
-      return true;
-    } else if (str === "false") {
-      return false;
-    }
-    return str;
-  }
-  function isValidUrl(string) {
-    try {
-      const url = new URL(string);
-      if (url.protocol === "data:") {
-        return false;
-      }
-      if (url.protocol !== "http:" && url.protocol !== "https:") {
-        return false;
-      }
-      return true;
-    } catch (_) {
-      return false;
-    }
-  }
-  function getItemOptions(element, options, index) {
-    var _a;
-    let itemOptions = {
-      ...options,
-      id: index,
-      userSlug: "",
-      slug: "",
-      fileName: ""
-    };
-    Object.keys(options.image).forEach((key) => {
-      const attributeValue = element.getAttribute(options.image[key].attributeSelector);
-      if (attributeValue !== null) {
-        itemOptions.image[key].value = attributeValue;
-      }
-    });
-    itemOptions.id = index;
-    itemOptions.userSlug = ((_a = element.querySelector(options.selectors.slug)) == null ? void 0 : _a.textContent) || "";
-    itemOptions.slug = parseImageLabel(itemOptions);
-    return itemOptions;
-  }
-  function determineOptions(options) {
-    options = getWrapperOptions(options);
-    options = getInputOptions(options);
-    return options;
-  }
-  function getCaptureElements(options) {
-    try {
-      if (!document.querySelector(options.selectors.capture)) {
-        console.error("ImageExporter: No capture items found in the wrapper.");
-        return [];
-      }
-      findMultiScaleElements(options);
-      const elements = Array.from(
-        document.querySelectorAll(
-          `${options.selectors.wrapper} ${options.selectors.capture}`
-        )
-      );
-      const visibleElements = elements.filter((element) => isVisible(element));
-      return visibleElements;
-    } catch (e) {
-      console.error("ImageExporter: Error in getCaptureElements", e);
-      return [];
-    }
-  }
-  function findMultiScaleElements(options) {
-    try {
-      const elements = Array.from(
-        document.querySelectorAll(
-          `${options.selectors.wrapper} ${options.selectors.capture}`
-        )
-      );
-      if (elements) {
-        const elementsWithScaleAttribute = elements.filter(
-          (element) => element.hasAttribute(options.image.scale.attributeSelector)
-        );
-        elementsWithScaleAttribute.forEach((element) => {
-          const scaleValue = element.getAttribute(
-            options.image.scale.attributeSelector
-          );
-          if (scaleValue.includes(",")) {
-            const scaleArray = scaleValue.split(",").map(Number);
-            encapsulateMultiScaleElements(options, element, scaleArray, scaleValue);
-            if (options.debug)
-              pushToWindow("findMultiScaleElementsTest", element.outerHTML);
-          }
-        });
-        return true;
-      } else {
-        return false;
-      }
-    } catch (e) {
-      console.error("ImageExporter: Error in findMultiScaleElements", e);
-      return;
-    }
-  }
-  function encapsulateMultiScaleElements(options, element, scaleArray, scaleValue) {
-    try {
-      element.setAttribute(options.image.scale.attributeSelector, scaleArray[0].toString());
-      element.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
-      element.setAttribute("ie-clone-source", scaleValue);
-      for (let i = 1; i < scaleArray.length; i++) {
-        const newElement = cloneElementAttributes(options, element);
-        newElement.setAttribute(
-          options.image.scale.attributeSelector,
-          scaleArray[i].toString()
-        );
-        newElement.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
-        if (element.parentNode) {
-          element.parentNode.insertBefore(newElement, element);
-          newElement.appendChild(element);
-        }
-      }
-    } catch (e) {
-      console.error("ImageExporter: Error in encapsulateMultiScaleElements", e);
-      return;
-    }
-  }
-  function cloneElementAttributes(options, originalElement) {
-    try {
-      const clonedElement = document.createElement("div");
-      const arrayOfPossibleAttributes = Object.keys(options.image).map(
-        (key) => options.image[key].attributeSelector
-      );
-      const { prefix, value } = parseStringAttribute(options.selectors.capture);
-      clonedElement.setAttribute(prefix, value);
-      clonedElement.setAttribute("ie-clone", "true");
-      setExplicitDimensions(originalElement, clonedElement);
-      Array.from(originalElement.attributes).forEach((attr) => {
-        if (attr.name in arrayOfPossibleAttributes) {
-          clonedElement.setAttribute(attr.name, attr.value);
-        }
-      });
-      return clonedElement;
-    } catch (e) {
-      console.error("ImageExporter: Error in cloneElementAttributes", e);
-      return originalElement;
-    }
-  }
-  function parseStringAttribute(attributeValue) {
-    if (!attributeValue.includes("=")) {
-      throw new Error("Invalid attribute format. Expected format: [prefix=value]");
-    }
-    const attributeArray = attributeValue.split("=");
-    if (attributeArray.length !== 2) {
-      throw new Error("Invalid attribute format. Expected format: [prefix=value]");
-    }
-    const prefix = attributeArray[0].trim().replace(/^\[|\]$/g, "");
-    const value = attributeArray[1].trim().replace(/^\[|\]$/g, "").replace(/^'|'$/g, "");
-    if (!prefix || !value) {
-      throw new Error("Invalid attribute format. Prefix or value is missing.");
-    }
-    return { prefix, value };
-  }
-  function setExplicitDimensions(originalElement, clonedElement) {
-    const originalElementStyle = window.getComputedStyle(originalElement);
-    const originalElementWidth = originalElementStyle.getPropertyValue("width");
-    const originalElementHeight = originalElementStyle.getPropertyValue("height");
-    clonedElement.style.width = originalElementWidth;
-    clonedElement.style.height = originalElementHeight;
-  }
   function resolveUrl(url, baseUrl) {
     if (url.match(/^[a-z]+:\/\//i)) {
       return url;
@@ -320,6 +42,18 @@
     }
     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);
@@ -379,8 +113,11 @@
   function createImage(url) {
     return new Promise((resolve, reject) => {
       const img = new Image();
-      img.decode = () => resolve(img);
-      img.onload = () => resolve(img);
+      img.onload = () => {
+        img.decode().then(() => {
+          requestAnimationFrame(() => resolve(img));
+        });
+      };
       img.onerror = reject;
       img.crossOrigin = "anonymous";
       img.decoding = "async";
@@ -418,19 +155,19 @@
     const content = style.getPropertyValue("content");
     return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
   }
-  function formatCSSProperties(style) {
-    return toArray(style).map((name) => {
+  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) {
+  function getPseudoElementStyle(className, pseudo, style, options) {
     const selector = `.${className}:${pseudo}`;
-    const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style);
+    const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
     return document.createTextNode(`${selector}{${cssText}}`);
   }
-  function clonePseudoElement(nativeNode, clonedNode, pseudo) {
+  function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
     const style = window.getComputedStyle(nativeNode, pseudo);
     const content = style.getPropertyValue("content");
     if (content === "" || content === "none") {
@@ -443,12 +180,12 @@
       return;
     }
     const styleElement = document.createElement("style");
-    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style));
+    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
     clonedNode.appendChild(styleElement);
   }
-  function clonePseudoElements(nativeNode, clonedNode) {
-    clonePseudoElement(nativeNode, clonedNode, ":before");
-    clonePseudoElement(nativeNode, clonedNode, ":after");
+  function clonePseudoElements(nativeNode, clonedNode, options) {
+    clonePseudoElement(nativeNode, clonedNode, ":before", options);
+    clonePseudoElement(nativeNode, clonedNode, ":after", options);
   }
   const WOFF = "application/font-woff";
   const JPEG = "image/jpeg";
@@ -564,11 +301,11 @@
     const dataURL = await resourceToDataURL(poster, contentType, options);
     return createImage(dataURL);
   }
-  async function cloneIFrameElement(iframe) {
+  async function cloneIFrameElement(iframe, options) {
     var _a;
     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, {}, true);
+        return await cloneNode(iframe.contentDocument.body, options, true);
       }
     } catch (_b) {
     }
@@ -582,13 +319,17 @@
       return cloneVideoElement(node, options);
     }
     if (isInstanceOfElement(node, HTMLIFrameElement)) {
-      return cloneIFrameElement(node);
+      return cloneIFrameElement(node, options);
     }
-    return node.cloneNode(false);
+    return node.cloneNode(isSVGElement(node));
   }
   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;
+    }
     let children = [];
     if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
       children = toArray(nativeNode.assignedNodes());
@@ -607,7 +348,7 @@
     }), Promise.resolve());
     return clonedNode;
   }
-  function cloneCSSStyle(nativeNode, clonedNode) {
+  function cloneCSSStyle(nativeNode, clonedNode, options) {
     const targetStyle = clonedNode.style;
     if (!targetStyle) {
       return;
@@ -617,7 +358,7 @@
       targetStyle.cssText = sourceStyle.cssText;
       targetStyle.transformOrigin = sourceStyle.transformOrigin;
     } else {
-      toArray(sourceStyle).forEach((name) => {
+      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;
@@ -650,10 +391,10 @@
       }
     }
   }
-  function decorate(nativeNode, clonedNode) {
+  function decorate(nativeNode, clonedNode, options) {
     if (isInstanceOfElement(clonedNode, Element)) {
-      cloneCSSStyle(nativeNode, clonedNode);
-      clonePseudoElements(nativeNode, clonedNode);
+      cloneCSSStyle(nativeNode, clonedNode, options);
+      clonePseudoElements(nativeNode, clonedNode, options);
       cloneInputValue(nativeNode, clonedNode);
       cloneSelectValue(nativeNode, clonedNode);
     }
@@ -699,7 +440,7 @@
     if (!isRoot && options.filter && !options.filter(node)) {
       return null;
     }
-    return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+    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));
   }
   const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
   const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
@@ -765,12 +506,8 @@
     return false;
   }
   async function embedBackground(clonedNode, options) {
-    if (!await embedProp("background", clonedNode, options)) {
-      await embedProp("background-image", clonedNode, options);
-    }
-    if (!await embedProp("mask", clonedNode, options)) {
-      await embedProp("mask-image", 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);
   }
   async function embedImageNode(clonedNode, options) {
     const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
@@ -781,7 +518,13 @@
     const dataURL = await resourceToDataURL(url, getMimeType(url), options);
     await new Promise((resolve, reject) => {
       clonedNode.onload = resolve;
-      clonedNode.onerror = reject;
+      clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+        try {
+          resolve(options.onImageErrorHandler(...attributes));
+        } catch (error) {
+          reject(error);
+        }
+      } : reject;
       const image = clonedNode;
       if (image.decode) {
         image.decode = resolve;
@@ -920,7 +663,7 @@
           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, sheet.cssRules.length);
+              inline.insertRule(rule, inline.cssRules.length);
             })).catch((err) => {
               console.error("Error loading remote stylesheet", err);
             }));
@@ -955,9 +698,29 @@
     const cssRules = await getCSSRules(styleSheets, options);
     return getWebFontRules(cssRules);
   }
+  function normalizeFontFamily(font) {
+    return font.trim().replace(/["']/g, "");
+  }
+  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);
+        }
+      });
+    }
+    traverse(node);
+    return fonts;
+  }
   async function getWebFontCSS(node, options) {
     const rules = await parseWebFontRules(node, options);
-    const cssTexts = await Promise.all(rules.map((rule) => {
+    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);
     }));
@@ -1016,173 +779,72 @@
     const canvas = await toCanvas(node, options);
     return canvas.toDataURL("image/jpeg", options.quality || 1);
   }
-  async function proxyCSS(options) {
-    try {
-      const css = document.querySelectorAll('link[rel="stylesheet"]');
-      for (let stylesheetElement of css) {
-        let stylesheetURL = stylesheetElement.getAttribute("href");
-        if (stylesheetURL && !stylesheetURL.startsWith("data:") && isValidUrl(stylesheetURL) && !stylesheetURL.startsWith(options.corsProxyBaseUrl)) {
-          const url = options.corsProxyBaseUrl + encodeURIComponent(stylesheetURL);
-          try {
-            const response = await fetch(url);
-            const css2 = await response.text();
-            const styleEl = document.createElement("style");
-            styleEl.textContent = css2;
-            document.head.appendChild(styleEl);
-            stylesheetElement.remove();
-          } catch (error) {
-            console.error("Error fetching CSS:", error);
-          }
-        }
-      }
-    } catch (e) {
-      console.error("ImageExporter: Error in proxyCSS", e);
-    }
-  }
-  async function proxyImages(options) {
-    try {
-      const links = document.querySelectorAll("link");
-      links.forEach((link) => {
-        link.setAttribute("crossorigin", "anonymous");
-      });
-      const wrapper = document.querySelector(options.selectors.wrapper);
-      if (!wrapper) {
-        console.error("ImageExporter: Wrapper element not found.");
-        return;
+  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 images = Array.from(wrapper.querySelectorAll("img"));
-      const srcMap = /* @__PURE__ */ new Map();
-      images.forEach((img) => {
-        const srcs = srcMap.get(img.src) || [];
-        srcs.push(img);
-        srcMap.set(img.src, srcs);
-      });
-      for (const [src, duplicates] of srcMap) {
-        if (!isValidUrl(src) || options.corsProxyBaseUrl && src.startsWith(options.corsProxyBaseUrl)) {
-          continue;
-        }
-        if (duplicates.length > 1) {
-          try {
-            const response = await fetch(
-              options.corsProxyBaseUrl + encodeURIComponent(src)
-            );
-            const blob = await response.blob();
-            const dataURL = await blobToDataURL(blob);
-            duplicates.forEach((dupImg) => {
-              if (dupImg.src === src) {
-                dupImg.src = dataURL;
-              }
-            });
-          } catch (error) {
-            console.error("Error fetching image:", error);
-          }
-        } else {
-          images.forEach((img) => {
-            if (img.src === src) {
-              img.src = options.corsProxyBaseUrl + encodeURIComponent(src);
-            }
-          });
-        }
-      }
-    } catch (e) {
-      console.error("ImageExporter: Error in proxyImages", e);
-      return;
-    }
-  }
-  function blobToDataURL(blob) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result);
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-  }
-  async function runCorsProxy(options) {
-    try {
-      if (!options.corsProxyBaseUrl || !isValidUrl(options.corsProxyBaseUrl)) return;
-      await proxyCSS(options);
-      await proxyImages(options);
-      return;
-    } catch (e) {
-      console.error("ImageExporter: Error in runCorsProxy", e);
-    }
-  }
-  function ignoreFilter(options) {
-    return (node) => {
-      if (!(node instanceof HTMLElement)) {
-        throw new Error("The provided node is not an HTMLElement");
+      const newFilename = `${baseFilename}-${counter}`;
+      filenames.push(newFilename);
+      return newFilename;
+    } else {
+      let counter = 2;
+      while (filenames.includes(`${proposedFilename}-${counter}`)) {
+        counter++;
       }
-      return !node.matches(options.selectors.ignore);
-    };
-  }
-  async function captureImages(options, captureElements) {
-    try {
-      await runCorsProxy(options);
-      const images = await Promise.all(
-        captureElements.map(
-          (element, index) => captureImage(
-            element,
-            getItemOptions(element, options, index + 1),
-            ignoreFilter(options)
-          )
-        )
-      );
-      return images;
-    } catch (e) {
-      console.error("ImageExporter: Error in captureImages", e);
-      return [];
+      const newFilename = `${proposedFilename}-${counter}`;
+      filenames.push(newFilename);
+      return newFilename;
     }
   }
-  async function captureImage(element, itemOptions, ignoreFilter2) {
+  async function captureElement(element, imageOptions, filenames) {
     try {
-      itemOptions.slug = ensureUniqueSlug(itemOptions.slug);
       let dataURL = "";
       let htmlToImageOptions = {
         // Ensure quality is a number
-        quality: itemOptions.image.quality.value,
+        quality: imageOptions.quality,
         // Ensure scale is a number
-        pixelRatio: itemOptions.image.scale.value
-        // Function that returns false if the element should be ignored
-        // filter: ignoreFilter,
+        pixelRatio: imageOptions.scale,
+        // Ignores elements with data-ignore-capture attribute
+        filter
       };
-      switch (itemOptions.image.format.value.toLowerCase()) {
+      switch (imageOptions.format) {
         case "jpg":
           dataURL = await toJpeg(element, htmlToImageOptions);
-          itemOptions.fileName = `${itemOptions.slug}.jpg`;
           break;
         case "png":
-        default:
           dataURL = await toPng(element, htmlToImageOptions);
-          itemOptions.fileName = `${itemOptions.slug}.png`;
+          break;
+        case "svg":
+          dataURL = await toSvg(element, htmlToImageOptions);
           break;
       }
-      return [dataURL, itemOptions.fileName];
-    } catch (e) {
-      console.error("ImageExporter: Error in captureImage", e);
-      return ["", ""];
+      return {
+        dataURL,
+        fileName: handleFileNames(imageOptions, filenames)
+      };
+    } catch (error) {
+      console.error("ImageExporter: Error in captureImage", error);
+      return { dataURL: "", fileName: "" };
     }
   }
-  let usedSlugs = [];
-  function ensureUniqueSlug(slug) {
-    try {
-      if (usedSlugs.includes(slug)) {
-        let counter = 1;
-        let newSlug = `${slug}-${counter}`;
-        while (usedSlugs.includes(newSlug)) {
-          counter++;
-          newSlug = `${slug}-${counter}`;
-        }
-        usedSlugs.push(newSlug);
-        return newSlug;
-      } else {
-        usedSlugs.push(slug);
-        return slug;
-      }
-    } catch (e) {
-      console.error("ImageExporter: Error in ensureUniqueSlug", e);
-      return slug;
+  const filter = (node) => {
+    if (node instanceof HTMLElement) {
+      return !node.hasAttribute("data-ignore-capture");
     }
-  }
+    return true;
+  };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -1312,15 +974,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();
@@ -3627,187 +3289,412 @@
   })(jszip_min);
   var jszip_minExports = jszip_min.exports;
   const JSZip = /* @__PURE__ */ getDefaultExportFromCjs(jszip_minExports);
-  async function downloadImages(images, options) {
+  async function downloadImages(images, config) {
     if (images.length === 1) {
-      const [dataURL, fileName] = images[0];
-      await download(dataURL, fileName);
+      const image = images[0];
+      await download(image.dataURL, image.fileName);
     } else if (images.length > 1) {
-      const zipName = parseZipLabel(options);
-      const zipBlob = await zipUpImages(images);
-      await download(zipBlob, zipName);
+      const imagesBlob = await zipUpImages(images);
+      if (imagesBlob) await download(imagesBlob, parseLabel(config));
     }
   }
   async function zipUpImages(images) {
     const zip = new JSZip();
-    images.forEach(([dataURL, filename]) => {
-      const content = dataURL.split(",")[1];
-      zip.file(filename, content, { base64: true });
-    });
     try {
-      const zipBlob = await zip.generateAsync({ type: "blob" });
-      return zipBlob;
+      images.forEach((image) => {
+        const content = image.dataURL.split(",")[1];
+        zip.file(image.fileName, content, { base64: true });
+      });
+    } catch (error) {
+      console.error("Image Exporter - Error adding images to ZIP:", error);
+      return;
+    }
+    try {
+      const imagesBlob = await zip.generateAsync({ type: "blob" });
+      return imagesBlob;
     } catch (error) {
-      console.error("Error creating ZIP:", error);
-      throw error;
+      console.error("Image Exporter - Error generating ZIP:", error);
+      return;
     }
   }
-  const defaultOptions = {
-    corsProxyBaseUrl: "",
-    downloadImages: true,
-    selectors: {
-      wrapper: "[ie='wrapper']",
-      capture: "[ie='capture']",
-      trigger: "[ie='trigger']",
-      slug: "[ie='slug']",
-      ignore: "[ie='ignore']"
-    },
-    image: {
-      scale: {
-        value: 1,
-        attributeSelector: "ie-scale",
-        inputSelector: "ie-scale-input"
-      },
-      quality: {
-        value: 1,
-        attributeSelector: "ie-quality",
-        inputSelector: "ie-quality-input"
-      },
-      format: {
-        value: "jpg",
-        attributeSelector: "ie-format",
-        inputSelector: "ie-format-input"
-      },
-      dateInLabel: {
-        value: true,
-        attributeSelector: "ie-img-label-date",
-        inputSelector: "ie-img-label-date-input"
-      },
-      scaleInLabel: {
-        value: true,
-        attributeSelector: "ie-img-label-scale",
-        inputSelector: "ie-img-label-scale-input"
+  function parseLabel(config) {
+    try {
+      let label = config.zipLabel;
+      label = label.replace(/\s+/g, "-");
+      return label.replace(/[^a-zA-Z0-9-_]/g, "");
+    } catch (error) {
+      console.error(error);
+      return "images";
+    }
+  }
+  const log = {
+    info: (...messages) => logAction(messages, "info"),
+    error: (...messages) => logAction(messages, "error"),
+    verbose: (...messages) => logAction(messages, "verbose"),
+    progress: (progress, total) => logProgress(progress, total)
+  };
+  async function logAction(messages, type = "info") {
+    const combinedMessage = messages.map((msg) => typeof msg === "object" ? JSON.stringify(msg) : msg).join(" ");
+    switch (type) {
+      case "info":
+        if (loggingLevel === "info" || loggingLevel === "verbose") {
+          console.log(...messages);
+        }
+        break;
+      case "error":
+        if (loggingLevel === "error" || loggingLevel === "verbose") {
+          console.error(...messages);
+        }
+        break;
+      case "verbose":
+        if (loggingLevel === "verbose") {
+          console.log(...messages);
+        }
+        break;
+    }
+    if (windowLogging) window.imageExporterLogs.push({ message: combinedMessage, type });
+  }
+  async function logProgress(progress, total) {
+    if (windowLogging) {
+      window.imageExporterProgress.push([progress, total]);
+    }
+  }
+  window.imageExporterLogs = [];
+  window.imageExporterProgress = [];
+  function isValidUrl(string) {
+    try {
+      const url = new URL(string);
+      if (url.protocol === "data:") {
+        return false;
       }
-    },
-    zip: {
-      label: {
-        value: "images",
-        attributeSelector: "ie-zip-label",
-        inputSelector: "ie-zip-label-input"
-      },
-      dateInLabel: {
-        value: true,
-        attributeSelector: "ie-zip-label-date",
-        inputSelector: "ie-zip-label-date-input"
-      },
-      scaleInLabel: {
-        value: true,
-        attributeSelector: "ie-zip-label-scale",
-        inputSelector: "ie-zip-label-scale-input"
+      if (url.protocol !== "http:" && url.protocol !== "https:") {
+        return false;
       }
-    },
-    debug: false
+      return true;
+    } catch (_) {
+      return false;
+    }
+  }
+  async function proxyCSS(config) {
+    const stylesheetElements = document.querySelectorAll('link[rel="stylesheet"]');
+    log.verbose("stylesheet elements to proxy", stylesheetElements.length);
+    for (let stylesheetElement of stylesheetElements) {
+      const stylesheetURL = stylesheetElement.getAttribute("href");
+      if (!stylesheetURL) continue;
+      if (stylesheetURL.startsWith("data:")) continue;
+      if (stylesheetURL.startsWith(config.corsProxyBaseUrl)) continue;
+      if (!isValidUrl(stylesheetURL)) continue;
+      stylesheetElement.setAttribute("crossorigin", "anonymous");
+      const proxiedURL = config.corsProxyBaseUrl + encodeURIComponent(stylesheetURL);
+      try {
+        const response = await fetch(proxiedURL);
+        let cssContent = await response.text();
+        cssContent = cssContent.replace(
+          /url\(['"]?(https?:\/\/[^'")\s]+)['"]?\)/g,
+          (match, url) => {
+            if (url.startsWith(config.corsProxyBaseUrl)) return match;
+            return `url("${config.corsProxyBaseUrl}${encodeURIComponent(url)}")`;
+          }
+        );
+        const styleElement = document.createElement("style");
+        styleElement.textContent = cssContent;
+        styleElement.setAttribute(
+          "original-link-element",
+          encodeURIComponent(stylesheetElement.outerHTML)
+        );
+        stylesheetElement.insertAdjacentElement("afterend", styleElement);
+        stylesheetElement.remove();
+        log.verbose("Proxied: ", stylesheetURL);
+      } catch (error) {
+        console.error("Error fetching CSS:", error);
+      }
+    }
+  }
+  async function proxyImages(config, elements) {
+    try {
+      const elementArray = Array.from(elements);
+      if (!elementArray.length) return;
+      log.verbose("images to proxy", elementArray.length);
+      for (const element of elementArray) {
+        const images = Array.from(element.querySelectorAll("img"));
+        for (const img of images) {
+          if (isValidUrl(img.src) && !img.src.startsWith(config.corsProxyBaseUrl)) {
+            img.setAttribute("original-src", img.src);
+            img.src = config.corsProxyBaseUrl + encodeURIComponent(img.src);
+            log.verbose("Proxied: ", img.src);
+          }
+        }
+      }
+    } catch (e) {
+      console.error("ImageExporter: Error in proxyImages", e);
+      return;
+    }
+  }
+  async function runCorsProxy(config, elements) {
+    try {
+      log.verbose("running CORS proxy");
+      if (!config.corsProxyBaseUrl || !isValidUrl(config.corsProxyBaseUrl)) return;
+      await proxyCSS(config);
+      await proxyImages(config, elements);
+    } catch (e) {
+      console.error("ImageExporter: Error in runCorsProxy", e);
+    }
+  }
+  async function cleanUpCorsProxy() {
+    await restoreCSS();
+    await restoreImages();
+  }
+  async function restoreCSS() {
+    const styleElements = document.querySelectorAll("style[original-link-element]");
+    for (let styleElement of styleElements) {
+      const originalLinkElementHTML = decodeURIComponent(
+        styleElement.getAttribute("original-link-element")
+      );
+      const tempContainer = document.createElement("div");
+      tempContainer.innerHTML = originalLinkElementHTML;
+      styleElement.parentNode.insertBefore(tempContainer.firstChild, styleElement);
+      styleElement.remove();
+      log.verbose("Restored: ", originalLinkElementHTML);
+    }
+  }
+  async function restoreImages() {
+    const imageElements = document.querySelectorAll(
+      "img[original-src]"
+    );
+    for (let imageElement of imageElements) {
+      const originalSrc = imageElement.getAttribute("original-src");
+      imageElement.src = originalSrc;
+      imageElement.removeAttribute("original-src");
+      log.verbose("Restored: ", originalSrc);
+    }
+  }
+  const corsProxy = {
+    run: runCorsProxy,
+    cleanUp: cleanUpCorsProxy
   };
-  function cleanUp(options, captureElements) {
-    const sourceElements = document.querySelectorAll("[ie-clone-source]");
-    if (sourceElements) {
-      sourceElements.forEach((sourceElement) => {
-        const attributeValue = sourceElement.getAttribute("ie-clone-source");
-        sourceElement.removeAttribute("ie-clone-source");
-        if (attributeValue) {
-          sourceElement.setAttribute(options.image.scale.attributeSelector, attributeValue);
-        }
-        let parentElement = sourceElement.parentElement;
-        let lastCloneParent = null;
-        while (parentElement) {
-          if (parentElement.hasAttribute("ie-clone")) {
-            lastCloneParent = parentElement;
-          }
-          parentElement = parentElement.parentElement;
-        }
-        if (lastCloneParent) {
-          const nextSibling = lastCloneParent.nextElementSibling;
-          if (nextSibling) {
-            nextSibling.parentNode.insertBefore(sourceElement, nextSibling);
-          } else {
-            lastCloneParent.parentNode.appendChild(sourceElement);
+  async function getImageOptions(element, config) {
+    return {
+      label: parseLabel2(),
+      format: parseFormat(),
+      scale: parseScale(),
+      quality: parseQuality(),
+      includeScaleInLabel: parseIncludeScaleInLabel()
+    };
+    function parseLabel2() {
+      try {
+        const label = element.dataset.label || config.defaultImageLabel;
+        if (label === "") return config.defaultImageLabel;
+        const regex = /[^a-zA-Z0-9-_]/g;
+        return label.replace(regex, "");
+      } catch (error) {
+        console.error(error);
+        return config.defaultImageLabel;
+      }
+    }
+    function parseFormat() {
+      try {
+        let format = element.dataset.format || config.format;
+        format = format.trim().toLowerCase();
+        if (format === "jpg" || format === "png" || format === "svg") {
+          return format;
+        } else {
+          throw new Error(
+            `ImageExporter: provided format is not valid.
+            Provided: ${format}
+            Element: ${element}
+            Accepted values: jpg, png, svg
+            Defaulting to: ${config.format}`
+          );
+        }
+      } catch (error) {
+        console.error(error);
+        return config.format;
+      }
+    }
+    function parseScale() {
+      try {
+        const scaleAsString = element.dataset.scale;
+        if (!scaleAsString) return config.scale;
+        if (scaleAsString.includes(",")) {
+          const scales = scaleAsString.trim().split(",").map((scale) => parseFloat(scale));
+          if (scales.some((scale) => isNaN(scale))) {
+            throw new Error(
+              `ImageExporter: provided scale is not valid.
+            Provided: ${scaleAsString}
+            Element: ${element}
+            Accepted values: number or csv numbers e.g. (1,2)
+            Defaulting to ${config.scale}`
+            );
           }
-          lastCloneParent.remove();
+          return scales;
+        } else {
+          const scaleAsNumber = parseFloat(scaleAsString.trim());
+          if (isNaN(scaleAsNumber)) {
+            throw new Error(
+              `ImageExporter: provided scale is not valid.
+            Provided: ${scaleAsString}
+            Element: ${element}
+            Accepted values: number or csv numbers e.g. (1,2)
+            Defaulting to: ${config.scale}`
+            );
+          }
+          return scaleAsNumber;
         }
-      });
+      } catch (error) {
+        console.error(error);
+        return config.scale;
+      }
+    }
+    function parseQuality() {
+      try {
+        const qualityAsString = element.dataset.quality;
+        if (!qualityAsString) return config.quality;
+        const qualityAsNumber = parseFloat(qualityAsString.trim());
+        if (isNaN(qualityAsNumber)) {
+          throw new Error(
+            `ImageExporter: provided quality is not valid.
+            Provided: ${qualityAsString}
+            Element: ${element}
+            Accepted values: number
+            Defaulting to: ${config.quality}`
+          );
+        }
+        return qualityAsNumber;
+      } catch (error) {
+        console.error(error);
+        return config.quality;
+      }
+    }
+    function parseIncludeScaleInLabel() {
+      try {
+        let includeScaleInLabel = element.dataset.includeScaleInLabel;
+        if (!includeScaleInLabel) return config.includeScaleInLabel;
+        includeScaleInLabel = includeScaleInLabel.trim();
+        if (includeScaleInLabel === "true" || includeScaleInLabel === "false") {
+          return includeScaleInLabel === "true";
+        } else {
+          throw new Error(
+            `ImageExporter: provided includeScaleInLabel is not valid.
+            Provided: ${includeScaleInLabel}
+            Element: ${element}
+            Accepted values: true or false
+            Defaulting to: ${config.includeScaleInLabel}`
+          );
+        }
+      } catch (error) {
+        console.error(error);
+        return config.includeScaleInLabel;
+      }
     }
   }
-  class ImageExporter {
-    constructor(userOptions = {}) {
-      this.options = { ...defaultOptions, ...userOptions };
-    }
-    /**
-     * Captures images from all elements specified in the options.
-     * If downloadImages is set to true, the images will be downloaded.
-     *
-     * @returns {types.Image[]} An array of captured images.
-     */
-    async captureAll() {
-      this.options = determineOptions(this.options);
-      const captureElements = getCaptureElements(this.options);
-      const images = await captureImages(this.options, captureElements);
-      if (this.options.downloadImages) downloadImages(images, this.options);
-      cleanUp(this.options);
-      return images;
+  const defaultImageOptions = {
+    label: "image",
+    format: "jpg",
+    scale: 1,
+    quality: 1,
+    includeScaleInLabel: false
+  };
+  const defaultConfig = {
+    ...defaultImageOptions,
+    downloadImages: true,
+    defaultImageLabel: "image",
+    zipLabel: "images",
+    corsProxyBaseUrl: "",
+    enableWindowLogging: true,
+    loggingLevel: "none"
+  };
+  function removeHiddenElements(elements) {
+    elements = Array.from(elements);
+    return elements.filter((element) => isVisible(element));
+  }
+  function isVisible(element) {
+    const computedStyle = window.getComputedStyle(element);
+    return element.offsetParent !== null && element.style.display !== "none" && computedStyle.visibility === "visible" && computedStyle.opacity !== "0" && computedStyle.width !== "0" && computedStyle.height !== "0";
+  }
+  async function determineTotalElements(elements) {
+    try {
+      let totalElements = 0;
+      for (const element of elements) {
+        const scaleAsString = element.dataset.scale;
+        if (!scaleAsString) continue;
+        if (scaleAsString.includes(",")) {
+          const scales = scaleAsString.trim().split(",").map((scale) => parseFloat(scale));
+          if (scales.some((scale) => isNaN(scale))) continue;
+          totalElements += scales.length;
+        } else {
+          const scaleAsNumber = parseFloat(scaleAsString.trim());
+          if (isNaN(scaleAsNumber)) {
+            continue;
+          } else {
+            totalElements++;
+          }
+        }
+      }
+      return totalElements;
+    } catch (error) {
+      return 1;
     }
-    /**
-     * Captures an image from a single element.
-     * If downloadImages is set to true, the image will be downloaded.
-     *
-     * If multiscale elements are found,
-     * the element will be cloned and captured at each scale.
-     */
-    async captureElement(element) {
-      this.options = determineOptions(this.options);
-      await runCorsProxy(this.options);
-      ignoreFilter(this.options);
-      const multiScale = findMultiScaleElements(this.options);
-      if (multiScale) {
-        const elements = Array.from(
-          document.querySelectorAll(
-            "[ie-clone], [ie-clone-source]"
-          )
+  }
+  let windowLogging = true;
+  let loggingLevel = "none";
+  async function capture(elements, userConfig) {
+    try {
+      const config = { ...defaultConfig, ...userConfig };
+      windowLogging = config.enableWindowLogging;
+      loggingLevel = config.loggingLevel;
+      log.verbose("config", config);
+      if (elements instanceof HTMLElement) elements = [elements];
+      const originalLength = elements.length;
+      elements = removeHiddenElements(elements);
+      const totalElements = await determineTotalElements(elements);
+      if (originalLength !== elements.length)
+        log.verbose(
+          "skipping capture of hidden elements: ",
+          originalLength - elements.length
         );
-        const images = await captureImages(this.options, elements);
-        if (this.options.downloadImages) downloadImages(images, this.options);
-        cleanUp(this.options);
-        return images;
-      }
-      const image = await captureImage(
-        element,
-        getItemOptions(element, this.options, 1)
-      );
-      if (this.options.downloadImages) downloadImages([image], this.options);
-      cleanUp(this.options);
-      return image;
-    }
-    /**
-     * Adds a click event listener to the trigger element.
-     * If no element is provided, the captureAll method will be run on click.
-     * If an element is provided, provided element will be captured on click.
-     */
-    addTrigger(triggerSelector, element = null) {
-      const triggerElement = document.querySelector(triggerSelector);
-      if (!triggerElement) throw new Error("Trigger element not found");
-      if (!element) {
-        triggerElement.addEventListener("click", () => {
-          this.captureAll();
-        });
-      } else {
-        triggerElement.addEventListener("click", () => {
-          this.captureElement(element);
-        });
+      log.verbose("element to capture", elements.length);
+      if (userConfig.corsProxyBaseUrl) await corsProxy.run(config, elements);
+      let images = [];
+      let filenames = [];
+      let imageNumber = 1;
+      for (const element of elements) {
+        const imageOptions = await getImageOptions(element, config);
+        log.verbose("image options", imageOptions);
+        if (imageOptions.scale instanceof Array) {
+          log.verbose("multi-scale capture");
+          imageOptions.includeScaleInLabel = true;
+          for (const scale of imageOptions.scale) {
+            log.progress(imageNumber++, totalElements);
+            const image = await captureElement(
+              element,
+              { ...imageOptions, scale },
+              filenames
+            );
+            images.push(image);
+          }
+        } else if (typeof imageOptions.scale === "number") {
+          log.progress(imageNumber++, totalElements);
+          log.verbose("single-scale capture");
+          const image = await captureElement(
+            element,
+            imageOptions,
+            filenames
+          );
+          images.push(image);
+        }
       }
+      if (userConfig.downloadImages) downloadImages(images, config);
+      if (userConfig.corsProxyBaseUrl) await corsProxy.cleanUp();
+      return images;
+    } catch (error) {
+      log.error(error);
+      return null;
     }
   }
   if (typeof window !== "undefined") {
-    window.ImageExporter = ImageExporter;
+    window.imageExporter = capture;
   }
-  exports2.ImageExporter = ImageExporter;
+  exports2.capture = capture;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 })()