Создание фильтров изображения камеры с помощью Ionic и Cordova

Я создаю клон Instagram, используя Ionic и Cordova. Мне нужно иметь возможность сделать снимок или выбрать из пользовательской библиотеки (уже настроенной) и поместить на него заданное изображение (например, фильтр, который использует 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');
                });
        };

Что было бы лучшим подходом для этого?


cordova-plugins cordova ionic-framework angularjs ngcordova
person messif    schedule 08.09.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Сначала давайте проясним ваше понимание концепции фильтров в контексте программиста. Хотя физические оптические фильтры буквально представляют собой частично прозрачный объект, помещенный перед изображением, некоторые фильтры в манипуляции с цифровыми изображениями не могут быть воспроизведены таким образом. Для рамок, краевых теней или других вычурных вещей это может сработать.

Демонстрация оптического фильтра

Эта идея, однако, может быть реализована в определенной степени с использованием слоев и непрозрачности в 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 и добавляет массу функций для работы с изображениями и возможность легко сохранять изображения.

Страница интерактивных примеров может дать вам представление о том, чего можно добиться с помощью этой библиотеки.

person tabrindle    schedule 08.09.2015
comment
Это было невероятно информативно. И CamanJS тоже был полезен. Однако проблема все еще существует. Мне нужно наложить другое изображение поверх изображения, полученного/полученного от пользователя. То есть это было бы похоже на статую, против которой можно было бы позировать на изображении. - person messif; 08.09.2015
comment
Нет проблем — вы также можете использовать холст для этого. Просто нарисуйте оба изображения в одном контексте холста. Вы просто вызываете: context.drawImage(image1, x, y); context.drawImage (изображение2, х, у); Если вам нужны другие способы компоновки изображений, попробуйте компоновку: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/ - person tabrindle; 09.09.2015