npm - image-exporter - Versions diffs - 0.0.1 → 1.0.0 - Mend

image-exporter 0.0.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/README.md +137 -2
package/bun.lockb +0 -0
package/dist/image-exporter.es.js +499 -612
package/dist/image-exporter.umd.js +506 -619
package/package.json +18 -15
package/src/capture/capture-element.ts +58 -0
package/src/capture/determine-total-elements.ts +40 -0
package/src/capture/download-images.ts +69 -0
package/src/capture/get-image-options.ts +196 -0
package/src/capture/handle-filenames.ts +52 -0
package/src/capture/index.ts +99 -0
package/src/capture/remove-hidden-elements.ts +19 -0
package/src/config.ts +19 -0
package/src/cors-proxy/cleanup.ts +43 -0
package/src/cors-proxy/index.ts +6 -21
package/src/{utils → cors-proxy}/is-valid-url.ts +5 -3
package/src/cors-proxy/proxy-css.ts +51 -44
package/src/cors-proxy/proxy-images.ts +21 -77
package/src/cors-proxy/run.ts +26 -0
package/src/index.ts +10 -4
package/src/logger.ts +61 -0
package/src/types.d.ts +51 -0
package/vite.config.js +3 -7
package/example/example.css +0 -122
package/example/example.html +0 -152
package/example/github.jpg +0 -0
package/example/poll-h.svg +0 -1
package/src/capture-images.ts +0 -129
package/src/clean-up.ts +0 -50
package/src/default-options.ts +0 -58
package/src/download-images.ts +0 -52
package/src/get-capture-element.test.html +0 -21
package/src/get-capture-element.test.ts +0 -36
package/src/get-capture-element.ts +0 -175
package/src/get-options/get-input-options.test.html +0 -217
package/src/get-options/get-input-options.test.ts +0 -109
package/src/get-options/get-input-options.ts +0 -40
package/src/get-options/get-item-options.ts +0 -46
package/src/get-options/get-wrapper-options.test.html +0 -33
package/src/get-options/get-wrapper-options.test.ts +0 -109
package/src/get-options/get-wrapper-options.ts +0 -84
package/src/get-options/index.ts +0 -28
package/src/image-exporter.ts +0 -108
package/src/types/image.ts +0 -2
package/src/types/index.ts +0 -2
package/src/types/options.ts +0 -69
package/src/utils/convert-to-slug.ts +0 -15
package/src/utils/get-attribute-values.ts +0 -68
package/src/utils/get-date-MMDDYY.ts +0 -11
package/src/utils/ignore-items.ts +0 -11
package/src/utils/index.ts +0 -18
package/src/utils/is-visible.ts +0 -12
package/src/utils/parse-labels.ts +0 -55
package/src/utils/push-to-window.ts +0 -3
package/tests/index.html +0 -88
package/tests/input-tests.html +0 -169

package/example/example.html DELETED Viewed

