An ember-cli addon for cross-browser image filtering using SVG filters.
Just take me to the demo!
Just add the filter-image
component to your template:
{{filter-image src="image.jpg" filters=filters}}
src
should be pretty self-explanatory, and filters
is an object containing the filter settings, e.g. (in your route):
setupController(controller) {
controller.set('filters', {
contrast: 1,
saturation: 1,
brightness: 0
})
}
By default, the rendered image will be scaled such that it is contained in the parent DOM element. If you'd prefer it to be cropped apply this:
{{filter-image src="image.jpg" filters=filters crop=true}}
If you don't want the aspect ratio to be locked, apply this:
{{filter-image src="image.jpg" filters=filters lockAspectRatio=false}}
Name | Type | Default | Description |
---|---|---|---|
src | String |
N/A | The source of the image |
filters | Object |
{ saturation: 1, contrast: 1, brightness: 0 } |
The values for the filters to apply |
crop | Boolean |
false |
Whether to crop the image on scaling (this is obviously ignored if the aspect ratio is not locked) |
lockAspectRatio | Boolean |
true |
Whether to lock the aspect ratio on scaling |
Because IE11 doesn't support them...
Adding more filters just a matter of implementing the respective filter function, though.
git clone <repository-url>
this repositorycd ember-filter-image
npm install
bower install
ember serve
- Visit your app at http://localhost:4200.
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit http://ember-cli.com/.