image-exporter 0.0.1 → 1.0.0

package/dist/image-exporter.es.js

@@ -1,281 +1,3 @@
-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;
@@ -315,6 +37,18 @@ function toArray(arrayLike) {
   }
   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);
@@ -374,8 +108,11 @@ function checkCanvasDimensions(canvas) {
 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";
@@ -413,19 +150,19 @@ function formatCSSText(style) {
   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") {
@@ -438,12 +175,12 @@ function clonePseudoElement(nativeNode, clonedNode, pseudo) {
     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";
@@ -559,11 +296,11 @@ async function cloneVideoElement(video, options) {
   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) {
   }
@@ -577,13 +314,17 @@ async function cloneSingleNode(node, options) {
     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());
@@ -602,7 +343,7 @@ async function cloneChildren(nativeNode, clonedNode, options) {
   }), Promise.resolve());
   return clonedNode;
 }
-function cloneCSSStyle(nativeNode, clonedNode) {
+function cloneCSSStyle(nativeNode, clonedNode, options) {
   const targetStyle = clonedNode.style;
   if (!targetStyle) {
     return;
@@ -612,7 +353,7 @@ function cloneCSSStyle(nativeNode, clonedNode) {
     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;
@@ -645,10 +386,10 @@ function cloneSelectValue(nativeNode, clonedNode) {
     }
   }
 }
-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);
   }
@@ -694,7 +435,7 @@ async function cloneNode(node, options, isRoot) {
   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;
@@ -760,12 +501,8 @@ async function embedProp(propName, node, options) {
   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);
@@ -776,7 +513,13 @@ async function embedImageNode(clonedNode, options) {
   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;
@@ -915,7 +658,7 @@ async function getCSSRules(styleSheets, options) {
         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);
           }));
@@ -950,9 +693,29 @@ async function parseWebFontRules(node, options) {
   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);
   }));
@@ -1011,173 +774,72 @@ async function toJpeg(node, options = {}) {
   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;
@@ -3622,186 +3284,411 @@ https://github.com/nodeca/pako/blob/main/LICENSE
 })(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;
 }
 export {
-  ImageExporter
+  capture
 };