@@ -1,152 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>image-exporter Example</title>
-    <link rel="stylesheet" href="example.css" />
-  </head>
-  <body>
-    <div class="gf_loader">
-      <div class="gf_loader-message">Loading...</div>
-    </div>
-    <div class="wrapper">
-      <div>
-        <form action="" autocomplete="off" class="input-wrapper">
-          <!--You can set settings via user input like this-->
-          <label for="format" class="input-label">File Format</label>
-          <select title="format" gf-format-input class="example-input">
-            <option value="png">PNG</option>
-            <option value="jpg">JPG</option>
-          </select>
-          <label for="scale" class="input-label">Scale</label>
-          <select title="scale" gf-scale-input class="example-input">
-            <option value="1">@1x</option>
-            <option value="2">@2x</option>
-            <option value="3">@3x</option>
-            <option value="4">@4x</option>
-          </select>
-          <label for="zipname" class="input-label">Zip Name</label>
-          <input
-            title="zipname"
-            type="text"
-            value="images"
-            gf-zip-label-input
-            class="example-input"
-          />
-          <label for="zip-label-date" class="input-label">Zip Label Date</label>
-          <select title="zip-label-date" gf-zip-label-date-input class="example-input">
-            <option value="true">Enabled</option>
-            <option value="false">Disabled</option>
-          </select>
-          <label for="zip-label-scale" class="input-label">Zip Label Scale</label>
-          <select title="zip-label-scale" gf-zip-label-scale-input class="example-input">
-            <option value="true">Enabled</option>
-            <option value="false">Disabled</option>
-          </select>
-          <div gf="trigger" class="example-button">Generate</div>
-        </form>
-      </div>
-      <div class="example-wrapper" gf="wrapper" gf-zip-label="test">
-        <div class="example-1" gf="capture" gf-scale="1,4">
-          <div class="example-text-1" gf="slug">Example image 1</div>
-        </div>
-        <div class="example-2" gf="capture">
-          <div class="example-text-2" gf="slug">Example image 2</div>
-        </div>
-      </div>
-    </div>
-    <script src="../dist/image-exporter.umd.js" type="text/javascript"></script>
-    <script>
-      let options = {
-        corsProxyBaseUrl: "http://localhost:8010/",
-        selectors: {
-          wrapper: "[gf='wrapper']",
-          capture: "[gf='capture']",
-          trigger: "[gf='trigger']",
-          slug: "[gf='slug']",
-          ignore: "[gf='ignore']",
-        },
-        image: {
-          scale: {
-            value: 1,
-            attributeSelector: "gf-scale",
-            inputSelector: "gf-scale-input",
-          },
-          quality: {
-            value: 1,
-            attributeSelector: "gf-quality",
-            inputSelector: "gf-quality-input",
-          },
-          format: {
-            value: "jpg",
-            attributeSelector: "gf-format",
-            inputSelector: "gf-format-input",
-          },
-          dateInLabel: {
-            value: true,
-            attributeSelector: "gf-img-label-date",
-            inputSelector: "gf-img-label-date-input",
-          },
-          scaleInLabel: {
-            value: true,
-            attributeSelector: "gf-img-label-scale",
-            inputSelector: "gf-img-label-scale-input",
-          },
-        },
-        zip: {
-          label: {
-            value: "images",
-            attributeSelector: "gf-zip-label",
-            inputSelector: "gf-zip-label-input",
-          },
-          dateInLabel: {
-            value: true,
-            attributeSelector: "gf-zip-label-date",
-            inputSelector: "gf-zip-label-date-input",
-          },
-          scaleInLabel: {
-            value: true,
-            attributeSelector: "gf-zip-label-scale",
-            inputSelector: "gf-zip-label-scale-input",
-          },
-        },
-      };
-      let imageExporter = new ImageExporter({ options });
-      imageExporter.addTrigger(document.querySelector("[gf=trigger]"));
-      // imageExporter.addTrigger(
-      //   document.querySelector("[gf=test-trigger]"),
-      //   document.querySelector("[test=test]")
-      // );
-    </script>
-    <script>
-      let optionsx = {
-        inputPrefix: "gf",
-        attributes: {
-          slugSelector: "[gf='slug']",
-          wrapperSelector: '[gf="wrapper"]',
-          captureSelector: '[gf="capture"]',
-          triggerSelector: '[gf="trigger"]',
-          slugSelector: '[gf="slug"]',
-          ignoreSelector: '[gf="ignore"]',
-          scale: "gf-scale",
-          quality: "gf-quality",
-          format: "gf-format",
-          zipLabel: "gf-zip-label",
-          zipLabelDate: "gf-zip-label-date",
-          zipLabelScale: "gf-zip-label-scale",
-          imgLabelDate: "gf-img-label-date",
-          imgLabelScale: "gf-img-label-scale",
-          corsProxyBaseUrl: "gf-cors-proxy-base-url",
-        },
-      };
-    </script>
-  </body>
-</html>

package/example/github.jpg DELETED Viewed

