Support OffscreenCanvas in browser version (#766)

naptha · May 30, 2023 · a5f10d8 · a5f10d8
1 parent 6437f28
commit a5f10d8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -146,7 +146,7 @@ declare namespace Tesseract {
     BINARY = 2
   }
   type ImageLike = string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
-    | CanvasRenderingContext2D | File | Blob | ImageData | Buffer;
+    | CanvasRenderingContext2D | File | Blob | ImageData | Buffer | OffscreenCanvas;
   interface Block {
     paragraphs: Paragraph[];
     text: string;

diff --git a/src/worker/browser/loadImage.js b/src/worker/browser/loadImage.js
@@ -43,7 +43,7 @@ const loadImage = async (image) => {
       const resp = await fetch(resolveURL(image));
       data = await resp.arrayBuffer();
     }
-  } else if (image instanceof HTMLElement) {
+  } else if (typeof HTMLElement !== 'undefined' && image instanceof HTMLElement) {
     if (image.tagName === 'IMG') {
       data = await loadImage(image.src);
     }
@@ -58,6 +58,9 @@ const loadImage = async (image) => {
         });
       });
     }
+  } else if (typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas) {
+    const blob = await image.convertToBlob();
+    data = await readFromBlobOrFile(blob);
   } else if (image instanceof File || image instanceof Blob) {
     data = await readFromBlobOrFile(image);
   }

diff --git a/tests/recognize.test.js b/tests/recognize.test.js
@@ -194,4 +194,36 @@ describe('recognize()', () => {
       }).timeout(TIMEOUT)
     ));
   });
+
+  (IS_BROWSER ? describe : describe.skip)('should read video from OffscreenCanvas (browser only)', () => {
+    // img tag is unable to render pbm, so let's skip it.
+    const formats = FORMATS.filter(f => f !== 'pbm');
+    let offscreenCanvas = null;
+    let imageDOM = null;
+    let idx = 0;
+    beforeEach((done) => {
+      imageDOM = document.createElement('img');
+      imageDOM.setAttribute('crossOrigin', 'Anonymous');
+      imageDOM.onload = () => {
+        offscreenCanvas = new OffscreenCanvas(imageDOM.width, imageDOM.height)
+        offscreenCanvas.getContext('2d').drawImage(imageDOM, 0, 0);
+        done();
+      };
+      imageDOM.setAttribute('src', `${IMAGE_PATH}/simple.${formats[idx]}`);
+      idx += 1;
+    });
+
+    afterEach(() => {
+      offscreenCanvas = null;
+      imageDOM.remove();
+    });
+
+    formats.forEach(format => (
+      it(`support ${format} format`, async () => {
+        await worker.initialize('eng');
+        const { data: { text } } = await worker.recognize(offscreenCanvas);
+        expect(text).to.be(SIMPLE_TEXT);
+      }).timeout(TIMEOUT)
+    ));
+  });
 });