ember-filter-image

An ember-cli addon for cross-browser image filtering using SVG filters.

Just take me to the demo!

Usage

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
  })
}

Scaling

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}}

Options

Why not use CSS filters?

Because IE11 doesn't support them...

Supported filters

• contrast
• saturation
• brightness

Adding more filters just a matter of implementing the respective filter function, though.

Installation

• git clone <repository-url> this repository
• cd ember-filter-image
• npm install
• bower install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.