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

Question

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

angularjscordovaionic-frameworkcordova-pluginsngcordova

4

我将使用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');
                });
        };

什么是最佳方法？

- messif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tabrindle · Accepted Answer

首先让我们澄清程序员上下文中"过滤器"的概念。虽然物理光学滤镜实际上是放置在图像前面的部分透明对象，但某些数字图像处理中的过滤器无法以这种方式复制。对于边框、边缘阴影或其他艺术效果，这可能有效。

然而，使用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，并添加了大量的图像操作功能和轻松保存图像的能力。

交互式示例页面可以让您了解您可以通过此库实现什么。