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

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

然而，这个想法可以在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
}

查看此example - 只使用一些函数，一些矩阵数学和HTML5画布，可以使用一些很酷且有用的效果来处理图像。理论上，这些可以一起使用或单独使用。

我最近才看到的更好的选择是CamanJS。这基本上简化了Canvas API，增加了大量的图像处理功能，并且可以轻松保存图像。

interactive examples页面可以让您了解使用此库可以完成的任务。

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

1 个答案: