ember-filter-image

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

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

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/.