image-exporter 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-exporter",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Easily download one or more DOM elements as images",
   "main": "src/index.ts",
   "type": "module",
@@ -41,8 +41,8 @@
   "dependencies": {
     "@types/downloadjs": "^1.4.6",
     "downloadjs": "^1.4.7",
-    "html-to-image": "^1.11.13",
-    "jszip": "^3.10.1"
+    "jszip": "^3.10.1",
+    "modern-screenshot": "^4.6.0"
   },
   "devDependencies": {
     "concurrently": "^9.1.2",

package/src/capture/capture-element.ts

@@ -1,7 +1,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 * as modernScreenshot from "modern-screenshot";
+
 /**
  * captureElement
  *
@@ -15,11 +15,11 @@ export async function captureElement(
   try {
     let dataURL = "";
     // Final settings for capturing images.
-    let htmlToImageOptions: Options = {
+    let htmlToImageOptions: modernScreenshot.Options = {
       // Ensure quality is a number
       quality: imageOptions.quality,
       // Ensure scale is a number
-      pixelRatio: imageOptions.scale,
+      scale: imageOptions.scale,
       // Ignores elements with data-ignore-capture attribute
       filter: filter,
     };
@@ -41,13 +41,16 @@ export async function captureElement(
     // Captures image based on format
     switch (imageOptions.format) {
       case "jpg":
-        dataURL = await htmlToImage.toJpeg(element, htmlToImageOptions);
+        dataURL = await modernScreenshot.domToJpeg(element, htmlToImageOptions);
         break;
       case "png":
-        dataURL = await htmlToImage.toPng(element, htmlToImageOptions);
+        dataURL = await modernScreenshot.domToPng(element, htmlToImageOptions);
         break;
       case "svg":
-        dataURL = await htmlToImage.toSvg(element, htmlToImageOptions);
+        dataURL = await modernScreenshot.domToSvg(element, htmlToImageOptions);
+        break;
+      case "webp":
+        dataURL = await modernScreenshot.domToWebp(element, htmlToImageOptions);
         break;
     }
 

package/src/capture/handle-filenames.ts

@@ -9,12 +9,13 @@ import { ImageOptions, Label } from "../types";
  * If it doesn't, the function will start with "-2" and increment the number until a unique filename is found.
  */
 export function handleFileNames(imageOptions: ImageOptions, filenames: string[]): Label {
-  // Finish alterting filenames before checking for uniqueness
+  // Finish altering filenames before checking for uniqueness
   let proposedFilename = imageOptions.label;
   // Add scale to filename if includeScaleInLabel is true
   if (imageOptions.includeScaleInLabel) proposedFilename += `_@${imageOptions.scale}x`;
   // Add format to filename last
-  proposedFilename += `.${imageOptions.format}`;
+  const extension = `.${imageOptions.format}`;
+  proposedFilename += extension;
 
   // If filename is unique, add it to array and return as-is
   if (!filenames.includes(proposedFilename)) {
@@ -31,21 +32,22 @@ export function handleFileNames(imageOptions: ImageOptions, filenames: string[])
     const baseFilename = proposedFilename.replace(numberPattern, "");
     let counter = parseInt(match[1], 10);
 
-    while (filenames.includes(`${baseFilename}-${counter}`)) {
+    while (filenames.includes(`${baseFilename}-${counter}${extension}`)) {
       counter++;
     }
 
-    const newFilename = `${baseFilename}-${counter}`;
+    const newFilename = `${baseFilename}-${counter}${extension}`;
     filenames.push(newFilename);
     return newFilename;
   } else {
-    // File doesn't end with -n, start with -1 and increment if needed
+    // File doesn't end with -n, start with -2 and increment if needed
+    const baseFilename = proposedFilename.replace(extension, "");
     let counter = 2;
-    while (filenames.includes(`${proposedFilename}-${counter}`)) {
+    while (filenames.includes(`${baseFilename}-${counter}${extension}`)) {
       counter++;
     }
 
-    const newFilename = `${proposedFilename}-${counter}`;
+    const newFilename = `${baseFilename}-${counter}${extension}`;
     filenames.push(newFilename);
     return newFilename;
   }

package/src/types.d.ts

@@ -44,7 +44,7 @@ export interface Image {
 }
 
 export type Label = string;
-export type Format = "jpg" | "png" | "svg";
+export type Format = "jpg" | "png" | "svg" | "webp";
 export type Scale = number | number[];
 export type Quality = number;
 export type IncludeScaleInLabel = boolean;