This pull request is an attempt to resolve the issue of IOS not loading images

[uramacharles]

Description

IOS (Safari) devices requests credentials to be sent across on all fetch request. That makes all requests that doesn't have the pre-defined credentials to fail. However, when the credential is set as true with the fetchRequestInit interface, Images are loaded well, but the fonts is blocked. This is because fonts.gstatic.com makes use of wildcard as their Access-Control-Allow-Origin, which doesn't go at same time with when the credentials is set to 'include'. Thus the proposal of creating a different interface "fetchFontRequestInit" which will be used on embed-webfonts.ts. This also adds to the flexibility to the library

Motivation and Context

I encountered this issue while working on a project that requires me convert html to images. I checked through the communities, but I couldn't seeing any solution that worked for me. So I decided to check through it. That's how I came to this solution.

Bellow are some of the common open issues.

1. https://stackoverflow.com/questions/77380375/how-do-i-make-html-to-image-to-read-images-on-ios-devices?noredirect=1#comment136423314_77380375
2. Image is not showing in some cases iOS, Safari #361

To Fix this Problem,

1. we need to add a new line to the types.ts as bellow
   /**
   *
   *the second parameter of window.fetch (Promise fetch(input[, init]))
   • This would be used for fonts, thereby making it different from the Image urls of the parent project.
     */
     fetchFontRequestInit?: RequestInit
2. Then we point this interface to the fetch request of Fonts in line 40 of embed-webfonts.ts as bellow
   ...
   return fetchAsDataURL<[string, string]>(
   url,
   options.fetchFontRequestInit,
   ({ result }) => {
   cssText = cssText.replace(loc, url(${result}))
   return [loc, result]
   },
   )
   ...

Types of changes

• [1] Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• [1 ] My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• [2 ] I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[vivcat]

👋 @uramacharles

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (b751cbf) 62.93% compared to head (0fb2242) 62.93%.
Report is 3 commits behind head on master.

Files	Patch %	Lines
src/dataurl.ts	0.00%	1 Missing and 2 partials ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #442   +/-   ##
=======================================
  Coverage   62.93%   62.93%           
=======================================
  Files          10       10           
  Lines         580      580           
  Branches      143      143           
=======================================
  Hits          365      365           
  Misses        151      151           
  Partials       64       64           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.