image-exporter 1.0.0 → 1.0.1

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)
@@ -3632,7 +3644,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)
@@ -3637,7 +3649,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.1",
   "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 --------------------------------- */