Skip to main content

Image Operations | Web Document and Barcode Scanner

Image Filters#

You can also apply filters to images. The scanbotSDK object contains the following function:

async applyFilter(imageBuffer: ArrayBuffer, filterType: ImageFilter): Promise<ArrayBuffer>

So you can simply pass the image object from your DetectionResult to the filter function and return the image with the filter.

ArrayBuffer in this context is equal to the Uint8Array image in your DetectionResult object.

Scanbot WebSDK allows the following filters:

  • Binarization filters:

    • Binarized
    • OtsuBinarization
    • PureBinarized
    • LowLightBinarization
    • LowLightBinarization2
    • DeepBinarization
  • Color filters:

    • Color
    • Gray
    • ColorDocument
    • BlackAndWhite
    • EdgeHighlight
    • Trinarization
    • LightMapNormalization

They are available under BinarizationFilter and ColorFilter types, respectively.

Detect Barcodes on still images#

ScanbotSDK provides a handy API to detect barcodes on still images. In conjunction with third-party libraries such as PDF.js, it can be used very effectively to also detect barcodes from an imported .pdf file.

To test it out for yourself, simply create a basic file picker:

<input class="file-picker" type="file" accept="image/jpeg" width="48" height="48">

Reference it in your script tag or file and listen to events:

picker.onchange = (e) => {    e.preventDefault();    let reader = new FileReader();    let file = e.target.files[0];    // Be sure to read it as a data url. ScanbotSDK expects a base64 string    reader.readAsDataURL(file);
    reader.onload = async (e) => {        const result = await scanbotSDK.detectBarcodes(reader.result);        console.log("barcode detection result", result);    };};

The result will be your your standard BarcodeResult that is also the result of Barcode Scanner UI.