https://github.com/tony-xlh/image-filter
A JavaScript library to perform image filtering.
https://github.com/tony-xlh/image-filter
adaptive-thresholding binarization grayscale image-fiter image-processing otsu sepia
Last synced: 3 months ago
JSON representation
A JavaScript library to perform image filtering.
- Host: GitHub
- URL: https://github.com/tony-xlh/image-filter
- Owner: tony-xlh
- Created: 2024-03-01T05:29:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-05T03:27:03.000Z (over 1 year ago)
- Last Synced: 2025-08-09T08:33:14.374Z (10 months ago)
- Topics: adaptive-thresholding, binarization, grayscale, image-fiter, image-processing, otsu, sepia
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://tony-xlh.github.io/image-filter)
2. [Integration with Dynamsoft Document Viewer](https://tony-xlh.github.io/image-filter/document-viewer.html)
## Install
Via NPM:
```bash
npm install image-filter-js
```
Via CDN:
```html
import { ImageFilterHandler, BlackwhiteFilter, InvertFilter, GrayscaleFilter, SepiaFilter } from 'https://cdn.jsdelivr.net/npm/image-filter-js/dist/image-filter.js';
```
## Usage
Process an image with the desired effect and save the data onto a Canvas.
```js
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
```js
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](https://www.dynamsoft.com/document-viewer/docs/introduction/index.html)'s [custom image filter](https://www.dynamsoft.com/document-viewer/docs/features/advanced/imagefilter.html) 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:
```js
let filterHandler = new ImageFilterHandler();
Dynamsoft.DDV.setProcessingHandler("imageFilter", filterHandler);
```
## License
MIT