https://github.com/mwdchang/image-util
Javascript image manipulation utilities
https://github.com/mwdchang/image-util
image-effects image-filters
Last synced: 3 months ago
JSON representation
Javascript image manipulation utilities
- Host: GitHub
- URL: https://github.com/mwdchang/image-util
- Owner: mwdchang
- Created: 2020-07-11T13:26:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2026-01-23T00:50:17.000Z (5 months ago)
- Last Synced: 2026-01-23T17:48:21.317Z (5 months ago)
- Topics: image-effects, image-filters
- Language: TypeScript
- Homepage: https://mwdchang.github.io/image-util
- Size: 4.26 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# image-util
A collection of composable Javscript image manipulation utilties and effects filters.
## Usage example
Quickstart
```html
import * as ImageUtil from "https://cdn.jsdelivr.net/gh/mwdchang/image-util@latest/dist/index.js"
// Load image
const img = await ImageUtil.loadImage('https://picsum.photos/300', { width: 300, height: 300 });
document.body.append(ImageUtil.createCanvas(img));
// Filter
const painterly = ImageUtil.painterlyFilter(img, 4, 10);
document.body.append(ImageUtil.createCanvas(painterly));
// Using web-worker
const worker = ImageUtil.newWorker();
(async () => {
const sepiaImage = await worker.sepiaFilter(img);
document.body.append(ImageUtil.createCanvas(sepiaImage));
})();
```
Composing filters, using matrix-mult, glow, and blur to simulate a nightvision filter
```js
const nightVision = ImageUtil.uniformBlur(
ImageUtil.glowFilter(
ImageUtil.nightVisionFilter(img)
), 6
);
document.body.append(ImageUtil.createCanvas(nightVision));
```
## Build library
The final files are under `build/dist/*`
```
npm run build
```
## Run Examples
Runs on http://localhost:8090
```
npm run develop
```
## Filters and effects
### Color Matrix Effects
3x3 color matrix transformations
- **Sepia**: Applies a sepia tone to the image.
- **Polaroid**: Simulates the look of a Polaroid picture.
- **Technicolor**: Mimics the Technicolor film effect.
- **Kodak Chrome**: Simulates the look of Kodak Chrome film.
- **Browni**: Applies a brownish tone to the image.
- **Vintage**: Gives the image a vintage look.
- **Night Vision**: Simulates a night vision effect.
### Convolutional Effects
Convolution related effects
- **Blur**: Applies a simple box blur to the image.
- **Gaussian Blur**: Applies a Gaussian blur to the image.
- **Edge Detection**: Detects the edges in the image.
### Pixel Transformation Effects
These filters manipulate the individual pixels of the image.
- **Greyscale**: Converts the image to greyscale.
- **Invert**: Inverts the colors of theimage.
- **Color Splash**: Converts the image to greyscale except for a selected color.
### Geometric Transformation Effects
Distortions
- **Fisheye**: Creates a fisheye lens effect.
- **Shear**: Shears the image.
### Stylistic Effects
Complex filters that produce a specific artistic style.
- **Dodge**: Creates a dodge effect.
- **Glow**: Adds a glow effect to the image.
- **Halftone**: Creates a halftone pattern effect.
- **Hatch**: Creates a hatching effect.
- **Painterly**: Creates a painterly effect.
- **Sketch**: Creates a sketch effect.