Skip to main content
Version: v8000

Scan from a static image

For image file or gallery upload flows, use the SDK without the camera UI. This lets you feed images into the scanning engine one at a time.

Initialize and create a session​

Initialize the SDK and create a session configured for photo input. Setting the input image source to photo tells the engine to expect static images rather than a video stream.

import { loadBlinkIdCore } from "@microblink/blinkid-core";

const blinkIdCore = await loadBlinkIdCore({
  licenseKey: "your-license-key",
});

const session = await blinkIdCore.createBlinkIdScanningSession({
  inputImageSource: "photo",
});

Load an image for scanning​

Each platform requires converting a raw image into the format the scanning engine expects.

The scanning engine accepts ImageData objects. Use an offscreen canvas to decode a File or Blob into the required format.

async function fileToImageData(file: File): Promise<ImageData> {
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.src = url;

  try {
    await new Promise<void>((resolve) => {
      img.onload = () => resolve();
    });
    const canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext("2d");
    if (!ctx) throw new Error("Could not get canvas context");
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, canvas.width, canvas.height);
  } finally {
    URL.revokeObjectURL(url);
  }
}

Process images and get the result​

Pass each image to the session and check the processing status after each call. A status of awaiting-other-side means the engine needs the document's other side before it can return a final result. When the status is success, retrieve the final result.

// Process the front side
const frontImageData = await fileToImageData(frontFile);
const frontProcessResult = await session.process(frontImageData);
const status = frontProcessResult.inputImageAnalysisResult.processingStatus;

if (status === "awaiting-other-side") {
  // The document has a back side — process it too
  const backImageData = await fileToImageData(backFile);
  await session.process(backImageData);
}

// Retrieve the final result
const result = await session.getResult();
console.log("First name:", result.firstName?.latin?.value);
console.log("Document number:", result.documentNumber?.latin?.value);
console.log("Date of expiry:", result.dateOfExpiry?.originalString?.latin?.value);

Clean up​

Release the session when done to free scanning resources. On Android and iOS, closing or releasing the session is sufficient. On web, also terminate the core instance.

await session.delete();
await blinkIdCore.terminate();
Last updated on