Android上的CamanJS速度极慢

Question

我正在使用Ionic和AngularJS开发适用于Android的Web应用程序。

HTML：

<ion-view class="menu-content" view-title="Filter">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="done()">
            Done
        </button>
    </ion-nav-buttons>
    <ion-content overflow-scroll="true">
        <div id="polaroid-filter-img" class="polaroid-filter-img">
            <canvas id="polaroid-filter-img-img" data-caman-hidpi-disabled="true"></canvas>
        </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>

JavaScript的：

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

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

    var canvas;
    var context;
    var image;
    var currentFilter = null;

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

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

            if (id == "normal") {
                Caman(canvas, image, function () {
                    this.revert(false);
                    this.render(function () {
                        console.log("reset completed");
                    });
                });
            } else {
                if (id == "vintage") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.vintage();
                        this.render(function() {
                            console.log("vintage completed"); 
                        });
                    });
                } else if (id == "lomo") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.lomo();
                        this.render(function() {
                            console.log("lomo completed"); 
                        });
                    });
                } else if (id == "clarity") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.clarity();
                        this.render(function() {
                            console.log("clarity completed"); 
                        });
                    });
                } else if (id == "sinCity") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.sinCity();
                        this.render(function() {
                            console.log("sinCity completed"); 
                        });
                    });
                } else if (id == "sunrise") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.sunrise();
                        this.render(function() {
                            console.log("sunrise completed"); 
                        });
                    });
                } else if (id == "crossProcess") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.crossProcess();
                        this.render(function() {
                            console.log("crossProcess completed"); 
                        });
                    });
                } else if (id == "orangePeel") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.orangePeel();
                        this.render(function() {
                            console.log("orangePeel completed"); 
                        });
                    });
                } else if (id == "love") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.love();
                        this.render(function() {
                            console.log("love completed"); 
                        });
                    });
                } else if (id == "grungy") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.grungy();
                        this.render(function() {
                            console.log("grungy completed"); 
                        });
                    });
                } else if (id == "jarques") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.jarques();
                        this.render(function() {
                            console.log("jarques completed"); 
                        });
                    });
                } else if (id == "pinhole") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.pinhole();
                        this.render(function() {
                            console.log("pinhole completed"); 
                        });
                    });
                } else if (id == "oldBoot") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.oldBoot();
                        this.render(function() {
                            console.log("oldBoot completed"); 
                        });
                    });
                } else if (id == "glowingSun") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.glowingSun();
                        this.render(function() {
                            console.log("glowingSun completed"); 
                        });
                    });
                } else if (id == "hazyDays") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.hazyDays();
                        this.render(function() {
                            console.log("hazyDays completed"); 
                        });
                    });
                } else if (id == "herMajesty") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.herMajesty();
                        this.render(function() {
                            console.log("herMajesty completed"); 
                        });
                    });
                } else if (id == "nostalgia") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.nostalgia();
                        this.render(function() {
                            console.log("nostalgia completed"); 
                        });
                    });
                } else if (id == "hemingway") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.hemingway();
                        this.render(function() {
                            console.log("hemingway completed"); 
                        });
                    });
                } else if (id == "concentrate") {
                    Caman(canvas, image, function () {
                        this.revert(false);
                        this.concentrate();
                        this.render(function() {
                            console.log("concentrate completed"); 
                        });
                    });
                }
            }

            currentFilter = id;
        }
    };

    $scope.done = function () {   
        if(currentFilter != null && currentFilter != "normal") {
            PolaroidsService.setFilter($stateParams.id, $stateParams.size, currentFilter);
            PolaroidsService.setFiltered($stateParams.id, $stateParams.size, canvas.toDataURL());
        }

        $ionicHistory.goBack(-1);
    };

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

        currentFilter = 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";

        canvas = document.getElementById("polaroid-filter-img-img");
        context = canvas.getContext("2d");
        image = new Image();

        image.crossOrigin = "";
        image.src = $scope.polaroid.cropped;
        image.onload = function () {
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0, image.width, image.height);
        }
    }

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

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

如果我现在用我的800万像素拍照并执行老式过滤器，例如它需要14秒才能完成。这太长了。没有用户会等待14秒，并且Instagram上的过滤器会立即执行。

例如200 x 200像素的较小的像素也需要3到4秒钟才能完成。

怎么花这么多时间？有解决方案吗？