https://github.com/qq15725/modern-filters
A image / text / video filter collection
https://github.com/qq15725/modern-filters
animation-filter canvas filter image image-filter text video webgl
Last synced: about 1 year ago
JSON representation
A image / text / video filter collection
- Host: GitHub
- URL: https://github.com/qq15725/modern-filters
- Owner: qq15725
- License: mit
- Created: 2023-03-29T12:45:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-04T09:21:51.000Z (about 3 years ago)
- Last Synced: 2025-05-13T00:09:53.951Z (about 1 year ago)
- Topics: animation-filter, canvas, filter, image, image-filter, text, video, webgl
- Language: TypeScript
- Homepage: https://modern-filters.vercel.app
- Size: 646 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
modern-filters
## 📦 Install
```sh
npm i modern-filters
```
## 🦄 Usage
```ts
import { createTexture, createEmbossFilter, createFadeFilter } from 'modern-filters'
const image = new Image()
image.src = 'example.jpg'
image.onload = () => {
const texture = createTexture({
source: image,
view: document.querySelector('canvas'),
})
texture.useFilter([
createEmbossFilter({ strength: 5 }),
createFadeFilter({ duration: 1.2 }),
])
// This zero is filter current time of timeline
texture.draw(0)
// texture.draw(1)
// Read image data for current frame
// texture.readImageData()
}
```
## 🚀 Filter creaters
> createFilter(options?: Options)
- [createAdjustmentFilter](src/create-adjustment-filter.ts)
- [createBlurFilter](src/create-blur-filter.ts)
- [createColorMatrixFilter](src/create-color-matrix-filter.ts)
- [createColorOverlayFilter](src/create-color-overlay-filter.ts)
- [createEmbossFilter](src/create-emboss-filter.ts)
- [createFadeFilter](src/create-fade-filter.ts)
- [createGodrayFilter](src/create-godray-filter.ts)
- [createKawaseBlurFilter](src/create-kawase-blur-filter.ts)
- [createMultiColorReplaceFilter](src/create-multi-color-replace-filter.ts)
- [createPixelateFilter](src/create-pixelate-filter.ts)
- [createTiltShiftFilter](src/create-tilt-shift-filter.ts)
- [createTwistFilter](src/create-twist-filter.ts)
- [createZoomBlurFilter](src/create-zoom-blur-filter.ts)
## Types
See the [types.ts](src/types.ts)
## Reference
- [pixijs/pixijs](https://github.com/pixijs/pixijs)
- [pixijs/filters](https://github.com/pixijs/filters)