Binary file

package/example/poll-h.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 432V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48zM112 192c-8.84 0-16-7.16-16-16v-32c0-8.84 7.16-16 16-16h128c8.84 0 16 7.16 16 16v32c0 8.84-7.16 16-16 16H112zm0 96c-8.84 0-16-7.16-16-16v-32c0-8.84 7.16-16 16-16h224c8.84 0 16 7.16 16 16v32c0 8.84-7.16 16-16 16H112zm0 96c-8.84 0-16-7.16-16-16v-32c0-8.84 7.16-16 16-16h64c8.84 0 16 7.16 16 16v32c0 8.84-7.16 16-16 16h-64z"/></svg>

package/src/capture-images.ts DELETED Viewed

@@ -1,129 +0,0 @@
-import * as types from "./types";
-import * as htmlToImage from "html-to-image";
-import { runCorsProxy } from "./cors-proxy";
-import { ignoreFilter } from "./utils/ignore-items";
-import { getItemOptions } from "./get-options";
-/**
- * Asynchronously captures images from a set of DOM elements using specified options.
- *
- *
- * This function is designed to capture images from a collection of elements. It first initializes
- * a CORS proxy and prepares nodes that should be ignored during the image capture process. Then, for
- * each element in the `captureElements` array, it captures an image using the `captureImage` function
- * with options tailored to each element. The function handles these operations asynchronously and
- * collects all the captured images in an array.
- *
- * @param {Object} options - An object containing global options for image capture.
- * @param {Array<HTMLElement>} captureElements - An array of DOM elements from which images will be captured.
- * @returns {Promise<Array>} A promise that resolves to an array of captured images.
- *
- */
-export async function captureImages(
-  options: types.Options,
-  captureElements: HTMLElement[]
-): Promise<types.Image[]> {
-  try {
-    // When enabled, replaces urls with proxied ones to bypass CORS errors.
-    await runCorsProxy(options);
-    // Gets array of tuples representing images, see captureImage() documentation for more info
-    const images = await Promise.all(
-      captureElements.map((element, index) =>
-        captureImage(
-          element,
-          getItemOptions(element, options, index + 1),
-          ignoreFilter(options)
-        )
-      )
-    );
-    console.log(images);
-    return images;
-  } catch (e) {
-    console.error("ImageExporter: Error in captureImages", e);
-    return [];
-  }
-}
-/**
- * Asynchronously captures an image from a DOM element with specific options.
- *
- * This function is responsible for capturing an image of the provided DOM element. It updates a
- * loading message based on the 'slug' property in the options. The image capture is then performed
- * using the 'htmlToImage' library, with settings tailored according to the provided options. The function
- * supports different image formats and handles quality and scaling. The result is an image encoded
- * as a data URL along with its filename.
- *
- * @param {HTMLElement} element - The DOM element from which the image is to be captured.
- * @param {Object} itemOptions - An object containing options for the capture process. It includes properties
- *                           like 'slug', 'format', 'quality', 'scale', and 'loaderEnabled'.
- * @returns {Promise<[string, string]>} A promise that resolves to a tuple: [dataURL, fileName].
- *                                      'dataURL' is the base64 encoded image, and 'fileName' is the name of the image file.
- *
- */
-export async function captureImage(
-  element,
-  itemOptions: types.ItemOptions,
-  ignoreFilter
-): Promise<types.Image> {
-  try {
-    itemOptions.slug = ensureUniqueSlug(itemOptions.slug);
-    let dataURL = "";
-    // Final settings for capturing images.
-    let htmlToImageOptions = {
-      // Ensure quality is a number
-      quality: itemOptions.image.quality.value,
-      // Ensure scale is a number
-      pixelRatio: itemOptions.image.scale.value,
-      // Function that returns false if the element should be ignored
-      // filter: ignoreFilter,
-    };
-    // Captures image based on format
-    switch (itemOptions.image.format.value.toLowerCase()) {
-      case "jpg":
-        dataURL = await htmlToImage.toJpeg(element, htmlToImageOptions);
-        itemOptions.fileName = `${itemOptions.slug}.jpg`;
-        console.log("Captured image as jpg", itemOptions.fileName);
-        break;
-      case "png":
-      default:
-        dataURL = await htmlToImage.toPng(element, htmlToImageOptions);
-        itemOptions.fileName = `${itemOptions.slug}.png`;
-        console.log("Captured image as png", itemOptions.fileName);
-        break;
-    }
-    // const image: types.Image = [dataURL, itemOptions.fileName];
-    // returns image stored in tuple. [dataURL, fileName]
-    return [dataURL, itemOptions.fileName];
-  } catch (e) {
-    console.error("ImageExporter: Error in captureImage", e);
-    return ["", ""];
-  }
-}
-let usedSlugs: any = [];
-function ensureUniqueSlug(slug: string): string {
-  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;
-  }
-}

