Skip to main content
Version: v8xxx

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 with the document photo use case​

note

Added in BlinkID Web v8003.0.0, and in BlinkID Android and iOS v8002.0.0. Earlier v8xxx versions don't have use cases; follow Initialize and create a session instead.

The document photo use case builds session settings for static images. It sets the input image source to photo for you. Use its quality option to choose between balanced (default), high-accuracy, and permissive for low-quality uploads.

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

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

const sessionSettings = await blinkIdCore.buildDocumentPhotoSettings({
  quality: "permissive",
});

const session = await blinkIdCore.createScanningSession(sessionSettings);

Then continue with Load an image for scanning.

Initialize and create a session​

note

Applies to versions earlier than BlinkID Web v8003.0.0, and BlinkID Android and iOS v8002.0.0. If you have a newer version, you can also use the document photo use case.

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