image-exporter 0.0.1 → 1.0.1

package/src/cors-proxy/index.ts

@@ -1,22 +1,7 @@
-import { isValidUrl } from "../utils";
-import { proxyCSS } from "./proxy-css";
-import { proxyImages } from "./proxy-images";
-import { Options } from "../types/options";
+import { runCorsProxy } from "./run";
+import { cleanUpCorsProxy } from "./cleanup";
 
-/**
- * runCorsProxy - Initializes a CORS proxy by processing image and CSS resources on a web page.
- * Logs the total number of calls made to the proxy server.
- */
-
-export async function runCorsProxy(options: Options): Promise<void> {
-  try {
-    if (!options.corsProxyBaseUrl || !isValidUrl(options.corsProxyBaseUrl)) return;
-
-    await proxyCSS(options);
-    await proxyImages(options);
-
-    return;
-  } catch (e) {
-    console.error("ImageExporter: Error in runCorsProxy", e);
-  }
-}
+export const corsProxy = {
+  run: runCorsProxy,
+  cleanUp: cleanUpCorsProxy,
+};

package/src/{utils → cors-proxy}/is-valid-url.ts

@@ -1,14 +1,16 @@
-// Helper function to check if a URL is valid and not a data URL
+/**
+ * isValidUrl
+ *
+ * Checks if a string is a valid external URL.
+ */
 export function isValidUrl(string: string): boolean {
   try {
     const url = new URL(string);
 
-    // Check if the URL is a data URL
     if (url.protocol === "data:") {
       return false;
     }
 
-    // Optionally, check for HTTP and HTTPS protocols specifically
     if (url.protocol !== "http:" && url.protocol !== "https:") {
       return false;
     }

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

@@ -1,52 +1,59 @@
-import { isValidUrl } from "../utils";
-import * as types from "../types";
+import { log } from "../logger";
+import { Config } from "../types";
+import { isValidUrl } from "./is-valid-url";
+
 /**
- * proxyCSS - Processes CSS stylesheets linked in the document to use the CORS proxy.
- * Each valid and non-data URL stylesheet's href attribute is updated with the proxy URL.
+ * proxyCSS
  *
- * @param {Object} options - Configuration settings, including the CORS proxy base URL.
- *   Expected properties:
- *     - corsProxyBaseURL: String - The base URL of the CORS proxy server.
- * @param {number} proxyPings - Initial count of proxy server pings.
- * @returns {Promise<number>} - Returns the updated count of proxy server pings after processing stylesheets.
+ * Proxies all linked CSS files and the absolute URLs inside them, including fonts and images.
+ * Upon completion of capture, the links will be restored and the style elements removed.
  */
+export async function proxyCSS(config: 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");
+
+    // Exclude data URLs, invalid URLs, and already proxied URLs
+    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);
 
-export async function proxyCSS(options: types.Options) {
-  try {
-    const css = document.querySelectorAll('link[rel="stylesheet"]');
-
-    for (let stylesheetElement of css) {
-      let stylesheetURL = stylesheetElement.getAttribute("href");
-
-      // Check if the URL is valid and not a base64 encoded string
-      if (
-        stylesheetURL &&
-        !stylesheetURL.startsWith("data:") &&
-        isValidUrl(stylesheetURL) &&
-        !stylesheetURL.startsWith(options.corsProxyBaseUrl)
-      ) {
-        const url = options.corsProxyBaseUrl + encodeURIComponent(stylesheetURL);
-
-        try {
-          // Fetch the CSS content
-          const response = await fetch(url);
-          const css = await response.text();
-
-          // Create a <style> element and set its content
-          const styleEl = document.createElement("style");
-          styleEl.textContent = css;
-
-          // Append the <style> element to the document's <head>
-          document.head.appendChild(styleEl);
-
-          // Remove the original <link> element
-          stylesheetElement.remove();
-        } catch (error) {
-          console.error("Error fetching CSS:", error);
+    try {
+      // Fetch the CSS content
+      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;
+      styleElement.setAttribute(
+        "original-link-element",
+        encodeURIComponent(stylesheetElement.outerHTML)
+      );
+
+      // Insert the <style> element directly after the original <link> element to easy restoration
+      stylesheetElement.insertAdjacentElement("afterend", styleElement);
+      stylesheetElement.remove();
+      log.verbose("Proxied: ", stylesheetURL);
+    } catch (error) {
+      console.error("Error fetching CSS:", error);
     }
-  } catch (e) {
-    console.error("ImageExporter: Error in proxyCSS", e);
   }
 }

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

@@ -1,71 +1,30 @@
-import { blobToDataURL, isValidUrl } from "../utils";
-import * as types from "../types";
+import { Config } from "../types";
+import { isValidUrl } from "./is-valid-url";
+import { log } from "../logger";
+
 /**
- * proxyImages - Processes images within a specified wrapper element to use the CORS proxy.
- * Groups images by their source, fetches and replaces the src with a data URL for duplicates,
- * and prefixes the proxy URL for unique images.
+ * proxyImages
  *
- * @param {Object} options - Configuration settings, including the selector for the wrapper and CORS proxy base URL.
- *   Expected properties:
- *     - wrapperSelector: String - The CSS selector for the wrapper element containing images.
- *     - corsProxyBaseURL: String - The base URL of the CORS proxy server.
- * @returns {Promise<number>} - Returns the number of times the proxy server was pinged.
+ * Proxies all images inside capture elements.
+ * The original src is stored for later restoration.
  */
-export async function proxyImages(options: types.Options) {
+export async function proxyImages(
+  config: Config,
+  elements: HTMLElement[] | NodeListOf<HTMLElement>
+) {
   try {
-    // find all link tags in head and add crossorigin="anonymous"
-    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;
-    }
-    const images = Array.from(wrapper.querySelectorAll("img")) as HTMLImageElement[];
-
-    const srcMap = new Map<string, HTMLImageElement[]>();
-
-    // Group images by src
-    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) {
-        // Fetch and replace src for duplicate images
-        try {
-          const response = await fetch(
-            options.corsProxyBaseUrl + encodeURIComponent(src)
-          );
+    const elementArray = Array.from(elements);
+    if (!elementArray.length) return;
+    log.verbose("images to proxy", elementArray.length);
 
-          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);
+    for (const element of elementArray) {
+      const images = Array.from(element.querySelectorAll("img")) as HTMLImageElement[];
+      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);
         }
-      } else {
-        // Prefix src for unique images
-        images.forEach((img) => {
-          if (img.src === src) {
-            img.src = options.corsProxyBaseUrl + encodeURIComponent(src);
-          }
-        });
       }
     }
   } catch (e) {
@@ -73,18 +32,3 @@ export async function proxyImages(options: types.Options) {
     return;
   }
 }
-
-/**
- * blobToDataURL - Converts a Blob object to a data URL.
- *
- * @param {Blob} blob - The Blob object to be converted.
- * @returns {Promise<string>} - Returns a Promise that resolves to a data URL string.
- */
-function blobToDataURL(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}

package/src/cors-proxy/run.ts

@@ -0,0 +1,26 @@
+import { proxyCSS } from "./proxy-css";
+import { proxyImages } from "./proxy-images";
+import { Config } from "../types";
+import { isValidUrl } from "./is-valid-url";
+import { log } from "../logger";
+
+/**
+ * runCorsProxy
+ *
+ * Proxies all images inside capture elements, as well as all linked CSS files and the absolute URLs inside them.
+ * Upon completion of capture, these will be reverted to their original state.
+ */
+export async function runCorsProxy(
+  config: Config,
+  elements: HTMLElement[] | NodeListOf<HTMLElement>
+): Promise<void> {
+  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);
+  }
+}

package/src/index.ts

@@ -1,8 +1,14 @@
-import { ImageExporter } from "./image-exporter";
+/* -------------------------------------------------------------------------- */
+/*                               Image Exporter                               */
+/*                                                                            */
+/*                            by briantuckerdesign                            */
+/* -------------------------------------------------------------------------- */
+import { capture } from "./capture";
 
-// Pushes imageExporter to window object so it can be called in Webflow
+/** Exports for use in browser */
 if (typeof window !== "undefined") {
-  (window as any).ImageExporter = ImageExporter;
+  (window as any).imageExporter = capture;
 }
 
-export { ImageExporter };
+/** Exports for use as an imported package */
+export { capture };

package/src/logger.ts

@@ -0,0 +1,61 @@
+import { windowLogging, loggingLevel } from "./capture";
+
+export const log = {
+  info: (...messages: any[]) => logAction(messages, "info"),
+  error: (...messages: any[]) => logAction(messages, "error"),
+  verbose: (...messages: any[]) => logAction(messages, "verbose"),
+  progress: (progress: number, total: number) => logProgress(progress, total),
+};
+
+async function logAction(messages: any[], type: LogType = "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: number, total: number) {
+  if (windowLogging) {
+    window.imageExporterProgress.push([progress, total]);
+  }
+}
+
+type LogType = "info" | "error" | "verbose" | "progress";
+
+type Log = {
+  message: string;
+  type: LogType;
+  progress?: number;
+  total?: number;
+};
+
+type Progress = [number, number];
+
+declare global {
+  interface Window {
+    imageExporterLogs: Log[];
+    imageExporterProgress: Progress[];
+  }
+}
+
+window.imageExporterLogs = [];
+window.imageExporterProgress = [];

package/src/types.d.ts

@@ -0,0 +1,51 @@
+export interface ImageOptions {
+  /** Label for image. Does not include file extension or scale. */
+  label: Label;
+  /** File format, jpg, png, or svg. */
+  format: Format;
+  /** Scale of image. Can be a number or a comma-separated list of numbers. */
+  scale: Scale;
+  /** Quality of image. 0.0 to 1.0, only applies to jpg.*/
+  quality: Quality;
+  /** Include scale in label. True or false. Automatically true if scale is an array. */
+  includeScaleInLabel: IncludeScaleInLabel;
+}
+
+export interface Config extends ImageOptions {
+  /** Download images as files upon capture. */
+  downloadImages: boolean;
+  /** 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;
+  /** Base URL for CORS proxy used when fetching external images.
+   *
+   * URLs will be encoded and appended without a `?`. Include your own trailing slash.
+   *
+   * I recommend [cors-proxy-worker](https://github.com/briantuckerdesign/cors-proxy-worker) for production and [local-cors-proxy-encoded](https://github.com/briantuckerdesign/local-cors-proxy-encoded) for development.
+   *
+   * Example: `https://cors-proxy.com/` -> `https://cors-proxy.com/https%3A%2F%2FmyEncodedUrl.com`
+   */
+  corsProxyBaseUrl: string;
+  /** Enable window logging for use by external scripts. */
+  enableWindowLogging: boolean;
+  /** Enable verbose logging for debugging. */
+  loggingLevel: LoggingLevel;
+}
+
+export interface ParsedImageOptions extends ImageOptions {
+  /** After parsing, this will always be a number rather than possibly an array. */
+  scale: number;
+}
+
+export interface Image {
+  dataURL: string;
+  fileName: string;
+}
+
+export type Label = string;
+export type Format = "jpg" | "png" | "svg";
+export type Scale = number | number[];
+export type Quality = number;
+export type IncludeScaleInLabel = boolean;
+export type LoggingLevel = "none" | "info" | "error" | "verbose";

package/vite.config.js

@@ -1,7 +1,9 @@
 import { defineConfig } from "vite";
-import strip from "@rollup/plugin-strip";
 
 export default defineConfig({
+  test: {
+    environment: "jsdom",
+  },
   build: {
     outDir: "dist",
     emptyOutDir: true,
@@ -27,12 +29,6 @@ export default defineConfig({
             }
           },
         },
-        strip({
-          include: "**/*.(js|ts)",
-          functions: ["console.log"],
-          // Only apply this plugin during build, not during watch
-          exclude: process.env.NODE_ENV === "development" ? "**/*" : "",
-        }),
       ],
     },
   },