package/src/clean-up.ts DELETED Viewed

@@ -1,50 +0,0 @@
-import * as types from "./types";
-/**
- * This function cleans up after the `findMultiScaleElements` feature.
- * It removes cloned elements and sets the `ie-scale` attribute back to the csv value.
- *
- * Eventually this may become a subfunction, with this function having more tasks.
- *
- * @param options
- * @param captureElements
- */
-export function cleanUp(options: types.Options, captureElements: Element[]) {
-  // Find 'ie-clone-source', if exists...
-  const sourceElements = document.querySelectorAll("[ie-clone-source]");
-  if (sourceElements) {
-    console.log("ping");
-    sourceElements.forEach((sourceElement) => {
-      // Set attribute options.attributes.scale.attributeSelector to the value of 'ie-clone-source'
-      const attributeValue = sourceElement.getAttribute("ie-clone-source");
-      sourceElement.removeAttribute("ie-clone-source");
-      if (attributeValue) {
-        console.log("pong");
-        sourceElement.setAttribute(options.image.scale.attributeSelector, attributeValue);
-      }
-      // Climb DOM to find last parent with 'ie-clone' attribute
-      let parentElement = sourceElement.parentElement;
-      let lastCloneParent: any = null;
-      while (parentElement) {
-        if (parentElement.hasAttribute("ie-clone")) {
-          lastCloneParent = parentElement;
-        }
-        parentElement = parentElement.parentElement;
-      }
-      if (lastCloneParent) {
-        // Move sourceElement to next sibling of the last parent with 'ie-clone' attribute
-        const nextSibling = lastCloneParent.nextElementSibling;
-        if (nextSibling) {
-          nextSibling.parentNode.insertBefore(sourceElement, nextSibling);
-        } else {
-          lastCloneParent.parentNode.appendChild(sourceElement);
-        }
-        // Remove the last parent with 'ie-clone' attribute
-        lastCloneParent.remove();
-      }
-    });
-  }
-}

package/src/default-options.ts DELETED Viewed

@@ -1,58 +0,0 @@
-import * as types from "./types";
-export const defaultOptions: types.Options = {
-  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",
-    },
-  },
-  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",
-    },
-  },
-  debug: false,
-};

package/src/download-images.ts DELETED Viewed

