Creating camera image filters with Ionic and Cordova

Question

I'm creating an Instagram clone using Ionic and Cordova. I need to be able to take a picture or select from users library (already set up) and place a set image on top of it (Like a filter that snapchat uses, but another image not just text). However, I am at a loss for how to do this.

This is the function for grabbing the image --

$scope.open = function () {
            init();
            PhotoService
                .open({
                    quality           : GallerySetting.get('imageQuality'),
                    allowEdit         : GallerySetting.get('imageEdit'),
                    correctOrientation: GallerySetting.get('imageEdit'),
                    targetWidth       : GallerySetting.get('imageWidth'),
                    targetHeight      : GallerySetting.get('imageHeight'),
                    saveToPhotoAlbum  : GallerySetting.get('imageSaveAlbum')
                })
                .then(function (resp) {

                    $scope.data       = 'data:image/jpeg;base64,' + resp;
                    $scope.form.photo = resp;

                    $ionicModal.fromTemplateUrl('module/gallery/view/gallery.capture.modal.html', {
                        scope          : $scope,
                        focusFirstInput: true
                    }).then(function (modal) {
                        $scope.modal = modal;
                        $scope.modal.show();
                    });

                    $scope.closeModal = function () {
                        $scope.modal.hide();
                        $scope.modal.remove();
                    };
                })
                .catch(function () {
                    $state.go('gallery.home');
                });
        };

What would be the best approach for this?

Answer 1

First let's straighten out your understanding of the concept of filters in a programmer's context. Though physical optical filters are literally a partially transparent object put in front of an image, some filters in digital image manipulation cannot be replicated this way. For frames, edge shadows or other artsy things, this might work.

This idea can, however, be done to a certain extent using layers and opacity in HTML5/CSS3/JS, but it will not really be an Instagram clone. There are a lot of image processing options in Instagram you cannot achieve this way. Rather sometimes each pixel in the original image is changed according to some function and copied to the new filtered image. Like this:

Having hand coded something to this effect to this in my past, I can say this type of thing is not terribly easy to do well with current bare minimum APIs. You have to have a relatively good backing in how images are constructed, how to manipulate colors, groups of pixels etc. and have some solid matrix mathematics skills. That said, it is entirely possible using nothing but HTML5 Canvas.

var canvas = document.getElementById('elementId'),
context = canvas.getContext('2d');

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (var i = 0; i < imageData.data.length; i+=4) {
     // Manipulate pixels here
}

Check out this example - Using just a few functions, some matrix math and HTML5 canvas, one can process images with some cool and useful effects. Theoretically, these can be used together or alone.

A better option that I hadn't seen before recently is CamanJS. This essentially simplifies the Canvas API for you, and adds a ton of image manipulation functions and the ability to easily save images.

The interactive examples page can give you an idea as to what you can accomplish with this library.