image-exporter 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# image-exporter [v1.0.0]
+# image-exporter [v1.0.1]
 
 image-exporter is a client-side javascript tool that downloads DOM elements as images. It can be imported using your favorite package manager or used directly the window.
 

package/dist/image-exporter.es.js

@@ -814,6 +814,14 @@ async function captureElement(element, imageOptions, filenames) {
       // Ignores elements with data-ignore-capture attribute
       filter
     };
+    const styles = getComputedStyle(element);
+    const backgroundColor = styles.backgroundColor;
+    const backgroundImage = styles.backgroundImage;
+    let cleanUpBackground = false;
+    if (backgroundColor === "rgba(0, 0, 0, 0)" && backgroundImage === "none" && imageOptions.format === "jpg") {
+      element.style.backgroundColor = "#FFFFFF";
+      cleanUpBackground = true;
+    }
     switch (imageOptions.format) {
       case "jpg":
         dataURL = await toJpeg(element, htmlToImageOptions);
@@ -825,6 +833,10 @@ async function captureElement(element, imageOptions, filenames) {
         dataURL = await toSvg(element, htmlToImageOptions);
         break;
     }
+    if (cleanUpBackground) {
+      element.style.backgroundColor = "";
+      element.style.backgroundImage = "";
+    }
     return {
       dataURL,
       fileName: handleFileNames(imageOptions, filenames)
@@ -3384,13 +3396,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(
@@ -3632,7 +3637,7 @@ async function determineTotalElements(elements) {
 }
 let windowLogging = true;
 let loggingLevel = "none";
-async function capture(elements, userConfig) {
+async function capture(elements, userConfig = defaultConfig) {
   try {
     const config = { ...defaultConfig, ...userConfig };
     windowLogging = config.enableWindowLogging;

package/dist/image-exporter.umd.js

@@ -819,6 +819,14 @@
         // Ignores elements with data-ignore-capture attribute
         filter
       };
+      const styles = getComputedStyle(element);
+      const backgroundColor = styles.backgroundColor;
+      const backgroundImage = styles.backgroundImage;
+      let cleanUpBackground = false;
+      if (backgroundColor === "rgba(0, 0, 0, 0)" && backgroundImage === "none" && imageOptions.format === "jpg") {
+        element.style.backgroundColor = "#FFFFFF";
+        cleanUpBackground = true;
+      }
       switch (imageOptions.format) {
         case "jpg":
           dataURL = await toJpeg(element, htmlToImageOptions);
@@ -830,6 +838,10 @@
           dataURL = await toSvg(element, htmlToImageOptions);
           break;
       }
+      if (cleanUpBackground) {
+        element.style.backgroundColor = "";
+        element.style.backgroundImage = "";
+      }
       return {
         dataURL,
         fileName: handleFileNames(imageOptions, filenames)
@@ -3389,13 +3401,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(
@@ -3637,7 +3642,7 @@
   }
   let windowLogging = true;
   let loggingLevel = "none";
-  async function capture(elements, userConfig) {
+  async function capture(elements, userConfig = defaultConfig) {
     try {
       const config = { ...defaultConfig, ...userConfig };
       windowLogging = config.enableWindowLogging;

package/package.json

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

package/src/capture/capture-element.ts

@@ -2,6 +2,7 @@ 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
@@ -25,7 +26,21 @@ export async function captureElement(
       filter: filter,
     };
 
-    // Captures image b ased on format
+    // If element has no background and is a JPG, default to white background
+    const styles = getComputedStyle(element);
+    const backgroundColor = styles.backgroundColor;
+    const backgroundImage = styles.backgroundImage;
+    let cleanUpBackground = false;
+    if (
+      backgroundColor === "rgba(0, 0, 0, 0)" &&
+      backgroundImage === "none" &&
+      imageOptions.format === "jpg"
+    ) {
+      element.style.backgroundColor = "#FFFFFF";
+      cleanUpBackground = true;
+    }
+
+    // Captures image based on format
     switch (imageOptions.format) {
       case "jpg":
         dataURL = await htmlToImage.toJpeg(element, htmlToImageOptions);
@@ -38,6 +53,11 @@ export async function captureElement(
         break;
     }
 
+    if (cleanUpBackground) {
+      element.style.backgroundColor = "";
+      element.style.backgroundImage = "";
+    }
+
     return {
       dataURL,
       fileName: handleFileNames(imageOptions, filenames),

package/src/capture/index.ts

@@ -18,7 +18,7 @@ export let loggingLevel = "none";
  */
 export async function capture(
   elements: HTMLElement[] | NodeListOf<HTMLElement> | HTMLElement,
-  userConfig: Partial<Config>
+  userConfig: Partial<Config> = defaultConfig
 ): Promise<Image[] | null> {
   try {
     /* --------------------------------- Config --------------------------------- */

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;