@@ -1,52 +0,0 @@
-import * as types from "./types";
-import download from "downloadjs";
-import JSZip from "jszip";
-import { parseZipLabel } from "./utils";
-/**
- * Downloads images based on the provided array of images and options.
- * If there is only one image, it is downloaded individually.
- * If there are multiple images, they are zipped and downloaded as a single file.
- *
- * @param images - An array of images to be downloaded. Each image should be represented as a tuple with the data URL and the file name.
- * @param options - Additional options for downloading the images.
- * @returns A promise that resolves when all the images are downloaded.
- */
-export async function downloadImages(images: types.Image[], options: types.Options) {
-  if (images.length === 1) {
-    const [dataURL, fileName] = images[0];
-    await download(dataURL, fileName);
-  } else if (images.length > 1) {
-    const zipName = parseZipLabel(options);
-    const zipBlob = await zipUpImages(images);
-    await download(zipBlob, zipName);
-  }
-}
-/**
- * Zips up the given images into a single ZIP file.
- *
- * @param images - An array of image tuples, where each tuple contains the data URL and the filename.
- * @returns A Promise that resolves to the generated ZIP file as a Blob.
- * @throws If there is an error creating the ZIP file.
- */
-async function zipUpImages(images: types.Image[]) {
-  const zip = new JSZip();
-  // Loop through each image tuple and add to the zip
-  images.forEach(([dataURL, filename]) => {
-    // Extract the content from the data URL
-    const content = dataURL.split(",")[1]; // Assumes base64 encoding
-    zip.file(filename, content, { base64: true });
-  });
-  try {
-    // Generate the ZIP file
-    const zipBlob = await zip.generateAsync({ type: "blob" });
-    return zipBlob;
-  } catch (error) {
-    console.error("Error creating ZIP:", error);
-    throw error;
-  }
-}

package/src/get-capture-element.test.html DELETED Viewed

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tests</title>
-  </head>
-  <body>
-    <div ie="wrapper">
-      <div ie="capture" ie-scale="1,2,3"></div>
-      <div ie="capture"></div>
-      <div ie="capture"></div>
-      <div ie="capture"></div>
-    </div>
-    <script src="../../dist/image-exporter.umd.js"></script>
-    <script>
-      let imageExporter = new ImageExporter({ downloadImages: false, debug: true });
-      imageExporter.captureAll();
-    </script>
-  </body>
-</html>

package/src/get-capture-element.test.ts DELETED Viewed

@@ -1,36 +0,0 @@
-import { describe, it, expect, beforeAll, afterAll } from "vitest";
-import puppeteer from "puppeteer";
-import path from "path";
-import * as types from "./types";
-import { defaultOptions } from "./default-options";
-describe("get-capture-element", () => {
-  let browser;
-  let page;
-  beforeAll(async () => {
-    // Setup for puppeteer with Vitest
-    browser = await puppeteer.launch();
-    page = await browser.newPage();
-    await page.goto(`file://${path.join(__dirname, "get-capture-element.test.html")}`);
-  });
-  afterAll(async () => {
-    // Teardown for puppeteer with Vitest
-    await browser.close();
-  });
-  it("encapsulate multi-scale", async () => {
-    const result = await page.evaluate(() => {
-      const js = `const options = { downloadImages: false, debug: true };
-        const imageExporter = new ImageExporter(options);
-        const images = imageExporter.captureAll();`;
-      //insert at the end of the body
-      const script = document.createElement("script");
-      script.text = js;
-      document.body.appendChild(script);
-      return (window as any).getInputOptionsDebug;
-    });
-  });
-});

package/src/get-capture-element.ts DELETED Viewed

