我正在使用Ionic和AngularJS为 Android 开发一个 Webapp 。
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);
});
例如，如果我现在用我的 8 兆像素拍照并执行老式滤镜，则需要 14 秒以上才能完成该过程。那太长了。没有用户会为此等待 14 秒，并且 Instagram 上的过滤器示例会立即执行。
例如，像 200 x 200 像素这样的较小图片也需要 3 到 4 秒才能完成。
怎么会花这么多时间？有解决方案吗？