clipper: support full page clips without styles and images

packages/clipper/src/clone.ts

@@ -112,13 +112,14 @@ type CloneProps = {
     pseudoElement: string
   ) => CSSStyleDeclaration | undefined;
   fetchOptions?: FetchOptions;
+  images?: boolean;
 };
 
 export async function cloneNode(node: HTMLElement, options: CloneProps) {
   const { root, filter } = options;
   if (!root && filter && !filter(node)) return null;
 
-  let clone = await makeNodeCopy(node, options.fetchOptions);
+  let clone = await makeNodeCopy(node, options);
 
   if (!clone) return null;
   clone = await cloneChildren(node, clone, options);
@@ -127,10 +128,22 @@ export async function cloneNode(node: HTMLElement, options: CloneProps) {
   return processed;
 }
 
-function makeNodeCopy(original: HTMLElement, options?: FetchOptions) {
+function makeNodeCopy(original: HTMLElement, options?: CloneProps) {
   try {
-    if (original instanceof HTMLCanvasElement)
-      return createImage(original.toDataURL(), options);
+    if (original instanceof HTMLCanvasElement && options?.images)
+      return createImage(original.toDataURL(), options?.fetchOptions);
+
+    if (!options?.images && original instanceof HTMLImageElement) return null;
+
+    if (
+      !options?.styles &&
+      (original instanceof HTMLButtonElement ||
+        original instanceof HTMLFormElement ||
+        original instanceof HTMLSelectElement ||
+        original instanceof HTMLInputElement ||
+        original instanceof HTMLTextAreaElement)
+    )
+      return null;
 
     if (original.nodeType === Node.COMMENT_NODE) return null;
 

packages/clipper/src/domtoimage.ts

@@ -30,7 +30,8 @@ const defaultOptions: Options = {
 };
 
 async function getInlinedNode(node: HTMLElement, options: Options) {
-  const { fonts, images, stylesheets } = options.inlineOptions || {};
+  const { fonts, images, stylesheets, inlineImages } =
+    options.inlineOptions || {};
 
   if (stylesheets) await inlineStylesheets(options.fetchOptions);
 
@@ -45,14 +46,15 @@ async function getInlinedNode(node: HTMLElement, options: Options) {
     vector: !options.raster,
     fetchOptions: options.fetchOptions,
     getElementStyles: styleCache?.get,
-    getPseudoElementStyles: styleCache?.getPseudo
+    getPseudoElementStyles: styleCache?.getPseudo,
+    images: images
   });
 
   if (!clone || clone instanceof Text) return;
 
   if (fonts) clone = await embedFonts(clone, options.fetchOptions);
 
-  if (images) await inlineAllImages(clone, options.fetchOptions);
+  if (inlineImages) await inlineAllImages(clone, options.fetchOptions);
 
   finalize(clone);
   return clone;

packages/clipper/src/index.ts

@@ -455,6 +455,7 @@ async function getPage(
     fetchOptions: resolveFetchOptions(config),
     inlineOptions: {
       fonts: false,
+      inlineImages: config?.inlineImages,
       images: config?.images,
       stylesheets: config?.styles
     },

packages/clipper/src/types.ts

@@ -35,6 +35,7 @@ export type InlineOptions = {
   stylesheets?: boolean;
   fonts?: boolean;
   images?: boolean;
+  inlineImages?: boolean;
 };
 
 export type Options = {
@@ -53,5 +54,6 @@ export type Options = {
 export type Config = {
   corsProxy?: string;
   images?: boolean;
+  inlineImages?: boolean;
   styles?: boolean;
 };