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

Question

我正在使用Ionic和Cordova创建Instagram克隆.我需要能够拍照或从用户库(已经设置)中选择并在其上放置一个设置图像(就像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

首先,让我们在程序员的上下文中理解对过滤器概念的理解.虽然物理光学滤波器实际上是放在图像前面的部分透明物体,但数字图像处理中的某些滤波器无法以这种方式复制.对于框架,边缘阴影或其他艺术品,这可能会起作用.

但是,这个想法可以在HTML5/CSS3/JS中使用图层和不透明度在某种程度上完成,但它不会真的是Instagram克隆.Instagram中有很多图像处理选项,你无法通过这种方式实现.相反,有时原始图像中的每个像素根据某些功能而改变并复制到新的滤波图像.像这样:

在我过去手工编写了一些与此相关的内容,我可以说这种类型的东西在使用当前最低限度的API时并不是非常容易.你必须在如何构建图像,如何操纵颜色,像素组等方面拥有相对良好的支持,并拥有一些固体矩阵数学技能.也就是说,完全有可能只使用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
}

看看这个例子 - 使用一些函数,一些矩阵数学和HTML5画布,可以处理具有一些很酷且有用的效果的图像.理论上,这些可以一起使用或单独使用.

我最近没见过的更好的选择是CamanJS.这基本上简化了Canvas API,并增加了大量的图像处理功能和轻松保存图像的功能.

在互动的例子页面可以给你一个想法,你可以用这个库完成的任务.