From eece50f5dcb17e87e5704e799dd2a490cb0c7054 Mon Sep 17 00:00:00 2001
From: Aare Undo <aare.undo@gmail.com>
Date: Wed, 16 Apr 2025 14:46:28 +0300
Subject: [PATCH] react-js: add OCR example

---
 react-js/src/pages/DocumentScannerPage.tsx | 19 +++++++------------
 react-js/src/service/ImageUtils.ts         | 12 ++++++++++--
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/react-js/src/pages/DocumentScannerPage.tsx b/react-js/src/pages/DocumentScannerPage.tsx
index 30a79ad..6f792a0 100644
--- a/react-js/src/pages/DocumentScannerPage.tsx
+++ b/react-js/src/pages/DocumentScannerPage.tsx
@@ -2,24 +2,16 @@ import { useRef, useEffect } from "react";
 import {
     CroppedDetectionResult,
     DocumentScannerViewConfiguration,
-    IDocumentScannerHandle, Image, PdfPageOptions, Point
+    IDocumentScannerHandle, Point
 } from "scanbot-web-sdk/@types";
 
 import SBSDKService, { ContainerId } from "../service/SBSDKService";
 import SBSDKPage from "../subviews/SBSDKPage";
-import ImageUtils from "../service/ImageUtils.ts";
 
 export default function DocumentScannerPage() {
 
     const handle = useRef<IDocumentScannerHandle | null>(null);
 
-    const generatePdf = async (image: Image, filename: string, options: PdfPageOptions) => {
-        const generator = await SBSDKService.SDK.beginPdf({})
-        await generator.addPage(image, options);
-        const pdf = await generator.complete();
-        ImageUtils.save(pdf, "application/pdf", filename);
-    }
-
     const onDocumentDetected = async (result: CroppedDetectionResult) => {
 
         // Flash the screen to indicate that a document was detected
@@ -44,12 +36,15 @@ export default function DocumentScannerPage() {
             const polygon: Point[] = [{ x: min, y: min }, { x: max, y: min }, { x: max, y: max }, { x: min, y: max }];
             const cropped = await SBSDKService.SDK.imageCrop(rotated, polygon);
 
-            // await generatePdf(cropped, "document-with-ocr.pdf", { runOcr: true });
-            // await generatePdf(cropped, "document-without-ocr.pdf", { runOcr: false });
-
             // Scanbot SDK functions return raw pixel data. Images should be encoded it as jpegs before saving or displaying them.
             const jpeg = await SBSDKService.SDK.imageToJpeg(cropped);
             console.log("Done processing image: ", jpeg);
+
+            const engine = await SBSDKService.SDK.createOcrEngine();
+            const ocrResult = await engine.performOcr(cropped);
+            console.log("OCR result: ", ocrResult);
+            // Be sure to free up the memory used by the OCR engine
+            await engine.release();
         }
     };
 
diff --git a/react-js/src/service/ImageUtils.ts b/react-js/src/service/ImageUtils.ts
index 0612ee6..55e8dab 100644
--- a/react-js/src/service/ImageUtils.ts
+++ b/react-js/src/service/ImageUtils.ts
@@ -1,4 +1,4 @@
-import { RawImage, SBStoreCroppedDetectionResult, SBStoreImage } from "scanbot-web-sdk/@types";
+import { Image, PdfPageOptions, RawImage, SBStoreCroppedDetectionResult, SBStoreImage } from "scanbot-web-sdk/@types";
 import SBSDKService from "./SBSDKService";
 
 export enum MimeType {
@@ -7,6 +7,13 @@ export enum MimeType {
 
 export default class ImageUtils {
 
+    public static async generatePdf (image: Image, filename: string, options: PdfPageOptions) {
+        const generator = await SBSDKService.SDK.beginPdf({})
+        await generator.addPage(image, options);
+        const pdf = await generator.complete();
+        ImageUtils.save(pdf, "application/pdf", filename);
+    }
+
     public static pick(mime: MimeType): Promise<Uint8Array> {
         return new Promise<Uint8Array>((resolve) => {
             let picker = document.getElementById("picker") as HTMLInputElement;
@@ -84,7 +91,8 @@ export default class ImageUtils {
         return canvas;
     }
 
-    private static uuidv4() {
+    // @ts-expect-error Unused, but important demonstrative function
+    private static uuidV4() {
         return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
             (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
         );