Javascript Camanj在Android上的速度非常慢

我正在使用和为Android开发一个Webapp

HTML:

例如，如果我现在用我的800万像素拍摄一张照片，并执行vintage filter，则需要14秒以上的时间才能完成该过程。太长了。任何用户都不会等待14秒，instagram上的示例过滤器会立即执行

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

---

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

canvas在移动设备上通常速度很慢，我尝试使用它们将图像转换为base64格式，花了大约8秒钟：如果这是真的，我应该考虑为此编写一个本机代码插件。隐马尔可夫模型。。。我不喜欢这个…首先，你可以使用CSS3过滤器进行视觉表现，这会更快，只需在后台用CamanJS进行图像处理，这样用户就不必等待了。这确实是一个解决办法。谢谢。

<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>

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);
});