How to Improve the Reading of Barcodes with Noise

Noise in barcode images poses a challenge for successful barcode reading.

There are many types of noise. Here are some examples:

  1. Patterned noise caused by bad printing or scanning.1

    Patterned noise

    Image source

  2. Noise caused by taking a photo with digital cameras in low light.2

    Low light

We can run image processing to improve the reading of barcodes with noise. Dynamsoft Barcode Reader has various parameters settings we can customize to utilze image processing methods. In the following part, we are going to create a web barcode reader using the JavaScript version of Dynamsoft Barcode Reader to demonstrate how to do this.

Getting started with Dynamsoft Barcode Reader


Median filtering is useful to reduce noise in images. In Dynamsoft Barcode Reader, we can use the IPM_GRAY_SMOOTH processing method to achieve a similar effect.

Here is the code:

async function decodeWithSmooth(){
  let settings = await reader.getRuntimeSettings();
  settings.furtherModes.imagePreprocessingModes = [Dynamsoft.DBR.EnumImagePreprocessingMode.IPM_GRAY_SMOOTH, 0, 0, 0, 0, 0, 0, 0];
  settings.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_PREPROCESSED_IMAGE; // to retrieve the image after smoothing
  await reader.updateRuntimeSettings(settings);
  let imageSource = document.getElementById("patterned");
  let results = await reader.decode(imageSource);

This works for the first example with patterned dots. It also works for images with salt and pepper noise.

Example image before smoothing:

Example image after smoothing:


Binarization is useful to segment the barcode from its background. Although the second example above has a low contrast and a noisy background, the barcode is darker than the rest part of the image. So we can still have a good binarized image.

Here is the code:

async function decodeWithNormalThreshold(){
  let settings = await reader.getRuntimeSettings();
  settings.binarizationModes[0] = Dynamsoft.DBR.EnumBinarizationMode.BM_THRESHOLD;
  settings.intermediateResultTypes = Dynamsoft.DBR.EnumIntermediateResultType.IRT_BINARIZED_IMAGE; // to retrieve the image after binarization
  await reader.updateRuntimeSettings(settings);
  reader.setModeArgument("BinarizationModes",0,"BinarizationThreshold","-1"); // set the threshold to -1 so that it will calculate the value automatically
  let imageSource = document.getElementById("imageSource");
  let results = await reader.decode(imageSource);

Example image before binarization:

Low light

Example image after binarization:

Source Code

You can find the source code and live demos here: