imagedata-filters
Version:
some filters for imagedata of canvas context2d
141 lines (76 loc) • 3.73 kB
Markdown
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).
[中文文档](
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
```html
<img src="./example/atx.jpg" id="originImg">
<canvas id="filterImg" width="800" height="800">
<script src="./dist/imagedata-filters.min.js"></script>
<script>
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)
</script>
```
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.
`options.amount` is a value of radian, this is different from css3 hue-rorate.
> use `blur` carefully, because Gaussiam blur compute may has a performance issue with the increase of `options.amount`
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
<img src="./example/atx.jpg" id="originImg">
<canvas id="filterImg" width="800" height="800">
<script src="./dist/imagedata-filters.min.js"></script>
<script>
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)
</script>
```
所有的api都和css3 filter中的函数类似，不同的是，css3 fitler函数的参数是一个css数值, 而imagedata-filters函数中的`options`是一个对象，它有一个`amount`的key，对应着css3 filter里面的那个参数.
`options.amount`是一个弧度值，这一点与css3 hue-rorate不同。
> 使用`blur`时注意，因为随着`options.amount`的增大，高斯模糊的计算可能会有性能问题.
MIT