https://github.com/klouskingsley/imagedata-filters
some filters for imagedata of canvas context2d
https://github.com/klouskingsley/imagedata-filters
blur brightness canvas context contrast css3 css3-filter filter grayscale hue-rotate imagedata invert opacity saturate sepia
Last synced: 8 months ago
JSON representation
some filters for imagedata of canvas context2d
- Host: GitHub
- URL: https://github.com/klouskingsley/imagedata-filters
- Owner: klouskingsley
- License: mit
- Created: 2018-01-20T02:17:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-13T15:09:10.000Z (almost 8 years ago)
- Last Synced: 2025-08-21T01:40:14.969Z (10 months ago)
- Topics: blur, brightness, canvas, context, contrast, css3, css3-filter, filter, grayscale, hue-rotate, imagedata, invert, opacity, saturate, sepia
- Language: JavaScript
- Homepage: https://klouskingsley.github.io/imagedata-filters/
- Size: 71.3 KB
- Stars: 27
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# imagedata-filters
imagedata-filters is a JavaScript library to operate canvas imagedata. It similar to [css3 filter function](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
[中文文档](#%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3)
## Install
Via npm
```
$ npm i imagedata-filters
```
Or download [imagedata-filtes.min.js](https://github.com/klouskingsley/imagedata-filters/raw/master/dist/imagedata-filters.min.js) and include in your HTML
## Usage
```html
var originImg = document.getElementById('originImg')
var filterImg = document.getElementById('filterImg')
var filterCtx = filterImg.getContext('2d')
filterCtx.drawImage(originImg, 0, 0)
var imageData = filterCtx.getImageData(0, 0, filterImg.width, filterImg.height), {amount: 1.2}
imagedataFilters.contrast(imageData, {amount: '1.2'}) // change imageData directly cause imageData.data is readonly
filterCtx.putImageData(imageData, 0, 0)
```
## Api
All the apis is similar to css3 filter function, the difference between css3 filter function and imagedata-filters function is that css3 function's argument is a css number value but imagedata-filters function's argument is an object which contains a key `amount` which is relevant to the css number value in css3 filter function.
### .brightness(*imageData*, options)
### .contrast(*imageData*, options)
### .grayscale(*imageData*, options)
### .hueRotate(*imageData*, options)
`options.amount` is a value of radian, this is different from css3 hue-rorate.
### .invert(*imageData*, options)
### .opacity(*imageData*, options)
### .saturate(*imageData*, options)
### .sepia(*imageData*, options)
### .blur(*imageData*, options)
> use `blur` carefully, because Gaussiam blur compute may has a performance issue with the increase of `options.amount`
## License
MIT
# 中文文档
## 安装
通过npm安装
```
$ npm i imagedata-filters
```
或者直接下载[imagedata-filtes.min.js](https://github.com/klouskingsley/imagedata-filters/raw/master/dist/imagedata-filters.min.js)并嵌入你的HTML页面中
## 使用
```html
var originImg = document.getElementById('originImg')
var filterImg = document.getElementById('filterImg')
var filterCtx = filterImg.getContext('2d')
filterCtx.drawImage(originImg, 0, 0)
var imageData = filterCtx.getImageData(0, 0, filterImg.width, filterImg.height), {amount: 1.2}
imagedataFilters.contrast(imageData, {amount: '1.2'}) // 因为imageData.data是只读的，所以这里会直接修改imageData.data
filterCtx.putImageData(imageData, 0, 0)
```
## Api
所有的api都和css3 filter中的函数类似，不同的是，css3 fitler函数的参数是一个css数值, 而imagedata-filters函数中的`options`是一个对象，它有一个`amount`的key，对应着css3 filter里面的那个参数.
### .brightness(*imageData*, options)
### .contrast(*imageData*, options)
### .grayscale(*imageData*, options)
### .hueRotate(*imageData*, options)
`options.amount`是一个弧度值，这一点与css3 hue-rorate不同。
### .invert(*imageData*, options)
### .opacity(*imageData*, options)
### .saturate(*imageData*, options)
### .sepia(*imageData*, options)
### .blur(*imageData*, options)
> 使用`blur`时注意，因为随着`options.amount`的增大，高斯模糊的计算可能会有性能问题.
## License
MIT