@@ -1,175 +0,0 @@
-import * as types from "./types";
-import { isVisible } from "./utils/is-visible";
-import { pushToWindow } from "./utils/push-to-window";
-// Finds all elements to be captured and returns them in an array
-export function getCaptureElements(options: types.Options): HTMLElement[] {
-  try {
-    if (!document.querySelector(options.selectors.capture)) {
-      console.error("ImageExporter: No capture items found in the wrapper.");
-      return [];
-    }
-    // If CSV values found in scale attribute, encapsulate elements until all scales are accounted for
-    findMultiScaleElements(options);
-    // Find all elements to be captured (which includes the multi-scale elements)
-    const elements = Array.from(
-      document.querySelectorAll(
-        `${options.selectors.wrapper} ${options.selectors.capture}`
-      ) as NodeListOf<HTMLElement>
-    );
-    // Filter out elements that are not visible
-    const visibleElements = elements.filter((element) => isVisible(element));
-    return visibleElements;
-  } catch (e) {
-    console.error("ImageExporter: Error in getCaptureElements", e);
-    return [];
-  }
-}
-// If CSV values found in ${prefix}-scale, encapsulate elements until all scales are accounted for
-export function findMultiScaleElements(options: types.Options) {
-  try {
-    const elements = Array.from(
-      document.querySelectorAll(
-        `${options.selectors.wrapper} ${options.selectors.capture}`
-      ) as NodeListOf<HTMLElement>
-    );
-    if (elements) {
-      const elementsWithScaleAttribute = elements.filter((element) =>
-        element.hasAttribute(options.image.scale.attributeSelector)
-      );
-      // Check attribute value. It will be a string.
-      // If string successfully converts to a number, do nothing.
-      // If string is comma-separated, convert to array of numbers.
-      elementsWithScaleAttribute.forEach((element) => {
-        const scaleValue: any = element.getAttribute(
-          options.image.scale.attributeSelector
-        );
-        if (scaleValue.includes(",")) {
-          console.log("Multi-scale element found:", scaleValue);
-          // If scaleValue is an array...
-          const scaleArray: Array<Number> = 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: types.Options,
-  element: Element,
-  scaleArray: Array<Number>,
-  scaleValue: string
-) {
-  try {
-    // Set scale attribute
-    element.setAttribute(options.image.scale.attributeSelector, scaleArray[0].toString());
-    // Force include scale img attribute
-    element.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
-    element.setAttribute("ie-clone-source", scaleValue);
-    // iterate through array and wrap the element in a new element for each scale
-    for (let i = 1; i < scaleArray.length; i++) {
-      const newElement = cloneElementAttributes(options, element);
-      // Set scale attribute
-      newElement.setAttribute(
-        options.image.scale.attributeSelector,
-        scaleArray[i].toString()
-      );
-      // Force include scale img attribute
-      newElement.setAttribute(options.image.scaleInLabel.attributeSelector, "true");
-      // Insert element before the original element, then move the original element inside the new element, deleting the original element
-      if (element.parentNode) {
-        element.parentNode.insertBefore(newElement, element);
-        newElement.appendChild(element);
-        console.log("Encapsulated element", element, "with scale", scaleArray[i]);
-      }
-    }
-  } catch (e) {
-    console.error("ImageExporter: Error in encapsulateMultiScaleElements", e);
-    return;
-  }
-}
-// only clones attributes that are in the options.image[key].attributeSelector
-function cloneElementAttributes(
-  options: types.Options,
-  originalElement: Element
-): Element {
-  try {
-    // Create a new div element
-    const clonedElement = document.createElement("div");
-    const arrayOfPossibleAttributes = Object.keys(options.image).map(
-      (key) => options.image[key].attributeSelector
-    );
-    // Adds capture attribute to cloned element
-    const { prefix, value } = parseStringAttribute(options.selectors.capture);
-    clonedElement.setAttribute(prefix, value);
-    clonedElement.setAttribute("ie-clone", "true");
-    setExplicitDimensions(originalElement, clonedElement);
-    // Iterate over all attributes of the original element
-    Array.from(originalElement.attributes).forEach((attr: any) => {
-      // Check if the attribute name exists in types.Attributes
-      if (attr.name in arrayOfPossibleAttributes) {
-        // Copy the attribute to the cloned element
-        clonedElement.setAttribute(attr.name, attr.value);
-      }
-    });
-    return clonedElement;
-  } catch (e) {
-    console.error("ImageExporter: Error in cloneElementAttributes", e);
-    return originalElement;
-  }
-}
-function parseStringAttribute(attributeValue: string) {
-  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: any, clonedElement: any) {
-  const originalElementStyle = window.getComputedStyle(originalElement);
-  const originalElementWidth = originalElementStyle.getPropertyValue("width");
-  const originalElementHeight = originalElementStyle.getPropertyValue("height");
-  clonedElement.style.width = originalElementWidth;
-  clonedElement.style.height = originalElementHeight;
-}