image-exporter 1.0.1 → 1.0.3

package/README.md

@@ -50,7 +50,7 @@ import  { capture }  from  "image-exporter";
 	/** Default label for images. Does not include file extension or scale. */
 	defaultImageLabel:  string;
 	/** Label for zip file. Does not include file extension or scale. */
-	zipLabel:  Label;
+	zipLabel:  string;
 	/** Base URL for CORS proxy used when fetching external images. */
 	corsProxyBaseUrl:  string;
 	/** Enable window logging for use by external scripts */

package/dist/image-exporter.es.js

@@ -3338,7 +3338,11 @@ const log = {
   info: (...messages) => logAction(messages, "info"),
   error: (...messages) => logAction(messages, "error"),
   verbose: (...messages) => logAction(messages, "verbose"),
-  progress: (progress, total) => logProgress(progress, total)
+  progress: (progress, total) => logProgress(progress, total),
+  group: {
+    open: (...messages) => logAction(messages, "group"),
+    close: (...messages) => logAction(messages, "groupEnd")
+  }
 };
 async function logAction(messages, type = "info") {
   const combinedMessage = messages.map((msg) => typeof msg === "object" ? JSON.stringify(msg) : msg).join(" ");
@@ -3358,6 +3362,12 @@ async function logAction(messages, type = "info") {
         console.log(...messages);
       }
       break;
+    case "group":
+      console.group(...messages);
+      break;
+    case "groupEnd":
+      console.groupEnd();
+      break;
   }
   if (windowLogging) window.imageExporterLogs.push({ message: combinedMessage, type });
 }
