The gallery with photo-filters

Today I want to continue talking about Moon Gallery jQuery library. It’s time to consider photo-filters.
There are two ways to transform images in JavaScript:
1. You can draw a canvas element and replace your image with it.
2. Or you can use SVG-filters.
First way consumes significantly more resources, but it’s supported by almost all modern browsers.
Second way is preferable, but it’s not supported by old Android devices.
Moon Gallery supports both technics. You can even set your gallery so that SVG-filters will be used if a browser supports them, otherwise canvas will be used.

Canvas filters

The library supports these canvas filters:

grayscale

canvasFilters: [['grayscale']]

brightness

canvasFilters: [['brightness', [20]]]

sepia

canvasFilters: [['sepia']]

contrast

canvasFilters: [['contrast', [20]]]

vibrance

canvasFilters: [['vibrance', [20]]]

saturate

canvasFilters: [['saturate', [20]]]

colorize

canvasFilters: [['colorize', [25, 150, 50, 25]]]

noise

canvasFilters: [['noise', [25]]]

You can use

Combination of canvas filters

SVG filters

If we say about canvas there is the limited list of filters which you can use. There is no such list of SVG-filters. To use some SVG-filter you should add an SVG-element with a filter to your page, and then specify the id in the settings.