image-filter

A JavaScript library to apply image filtering effects. It can be used to enhance scanned documents images or photos.

Online demos:

1. Basic
2. Integration with Dynamsoft Document Viewer

Install

Via NPM:

npm install image-filter-js

Via CDN:

<script type="module">
  import { ImageFilterHandler, BlackwhiteFilter, InvertFilter, GrayscaleFilter, SepiaFilter } from 'https://cdn.jsdelivr.net/npm/image-filter-js/dist/image-filter.js';
</script>

Usage

Process an image with the desired effect and save the data onto a Canvas.

import { ImageFilterHandler, BlackwhiteFilter, InvertFilter, GrayscaleFilter, SepiaFilter, GaussianBlurFilter } from 'image-filter-js';
let cvs = document.createElement("canvas");
let grayscaleFilter = new GrayscaleFilter(cvs);
grayscaleFilter.process(img);

There are five filters:

1. Grayscale
2. Black & White
3. Sepia
4. Invert
5. Gaussian Blur

The BlackwhiteFilter's constructor takes several extra arguments.

• threshold: the global threshold
• enableOTSU: whether to use OTSU to decide the threshold
• enableAdaptiveThresholding: enable adaptive thresholding to determine the threshold for each pixel based on neighbouring pixels
• blockSize: the block size for adaptive thresholding
• C: the constant C to adjust the threshold in adaptive threhsolding

let blackwhiteFilter = new BlackwhiteFilter(cvs,threshold,enableOTSU,enableAdaptiveThresholding,blockSize,C);

The GaussianBlurFilter's constructor takes one extra argument: radius.

Work with Dynamsoft Document Viewer

The package can use Dynamsoft Document Viewer's custom image filter feature to work as its filter handler so that we can use the package's filters in Dynamsoft Document Viewer.

You can set it up with the following code:

let filterHandler = new ImageFilterHandler();
Dynamsoft.DDV.setProcessingHandler("imageFilter", filterHandler);

License

MIT