使用 Ionic 和 Cordova 创建相机图像过滤器

Question

我正在使用 Ionic 和 Cordova 创建 Instagram 克隆。我需要能够从用户库（已设置）中拍摄照片或 select 并在其上放置一组图像（就像 snapchat 使用的滤镜，但另一个图像不仅仅是文本）。但是，我不知道该怎么做。

这是抓图功能 --

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

最好的方法是什么？

Answer 1

首先让我们在程序员的语境中理顺你对过滤器概念的理解。虽然物理 optical filters 实际上是放置在图像前面的部分透明物体，但数字图像处理中的某些滤镜无法以这种方式复制。对于框架、边缘阴影或其他艺术元素，这可能会起作用。

然而，这个想法可以在一定程度上使用 HTML5/CSS3/JS 中的图层和不透明度来实现，但它不会真正成为 Instagram 的克隆。 Instagram 中有很多图像处理选项无法通过这种方式实现。相反，有时原始图像中的每个像素都会根据某种功能进行更改并复制到新的过滤图像中。像这样：

我过去曾手工编写过一些达到这种效果的代码，我可以说这种类型的事情在目前的最低限度 APIs 下并不是很容易做好。您必须在如何构建图像、如何处理颜色、像素组等方面有相对较好的支持，并具有一些立体矩阵数学技能。也就是说，完全可以只使用 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
}

看看这个 example - 只需使用几个函数、一些矩阵数学和 HTML5 canvas，就可以处理具有一些很酷且有用的效果的图像。理论上，这些可以一起使用或单独使用。

我最近没见过的更好的选择是CamanJS。这实质上为您简化了 Canvas API，并添加了大量图像处理功能和轻松保存图像的能力。

interactive examples 页面可以让您了解使用此库可以完成什么。

使用 Ionic 和 Cordova 创建相机图像过滤器

Creating camera image filters with Ionic and Cordova

angularjs

cordova

ionic-framework

cordova-plugins

ngcordova