Skip to content

React-js: Add OCR demonstration #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
+17 −14
Closed

React-js: Add OCR demonstration #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions react-js/src/pages/DocumentScannerPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to add the OCR here as it will delay the process for no reason in the "default" use case. We better extract it to a separate button or so.

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();
}
};

Expand Down
12 changes: 10 additions & 2 deletions react-js/src/service/ImageUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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)
);
Expand Down