Ember-filter-image NPM

ember-filter-image

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

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