feat: Added fetchRequestInitGenerator option

README.md

@@ -293,6 +293,25 @@ When supplied, the toCanvas function will return a blob matching the given image
 
 Defaults to `image/png`  
 
+### fetchRequestInitGenerator
+
+```ts
+(url: string) => RequestInit | undefined
+```
+
+This function is intended to provide a convenient way to customize the RequestInit configuration for fetching data from a specific URL.
+For example,
+
+```ts
+htmlToImage.toCanvas(node, { 
+  fetchRequestInitGenerator: (url: string) => {
+    url.includes('/internal')
+    ? { credentials: 'include' }
+    : undefined
+  }
+});
+```
+
 ## Browsers
 
 Only standard lib is currently used, but make sure your browser supports:

src/dataurl.ts

@@ -81,9 +81,12 @@ export async function resourceToDataURL(
 
   let dataURL: string
   try {
+    const requestInit = options.fetchRequestInit
+      ? options.fetchRequestInit
+      : options.fetchRequestInitGenerator?.(resourceUrl)
     const content = await fetchAsDataURL(
       resourceUrl,
-      options.fetchRequestInit,
+      requestInit,
       ({ res, result }) => {
         if (!contentType) {
           // eslint-disable-next-line no-param-reassign

src/embed-webfonts.ts

@@ -35,14 +35,13 @@
       url = new URL(url, data.url).href
     }
 
-    return fetchAsDataURL<[string, string]>(
-      url,
-      options.fetchRequestInit,
-      ({ result }) => {
-        cssText = cssText.replace(loc, `url(${result})`)
-        return [loc, result]
-      },
-    )
+    const requestInit = options.fetchRequestInit
+      ? options.fetchRequestInit
+      : options.fetchRequestInitGenerator?.(url)
+    return fetchAsDataURL<[string, string]>(url, requestInit, ({ result }) => {
+      cssText = cssText.replace(loc, `url(${result})`)
+      return [loc, result]
+    })
   })
 
   return Promise.all(loadFonts).then(() => cssText)

src/types.ts

@@ -91,4 +91,12 @@ export interface Options {
    *
    */
   fetchRequestInit?: RequestInit
+
+  /**
+   * Function that generates a RequestInit based on a given URL.
+   * This function is intended to provide a convenient way to customize the RequestInit configuration for
+   * fetching the data from a specific URL.
+   *
+   */
+  fetchRequestInitGenerator?: (url: string) => RequestInit | undefined
 }

test/spec/options.spec.ts

@@ -173,4 +173,19 @@ describe('work with options', () => {
       .then(done)
       .catch(done)
   })
+
+  it('should support fetchRequestInitGenerator', (done) => {
+    bootstrap('images/node.html', 'images/style.css')
+      .then(
+        assertTextRendered(['PNG', 'JPG'], {
+          fetchRequestInitGenerator: (url: string) => {
+            return url.includes("/test")
+              ? { credentials: 'include' } as RequestInit
+              : undefined
+          },
+        }),
+      )
+      .then(done)
+      .catch(done)
+  })
 })