Fix VR mode handling in plugin

src/__tests__/index.ts

@@ -90,4 +90,37 @@ describe('html2canvas', () => {
         );
         expect(DocumentCloner.destroy).not.toBeCalled();
     });
+
+    it('should disable caching and requestAnimationFrame in VR mode', async () => {
+        const vrElement = {
+            ownerDocument: {
+                defaultView: {
+                    pageXOffset: 12,
+                    pageYOffset: 34,
+                    VRDisplay: {
+                        isPresenting: true
+                    }
+                }
+            }
+        } as HTMLElement;
+
+        await html2canvas(vrElement, {vrMode: true});
+        expect(CanvasRenderer).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                cache: expect.any(Object),
+                logger: expect.any(Object),
+                windowBounds: expect.objectContaining({left: 12, top: 34}),
+                vrMode: true
+            }),
+            expect.objectContaining({
+                backgroundColor: 0xffffffff,
+                scale: 1,
+                height: 50,
+                width: 200,
+                x: 0,
+                y: 0,
+                canvas: undefined
+            })
+        );
+    });
 });

src/core/cache-storage.ts

@@ -46,9 +46,11 @@ export class Cache {
         }
 
         if (isBlobImage(src) || isRenderable(src)) {
-            (this._cache[src] = this.loadImage(src)).catch(() => {
-                // prevent unhandled rejection
-            });
+            if (!this.context.vrMode) {
+                (this._cache[src] = this.loadImage(src)).catch(() => {
+                    // prevent unhandled rejection
+                });
+            }
             return result;
         }
 
@@ -57,6 +59,9 @@ export class Cache {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     match(src: string): Promise<any> {
+        if (this.context.vrMode) {
+            return Promise.reject('VR mode is enabled, caching is disabled');
+        }
         return this._cache[src];
     }
 

src/core/context.ts

@@ -5,17 +5,20 @@ import {Bounds} from '../css/layout/bounds';
 export type ContextOptions = {
     logging: boolean;
     cache?: Cache;
+    vrMode?: boolean;
 } & ResourceOptions;
 
 export class Context {
     private readonly instanceName = `#${Context.instanceCount++}`;
     readonly logger: Logger;
     readonly cache: Cache;
+    readonly vrMode: boolean;
 
     private static instanceCount = 1;
 
     constructor(options: ContextOptions, public windowBounds: Bounds) {
         this.logger = new Logger({id: this.instanceName, enabled: options.logging});
         this.cache = options.cache ?? new Cache(this, options);
+        this.vrMode = options.vrMode ?? false;
     }
 }

src/dom/document-cloner.ts

@@ -112,9 +112,9 @@ export class DocumentCloner {
                 return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
             }
 
-            if (documentClone.fonts && documentClone.fonts.ready) {
-                await documentClone.fonts.ready;
-            }
+            // if (documentClone.fonts && documentClone.fonts.ready) {
+            //     await documentClone.fonts.ready;
+            // }
 
             if (/(AppleWebKit)/g.test(navigator.userAgent)) {
                 await imagesReady(documentClone);

src/index.ts

@@ -14,6 +14,7 @@ export type Options = CloneOptions &
         backgroundColor: string | null;
         foreignObjectRendering: boolean;
         removeContainer?: boolean;
+        vrMode?: boolean;
     };
 
 const html2canvas = (element: HTMLElement, options: Partial<Options> = {}): Promise<HTMLCanvasElement> => {