@@ -3396,13 +3406,6 @@ async function proxyCSS(config) {
     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(
@@ -3645,6 +3648,7 @@ async function determineTotalElements(elements) {
 let windowLogging = true;
 let loggingLevel = "none";
 async function capture(elements, userConfig = defaultConfig) {
+  log.group.open("image-exporter");
   try {
     const config = { ...defaultConfig, ...userConfig };
     windowLogging = config.enableWindowLogging;
@@ -3656,19 +3660,19 @@ async function capture(elements, userConfig = defaultConfig) {
     const totalElements = await determineTotalElements(elements);
     if (originalLength !== elements.length)
       log.verbose(
-        "skipping capture of hidden elements: ",
+        "Skipping capture of hidden elements: ",
         originalLength - elements.length
       );
-    log.verbose("element to capture", elements.length);
+    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);
+      log.verbose("Image options", imageOptions);
       if (imageOptions.scale instanceof Array) {
-        log.verbose("multi-scale capture");
+        log.verbose("Multi-scale capture");
         imageOptions.includeScaleInLabel = true;
         for (const scale of imageOptions.scale) {
           log.progress(imageNumber++, totalElements);
@@ -3681,7 +3685,7 @@ async function capture(elements, userConfig = defaultConfig) {
         }
       } else if (typeof imageOptions.scale === "number") {
         log.progress(imageNumber++, totalElements);
-        log.verbose("single-scale capture");
+        log.verbose("Single-scale capture");
         const image = await captureElement(
           element,
           imageOptions,
@@ -3690,12 +3694,14 @@ async function capture(elements, userConfig = defaultConfig) {
         images.push(image);
       }
     }
-    if (userConfig.downloadImages) downloadImages(images, config);
+    if (userConfig.downloadImages) await downloadImages(images, config);
     if (userConfig.corsProxyBaseUrl) await corsProxy.cleanUp();
     return images;
   } catch (error) {
     log.error(error);
     return null;
+  } finally {
+    log.group.close();
   }
 }
 if (typeof window !== "undefined") {

package/dist/image-exporter.umd.js

@@ -3343,7 +3343,11 @@
     info: (...messages) => logAction(messages, "info"),
     error: (...messages) => logAction(messages, "error"),
     verbose: (...messages) => logAction(messages, "verbose"),
-    progress: (progress, total) => logProgress(progress, total)
+    progress: (progress, total) => logProgress(progress, total),
+    group: {
+      open: (...messages) => logAction(messages, "group"),
+      close: (...messages) => logAction(messages, "groupEnd")
+    }
   };
   async function logAction(messages, type = "info") {
     const combinedMessage = messages.map((msg) => typeof msg === "object" ? JSON.stringify(msg) : msg).join(" ");
@@ -3363,6 +3367,12 @@
           console.log(...messages);
         }
         break;
+      case "group":
+        console.group(...messages);
+        break;
+      case "groupEnd":
+        console.groupEnd();
+        break;
     }
     if (windowLogging) window.imageExporterLogs.push({ message: combinedMessage, type });
   }
@@ -3401,13 +3411,6 @@
       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(
@@ -3650,6 +3653,7 @@
   let windowLogging = true;
   let loggingLevel = "none";
   async function capture(elements, userConfig = defaultConfig) {
+    log.group.open("image-exporter");
     try {
       const config = { ...defaultConfig, ...userConfig };
       windowLogging = config.enableWindowLogging;
@@ -3661,19 +3665,19 @@
       const totalElements = await determineTotalElements(elements);
       if (originalLength !== elements.length)
         log.verbose(
-          "skipping capture of hidden elements: ",
+          "Skipping capture of hidden elements: ",
           originalLength - elements.length
         );
-      log.verbose("element to capture", elements.length);
+      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);
+        log.verbose("Image options", imageOptions);
         if (imageOptions.scale instanceof Array) {
-          log.verbose("multi-scale capture");
+          log.verbose("Multi-scale capture");
           imageOptions.includeScaleInLabel = true;
           for (const scale of imageOptions.scale) {
             log.progress(imageNumber++, totalElements);
@@ -3686,7 +3690,7 @@
           }
         } else if (typeof imageOptions.scale === "number") {
           log.progress(imageNumber++, totalElements);
-          log.verbose("single-scale capture");
+          log.verbose("Single-scale capture");
           const image = await captureElement(
             element,
             imageOptions,
@@ -3695,12 +3699,14 @@
           images.push(image);
         }
       }
-      if (userConfig.downloadImages) downloadImages(images, config);
+      if (userConfig.downloadImages) await downloadImages(images, config);
       if (userConfig.corsProxyBaseUrl) await corsProxy.cleanUp();
       return images;
     } catch (error) {
       log.error(error);
       return null;
+    } finally {
+      log.group.close();
     }
   }
   if (typeof window !== "undefined") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-exporter",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Easily download one or more DOM elements as images",
   "main": "src/index.ts",
   "type": "module",

package/src/capture/capture-element.ts

@@ -2,8 +2,6 @@ import * as htmlToImage from "html-to-image";
 import { Image, ParsedImageOptions } from "../types";
 import { handleFileNames } from "./handle-filenames";
 import { Options } from "html-to-image/lib/types";
-import { get } from "http";
-
 /**
  * captureElement
  *

package/src/capture/index.ts

@@ -20,6 +20,7 @@ export async function capture(
   elements: HTMLElement[] | NodeListOf<HTMLElement> | HTMLElement,
   userConfig: Partial<Config> = defaultConfig
 ): Promise<Image[] | null> {
+  log.group.open("image-exporter");
   try {
     /* --------------------------------- Config --------------------------------- */
     const config = { ...defaultConfig, ...userConfig };
@@ -36,10 +37,10 @@ export async function capture(
 
     if (originalLength !== elements.length)
       log.verbose(
-        "skipping capture of hidden elements: ",
+        "Skipping capture of hidden elements: ",
         originalLength - elements.length
       );
-    log.verbose("element to capture", elements.length);
+    log.verbose("Element to capture", elements.length);
 
     /* ------------------------------- CORS proxy ------------------------------- */
     if (userConfig.corsProxyBaseUrl) await corsProxy.run(config, elements);
@@ -51,11 +52,11 @@ export async function capture(
 
     for (const element of elements) {
       const imageOptions = await getImageOptions(element, config);
-      log.verbose("image options", imageOptions);
+      log.verbose("Image options", imageOptions);
 
       if (imageOptions.scale instanceof Array) {
         /* --------------------------- Multi-scale capture -------------------------- */
-        log.verbose("multi-scale capture");
+        log.verbose("Multi-scale capture");
 
         imageOptions.includeScaleInLabel = true;
 
@@ -72,7 +73,7 @@ export async function capture(
       } else if (typeof imageOptions.scale === "number") {
         log.progress(imageNumber++, totalElements);
         /* -------------------------- Single scale capture -------------------------- */
-        log.verbose("single-scale capture");
+        log.verbose("Single-scale capture");
 
         const image = await captureElement(
           element,
@@ -85,7 +86,7 @@ export async function capture(
     }
 
     /* -------------------------------- Download -------------------------------- */
-    if (userConfig.downloadImages) downloadImages(images, config);
+    if (userConfig.downloadImages) await downloadImages(images, config);
 
     /* --------------------------- Clean up CORS proxy -------------------------- */
     if (userConfig.corsProxyBaseUrl) await corsProxy.cleanUp();
@@ -95,5 +96,7 @@ export async function capture(
   } catch (error) {
     log.error(error);
     return null;
+  } finally {
+    log.group.close();
   }
 }

package/src/cors-proxy/proxy-css.ts

@@ -29,17 +29,6 @@ export async function proxyCSS(config: Config) {
       const response = await fetch(proxiedURL);
       let cssContent = await response.text();
 
-      // Proxy absolute URLs (http/https) within the CSS content
-      cssContent = cssContent.replace(
-        /url\(['"]?(https?:\/\/[^'")\s]+)['"]?\)/g,
-        (match, url) => {
-          // Skip if already proxied
-          if (url.startsWith(config.corsProxyBaseUrl)) return match;
-          // Otherwise return proxied URL
-          return `url("${config.corsProxyBaseUrl}${encodeURIComponent(url)}")`;
-        }
-      );
-
       // Insert the parsed CSS content into a <style> element
       const styleElement = document.createElement("style");
       styleElement.textContent = cssContent;

package/src/logger.ts

@@ -5,6 +5,10 @@ export const log = {
   error: (...messages: any[]) => logAction(messages, "error"),
   verbose: (...messages: any[]) => logAction(messages, "verbose"),
   progress: (progress: number, total: number) => logProgress(progress, total),
+  group: {
+    open: (...messages: any[]) => logAction(messages, "group"),
+    close: (...messages: any[]) => logAction(messages, "groupEnd"),
+  },
 };
 
 async function logAction(messages: any[], type: LogType = "info") {
@@ -28,6 +32,12 @@ async function logAction(messages: any[], type: LogType = "info") {
         console.log(...messages);
       }
       break;
+    case "group":
+      console.group(...messages);
+      break;
+    case "groupEnd":
+      console.groupEnd();
+      break;
   }
 
   if (windowLogging) window.imageExporterLogs.push({ message: combinedMessage, type });
@@ -39,7 +49,7 @@ async function logProgress(progress: number, total: number) {
   }
 }
 
-type LogType = "info" | "error" | "verbose" | "progress";
+type LogType = "info" | "error" | "verbose" | "progress" | "group" | "groupEnd";
 
 type Log = {
   message: string;