package/example/example.css

@@ -1,122 +0,0 @@
-body {
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  background-color: #151224;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-}
-
-.wrapper {
-  display: grid;
-  width: 800px;
-  height: 500px;
-  grid-auto-columns: 1fr;
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto;
-}
-
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  color: #fff;
-}
-
-.input-label {
-  margin-bottom: 0px;
-  font-weight: 700;
-}
-
-.example-input {
-  margin-bottom: 1rem;
-  padding: 6px;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  -ms-grid-row-align: stretch;
-  align-self: stretch;
-  border: 1px solid #7000ff;
-  border-radius: 4px;
-  color: #000;
-}
-
-.example-button {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 11px 22px;
-  background-color: #7000ff;
-}
-
-.example-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  grid-column-gap: 16px;
-  grid-row-gap: 16px;
-  border-style: dashed;
-  border-width: 2px;
-  border-color: #7000ff;
-  border-radius: 8px;
-}
-
-.example-2 {
-  display: flex;
-  width: 200px;
-  height: 200px;
-  padding: 22px;
-  justify-content: center;
-  align-items: center;
-  background-color: #7000ff;
-  font-size: 24px;
-  line-height: 1;
-  font-weight: 700;
-  text-align: center;
-}
-
-.example-1 {
-  display: flex;
-  width: 400px;
-  height: 200px;
-  justify-content: center;
-  align-items: center;
-  background-color: #fff;
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
-}
-
-.example-text-2 {
-  color: #fff;
-}
-
-.example-text-1 {
-  color: #7000ff;
-}
-
-.gf_loader {
-  display: none;
-  opacity: 0;
-  position: absolute;
-  width: 100dvw;
-  height: 100dvh;
-  z-index: 99;
-  background-color: rgba(25, 25, 25, 0.9);
-  color: #fff;
-}
-.gf_loader-message {
-  display: flex;
-  width: 100dvw;
-  height: 100dvh;
-  align-items: center;
-  justify-content: center;
-}
-.img {
-  max-width: 100%;
-  height: 100%;
-}