A JavaScript library to apply image filtering effects. It can be used to enhance scanned documents images or photos.
Online demos:
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>
Process an image with the desired effect and save the data onto a Canvas.
import { ImageFilterHandler, BlackwhiteFilter, InvertFilter, GrayscaleFilter, SepiaFilter } from 'image-filter-js';
let cvs = document.createElement("canvas");
let grayscaleFilter = new GrayscaleFilter(cvs);
grayscaleFilter.process(img);
There are four filters:
- Grayscale
- Black & White
- Sepia
- Invert
The BlackwhiteFilter
's constructor takes two extra arguments. You can specify its threshold or enable automatic threshold calculating using OTSU's method.
let blackwhiteFilter = new BlackwhiteFilter(cvs,127,true);
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);
MIT