Web Photo Filter is a web component to apply Instagram-like WebGL filters to photos

The main goal of this component is to be implemented in the mobile application Fluster to let users enhance photos of their rooms and flats to make their listings more attractive.

Other web based filter solutions use CSS (for example Instagram.css) or Javascript to modify images.

CSS solutions do not modify the underlying image, and only apply a visual layer to it.

Most Javascript based solutions are not optimized well enough to be used on mobile devices, and speed was a top priority. We wanted to create an almost instantaneous filter solution, similar to what Instagram leverages in it's mobile applications.

As of Feburary 2018, Web Photo Filter utilizes WebGL based technology because it is well supported across modern browsers and mobile devices.

In the future, Web Photo Filter may use WebGL 2 when it is better supported.

In the case that WebGL is not supported on a partciular platform, and to avoid producing an error, the component will display the original image without modifications.

This project is a web component built with the amazing Stencil compiler.

The project framework and structure follows the stencil-component-starter project structure.

$ npm install web-photo-filter

Please note that I was not able to integrate the library in an Ionic v4 app in a traditional way as described in the Stencil documentation

However, I was able to integrate the library as described below.

After you install the library, please proceed with the following steps:

1. Import the module into the component.module that you would like to use Web Photo Filter, and add CUSTOM_ELEMENTS_SCHEMA to your list of schemas.

    @NgModule({
        declarations: [
            MyPage
        ],
        imports: [
            CommonModule,
            FormsModule,
            IonicModule,
            RouterModule.forChild(routes)
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class MyPageModule {
    }
   

2. In index.html import the component. As far as I understood, web component built with Stencil inherit Lazy Loading, therefore, no worries about effect on your boot time

     <script async src="webphotofilter.js"></script>
   

3. Finally add the following to your assets configuration in your angular.json files in oder to include the component in your bundle

   "assets": [
       {
         "glob": "webphotofilter.js",
         "input": "node_modules/web-photo-filter/dist",
         "output": "./"
       },
       {
         "glob": "webphotofilter/*",
         "input": "node_modules/web-photo-filter/dist",
         "output": "./"
       }
   ]
   

The Web Photo Filter Component could be use like following:

<web-photo-filter src="assets/img/test.jpg" filter="sepia"></web-photo-filter>

The only required parameter is the img srs tag. Right now, the component does not support URL based images such as https://url.com/myimage.jpg

Filter is an optional parameter. Omitting this attribute or specifying a null value will result in no processing within the component. The source image will be displayed unmodified.

The list of available filters is available in class src/types/web-photo-filter-type.tsx

filter is a string parameter

 <web-photo-filter src="assets/img/test.jpg" filter="sepia"></web-photo-filter>

Angular example:

 <web-photo-filter src="{{imgURI}}" filter="{{filter}}"></web-photo-filter>     

 <web-photo-filter src="assets/img/test.jpg" filter="null"></web-photo-filter>

or

 <web-photo-filter src="assets/img/test.jpg"></web-photo-filter>

If you would like to start or process the result after the component did finished is processing, an event will be triggered containing the resulting image (no filter) or canvas and an indication telling you if WebGL is supported or not.

<web-photo-filter (filterLoad)="imageLoaded($event)" src="{{imgURI}}" filter="{{filter}}"></web-photo-filter>

The description of the event is available in the interface src/types/web-photo-filter-result.tsx

filterLoad emit an event of type WebPhotoFilterResult

Sometimes it's handy to keep the source image not displayed in the DOM (for example if you post process the image or the canvas with cropperjs). To do so, use the optional attribute keep

<web-photo-filter src="assets/img/test.jpg" filter="sepia" keep="true"></web-photo-filter>

keep is a boolean parameter

If you want to hide the source image you kept, you could for example proceed like following

1. Include in your app the filters in a div

      <div id="preview">
             <web-photo-filter src="assets/img/test.jpg" filter="sepia" keep="true"></web-photo-filter>
      </div>
   

2. Add the following scss code to your app

    #preview {
         web-photo-filter {
             > img:first-of-type, > canvas:first-of-type {
                 max-width: 100%;
                 display: none;
             }
         }
    }
   

Some filters (brightness, saturation, contrast and hue) are variable. To modify their default values, you could use the variable level

<web-photo-filter src="assets/img/test.jpg" filter="brightness" level="1.2"></web-photo-filter>

level is a number parameter

A showcase of all filters is available at https://web-photo-filter.firebaseapp.com

The above showcase is the www folder of this project deployed in Firebase. If you clone the repository you could run it locally using npm start

This web component would not had been possible without the brilliant article and WebGL core processing code written by Mike Riethmuller ❤️

The sources of nine filters (Brownie, Brightnes, etc.) were adapted from the project WebGLImageFilter by Dominic Szablewski 👍

WebGL is well supported by most modern browsers, but there may be some use cases where it is not. In the case that WebGL is not supported, there is a fallback scenario implemented in the component.

During testing I found that Web Photo Filter works very well on iPhone 6 and above. It is possible to load all filters on the same page without performance issues.

During testing I found that these filters do not work very well on Android 7 and above. Testing for Android was ran on a Samsung Edge (Android 7.1), Nexus 5X and Sony (Android 8.1).

The Android Webview seems to handle canvas less actively and it's iPhone counterpart. Therefore I do not recommend using all filters on the same page, but only integrating a few of them at a time, otherwise you'll see a negative performance impact.

I used the Cordova plugin Device to restrict the use of the filters according the devices' models or versions.

Simon Grimm (@saimon24) published a walkthrough tutorial "Ionic Image Filter Like Instagram Using WebGL Filters" which displays step by step how to create a Ionic app and include this component easily

MIT © David Dal Busco