feat: added useFetchForTextures option

src/core/CoreTextureManager.ts

@@ -64,6 +64,7 @@ export interface TextureManagerDebugInfo {
 export interface TextureManagerSettings {
   numImageWorkers: number;
   createImageBitmapSupport: 'auto' | 'basic' | 'options' | 'full';
+  useFetchForTextures: boolean;
 }
 
 export type ResizeModeOptions =
@@ -192,6 +193,7 @@ export class CoreTextureManager extends EventEmitter {
     options: false,
     full: false,
   };
+  useFetchForTextures = false;
 
   hasWorker = !!self.Worker;
   /**
@@ -217,9 +219,15 @@ export class CoreTextureManager extends EventEmitter {
   constructor(stage: Stage, settings: TextureManagerSettings) {
     super();
 
-    const { numImageWorkers, createImageBitmapSupport } = settings;
+    const {
+      numImageWorkers,
+      createImageBitmapSupport,
+      useFetchForTextures: useFetchForTextures,
+    } = settings;
+
     this.stage = stage;
     this.numImageWorkers = numImageWorkers;
+    this.useFetchForTextures = useFetchForTextures;
 
     if (createImageBitmapSupport === 'auto') {
       validateCreateImageBitmap()

src/core/Stage.ts

@@ -79,6 +79,7 @@ export interface StageOptions {
   strictBounds: boolean;
   textureProcessingTimeLimit: number;
   createImageBitmapSupport: 'auto' | 'basic' | 'options' | 'full';
+  useFetchForTextures: boolean;
 }
 
 export type StageFpsUpdateHandler = (
@@ -153,12 +154,14 @@ export class Stage {
       renderEngine,
       fontEngines,
       createImageBitmapSupport,
+      useFetchForTextures: useFetchForTextures,
     } = options;
 
     this.eventBus = options.eventBus;
     this.txManager = new CoreTextureManager(this, {
       numImageWorkers,
       createImageBitmapSupport,
+      useFetchForTextures: useFetchForTextures,
     });
 
     // Wait for the Texture Manager to initialize

src/core/lib/ImageWorker.ts

@@ -62,23 +62,16 @@ function createImageWorker() {
     options: {
       supportsOptionsCreateImageBitmap: boolean;
       supportsFullCreateImageBitmap: boolean;
+      useFetchForTextures: boolean;
     },
   ): Promise<getImageReturn> {
     return new Promise(function (resolve, reject) {
       var supportsOptionsCreateImageBitmap =
         options.supportsOptionsCreateImageBitmap;
       var supportsFullCreateImageBitmap = options.supportsFullCreateImageBitmap;
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', src, true);
-      xhr.responseType = 'blob';
+      var useFetchForTextures = options.useFetchForTextures;
 
-      xhr.onload = function () {
-        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
-        if (xhr.status !== 200 && xhr.status !== 0) {
-          return reject(new Error('Failed to load image: ' + xhr.statusText));
-        }
-
-        var blob = xhr.response;
+      const onFetchSuccess = (blob: Blob) => {
         var withAlphaChannel =
           premultiplyAlpha !== undefined
             ? premultiplyAlpha
@@ -130,13 +123,44 @@ function createImageWorker() {
         }
       };
 
-      xhr.onerror = function () {
-        reject(
-          new Error('Network error occurred while trying to fetch the image.'),
-        );
-      };
+      if (useFetchForTextures === true) {
+        fetch(src)
+          .then((response) => response.blob())
+          .then((blob) => {
+            onFetchSuccess(blob);
+          })
+          .catch((error) => {
+            reject(
+              new Error(
+                'Network error occurred while trying to fetch the image.',
+              ),
+            );
+          });
+      } else {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', src, true);
+        xhr.responseType = 'blob';
 
-      xhr.send();
+        xhr.onload = function () {
+          // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+          if (xhr.status !== 200 && xhr.status !== 0) {
+            return reject(new Error('Failed to load image: ' + xhr.statusText));
+          }
+
+          var blob = xhr.response;
+          onFetchSuccess(blob);
+        };
+
+        xhr.onerror = function () {
+          reject(
+            new Error(
+              'Network error occurred while trying to fetch the image.',
+            ),
+          );
+        };
+
+        xhr.send();
+      }
     });
   }
 
@@ -152,10 +176,12 @@ function createImageWorker() {
     // these will be set to true if the browser supports the createImageBitmap options or full
     var supportsOptionsCreateImageBitmap = false;
     var supportsFullCreateImageBitmap = false;
+    var useFetchForTextures = false;
 
     getImage(src, premultiplyAlpha, x, y, width, height, {
       supportsOptionsCreateImageBitmap,
       supportsFullCreateImageBitmap,
+      useFetchForTextures,
     })
       .then(function (data) {
         self.postMessage({ id: id, src: src, data: data });

src/core/textures/ImageTexture.ts

@@ -215,9 +215,16 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetchJson(src, 'blob').then(
-        (response) => response as Blob,
-      );
+      let blob;
+
+      if (this.txManager.useFetchForTextures === true) {
+        blob = await fetch(src).then((response) => response.blob());
+      } else {
+        blob = await fetchJson(src, 'blob').then(
+          (response) => response as Blob,
+        );
+      }
+
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
 

src/main-api/Renderer.ts

@@ -313,6 +313,16 @@ export interface RendererMainSettings {
    * @defaultValue `full`
    */
   createImageBitmapSupport?: 'auto' | 'basic' | 'options' | 'full';
+
+  /**
+   * Enable using fetch instead of XMLHttpRequest for image loading
+   *
+   * @remarks
+   * This is used to force the use of fetch instead of XMLHttpRequest for the image loader.
+   *
+   * @defaultValue `false`
+   */
+  useFetchForTextures?: boolean;
 }
 
 /**
@@ -415,6 +425,7 @@ export class RendererMain extends EventEmitter {
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 10,
       canvas: settings.canvas || document.createElement('canvas'),
       createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
+      useFetchForTextures: settings.useFetchForTextures || false,
     };
     this.settings = resolvedSettings;
 
@@ -459,6 +470,7 @@ export class RendererMain extends EventEmitter {
       strictBounds: this.settings.strictBounds,
       textureProcessingTimeLimit: this.settings.textureProcessingTimeLimit,
       createImageBitmapSupport: this.settings.createImageBitmapSupport,
+      useFetchForTextures: this.settings.useFetchForTextures,
     });
 
     // Extract the root node