diff --git a/packages/clipper/src/clone.ts b/packages/clipper/src/clone.ts index e90d81e6a..c3f0e4146 100644 --- a/packages/clipper/src/clone.ts +++ b/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; diff --git a/packages/clipper/src/domtoimage.ts b/packages/clipper/src/domtoimage.ts index 323b2fb3a..db9b34b9d 100644 --- a/packages/clipper/src/domtoimage.ts +++ b/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; diff --git a/packages/clipper/src/index.ts b/packages/clipper/src/index.ts index 5d0597730..86508d363 100644 --- a/packages/clipper/src/index.ts +++ b/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 }, diff --git a/packages/clipper/src/types.ts b/packages/clipper/src/types.ts index 21893dddb..ee8639327 100644 --- a/packages/clipper/src/types.ts +++ b/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; };