From e1a1f9bde24c946660492bcadb7f0b13fcb4ba8a Mon Sep 17 00:00:00 2001
From: grijeshsaini <grijesh.rajoria@gmail.com>
Date: Fri, 15 Dec 2023 01:10:32 +0000
Subject: [PATCH 1/2] feat: Added fetchRequestInitGenerator option

--

In scenarios where elements contain multiple URLs, including both internal and public links, there arises a need to supply distinct RequestInit configurations for various fetch requests.

Presently, the limitation lies in the fact that we can only provide a single fetchRequestInit, and this configuration is globally applied to all fetch calls for that element.

This proposed feature aims to enhance flexibility by enabling the provision of providing RequestInit configurations tailored to individual fetch requests based on their respective URLs. This enhancement ensures more granular control over the customization of fetch request behaviors, facilitating better handling of internal and public URLs.
---
 src/dataurl.ts            |  5 ++++-
 src/embed-webfonts.ts     | 15 +++++++--------
 src/types.ts              |  8 ++++++++
 test/spec/options.spec.ts | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/dataurl.ts b/src/dataurl.ts
index 13bc8b43..17711629 100644
--- a/src/dataurl.ts
+++ b/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
diff --git a/src/embed-webfonts.ts b/src/embed-webfonts.ts
index 42c73da6..c33b514c 100644
--- a/src/embed-webfonts.ts
+++ b/src/embed-webfonts.ts
@@ -35,14 +35,13 @@ async function embedFonts(data: Metadata, options: Options): Promise<string> {
       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)
diff --git a/src/types.ts b/src/types.ts
index b511363f..44c1716b 100644
--- a/src/types.ts
+++ b/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
 }
diff --git a/test/spec/options.spec.ts b/test/spec/options.spec.ts
index ab40ffa2..68ded1d6 100644
--- a/test/spec/options.spec.ts
+++ b/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)
+  })
 })

From 7aee57edb9bf026b2060b332929698e260a90841 Mon Sep 17 00:00:00 2001
From: grijeshsaini <grijesh.rajoria@gmail.com>
Date: Fri, 15 Dec 2023 01:37:25 +0000
Subject: [PATCH 2/2] docs: Update readme.md

---
 README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/README.md b/README.md
index 782d2525..d1ed7fb0 100644
--- a/README.md
+++ b/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: