diff --git a/packages/clipper/src/domtoimage.ts b/packages/clipper/src/domtoimage.ts index 5c35c435c..5391951df 100644 --- a/packages/clipper/src/domtoimage.ts +++ b/packages/clipper/src/domtoimage.ts @@ -62,6 +62,7 @@ async function toSvg(node: HTMLElement, options: Options) { fonts: true, images: true, stylesheets: true, + inlineImages: true, ...options.inlineOptions }; diff --git a/packages/clipper/src/images.ts b/packages/clipper/src/images.ts index b7579569f..3d9369557 100644 --- a/packages/clipper/src/images.ts +++ b/packages/clipper/src/images.ts @@ -27,7 +27,7 @@ async function inlineAllImages(root: HTMLElement, options?: FetchOptions) { promises.push(inlineImage(image, options)); } - await Promise.all(promises).catch((e) => console.error(e)); + await Promise.allSettled(promises).catch((e) => console.error(e)); } export { inlineAllImages }; @@ -45,15 +45,10 @@ async function inlineImage(element: HTMLImageElement, options?: FetchOptions) { return element; } - return new Promise(function (resolve, reject) { - if (element.parentElement?.tagName === "PICTURE") { - element.parentElement?.replaceWith(element); - } + if (element.parentElement?.tagName === "PICTURE") { + element.parentElement?.replaceWith(element); + } - element.onload = () => resolve(element); - // for any image with invalid src(such as ), just ignore it - element.onerror = (e) => reject(e); - element.src = dataURL; - element.removeAttribute("srcset"); - }); + element.src = dataURL; + element.removeAttribute("srcset"); } diff --git a/packages/clipper/src/index.ts b/packages/clipper/src/index.ts index e192ed30b..3e8c87060 100644 --- a/packages/clipper/src/index.ts +++ b/packages/clipper/src/index.ts @@ -107,11 +107,11 @@ async function clipScreenshot< height: document.body.scrollHeight, fetchOptions: resolveFetchOptions(config), inlineOptions: { + inlineImages: true, fonts: true, images: true, stylesheets: true - }, - styles: true + } }); if (output === "jpeg" || output === "png") diff --git a/packages/clipper/src/styles.ts b/packages/clipper/src/styles.ts index 1777a641d..c97d37fda 100644 --- a/packages/clipper/src/styles.ts +++ b/packages/clipper/src/styles.ts @@ -62,11 +62,9 @@ async function skipStyleSheet(sheet: CSSStyleSheet, options?: FetchOptions) { sheet.cssRules.length; } catch (_e) { const node = sheet.ownerNode; - if ( - sheet.href && - node instanceof HTMLLinkElement && - !isStylesheetForPrint(node) - ) { + if (sheet.href && node instanceof HTMLLinkElement) { + if (isStylesheetForPrint(node)) return true; + const styleNode = await downloadStylesheet(node.href, options); if (styleNode) node.replaceWith(styleNode); } @@ -88,6 +86,8 @@ function isStylesheetForPrint(sheet: CSSStyleSheet | HTMLLinkElement) { export function addStylesToHead(head: HTMLHeadElement, options?: FetchOptions) { for (const sheet of document.styleSheets) { if (isStylesheetForPrint(sheet)) continue; + if (sheet.href && sheet.ownerNode instanceof HTMLLinkElement) continue; + const styleNode = rulesToStyleNode(sheet.cssRules); head.appendChild(styleNode); } diff --git a/packages/clipper/src/types.ts b/packages/clipper/src/types.ts index 53b99efa2..929874e40 100644 --- a/packages/clipper/src/types.ts +++ b/packages/clipper/src/types.ts @@ -48,7 +48,6 @@ export type Options = { scale?: number; fetchOptions?: FetchOptions; inlineOptions?: InlineOptions; - styles?: boolean; }; export type Config = {