Image manipulation using CamanJS

Question

I found a library for image manipulation named CamanJS the examples looked nice so i tried to use it. I got the following html:

<ion-view class="menu-content" view-title="Filter">
    <ion-content overflow-scroll="true">
        <div id="polaroid-filter-img" class="polaroid-filter-img">
            <img id="polaroid-filter-img-img" ng-src="{{polaroid.cropped}}" />
        </div>
        <div class="polaroid-filter-examples">
            <div ng-repeat="filter in filters" ng-click="performFilter(filter.id)" id="filter.id">
                <img id="{{filter.id}}" ng-src="{{filter.image}}"/>
                <span>{{filter.name}}</span>
            </div>
        </div>
    </ion-content>
</ion-view>

This css:

.polaroid-filter-img {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 10%;
}

.polaroid-filter-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

@media only screen and (orientation: portrait) {
    .polaroid-filter-examples {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: auto;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .polaroid-filter-examples div {
        display: inline-block;
    }
}

@media only screen and (orientation: landscape) {
    .polaroid-filter-examples {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        white-space: nowrap;
    }
    .polaroid-filter-examples div {
        display: block;
    }
}

.polaroid-filter-examples div {
    font-size: 14px;
    text-align: center;
    color: white;
}

.polaroid-filter-examples img {
    margin: 0 auto;
    padding: 2px 2px 2px 2px;
    width: 125px;
    height: 125px;
}

.polaroid-filter-examples span {
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
}

And this JavaScript:

angular.module("App.Polaroids-Edit-Filter")

.controller("PolaroidsEditFilterController", function ($scope, $stateParams, PolaroidsService, FiltersService) {
    $scope.polaroid = PolaroidsService.getPolaroid($stateParams.id, $stateParams.size);
    $scope.filters = FiltersService.getFilters();

    var previousFilter = null;

    $scope.performFilter = function (id) {
        if (id != null && id != previousFilter) {
            if (previousFilter != null) {
                document.getElementById(previousFilter).style.border = "none";
            }

            document.getElementById(id).style.border = "solid #FF0000";

            if (id == "normal") {
                var image = document.getElementById("polaroid-filter-img-img");

                img.src = $scope.polaroid.cropped;
            } else {
                var image = document.getElementById("polaroid-filter-img-img");

                Caman(image, function () {
                    if (id == "vintage") {
                        this.vintage();
                    }

                    this.render(function () {
                        console.log("filtering finished");
                    });
                });   
            }

            previousFilter = id;
        }
    };

    function initView() {
        var width = screen.width * 0.7;
        var height = width;
        var initialId = $scope.filters[0].id;

        previousFilter = initialId;

        document.getElementById("polaroid-filter-img").style.width = width + "px";
        document.getElementById("polaroid-filter-img").style.height = height + "px";
        document.getElementById(initialId).style.border = "solid #FF0000";
    }

    var intervalId = setInterval(function () {
        initView();

        window.clearInterval(intervalId);
    }, 100);
});

When i start my application and choose a picture i get the following:

When i now click the vintage filter the following happens:

As you can see the image gets resized to real width and height and after about 20 seconds:

the filter gets applied. So there are two strange behaviours i dont understand.

• First: Why does the image gets resized?
• Second: Why does it take so long (20 seconds) to apply the filter? I found a demo where they used CamanJS and in that demo the filtering is performing nearly instantly: Instagram Filters

Can you help me understanding whats going wrong there?

EDIT

If i do it with a canvas like shown here the canvas just disappears when applying a filter.

Answer 1

I have check your code and found 1 minor issue with css. In your class .polaroid-filter-img img , there is position: absolute; . This should be position: relative; . Like for example:

.polaroid-filter-img img {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

Another issue i thought is in your javascript in function initView . In this function your following values get wrong height and width :

    var width = screen.width * 0.7;
    var height = width;
    var initialId = $scope.filters[0].id;

Please check height and width in console log

Answer 2

in case it still helps you solving the issue check this other Article Angularjs code works in desktop chrome, but not in mobile chrome The solution there works with Ionic+AngularJS+Phonegap nicely, no strange resizing. HTH.