put in a frame image taken from the camera or on own camera

Question

I'm studying, and I'm trying to develop an application I have in mind.

But, I'm trying a way to put a background image or a frame for a captured photo or even at the time the camera is triggered.

I am developing for android using angular with ionic framework.

I do not know if it's possible, but I thank you! O/

Answer 1

Yes it is possible.Apply some css rules for image tag after capturing.

1.Capture image

First add the Camera plugin using the command

cordova plugin add org.apache.cordova.camera

HTML

<button ng-click="takePhoto()">Capture</button>
<li ng-repeat="i in myImage">
    <img ng-src="{{baseURL+i}}">
</li>

Controller

$scope.takePhoto = function() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 75,
        targetWidth: 320,
        targetHeight: 320,
        destinationType: 0,
        saveToPhotoAlbum: true
    });

    function onSuccess(imageData) {
        $scope.imgURI = imageData;
        $scope.myImage.push($scope.imgURI);
        $scope.$apply();

    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }

};

Refer

2.Save photo after capture

If you want to save this photo in your storage.Please add file plugin also,

cordova plugin add org.apache.cordova.file

Controller

$scope.takePhoto = function() {
    if (window.cordova) {
        var options = {
            quality: 100,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA,
            encodingType: Camera.EncodingType.JPEG,
            cameraDirection: 1,
            saveToPhotoAlbum: true
        };
        $cordovaCamera.getPicture(options).then(function(imagePath) {
            $scope.imgURI = imagePath;
            //Grab the file name of the photo in the temporary directory
            var currentName = imagePath.replace(/^.*[\\\/]/, '');
            //Create a new name for the photo
            var d = new Date(),
                n = d.getTime(),
                newFileName = n + ".jpg";
            //Move the file to permanent storage
            $cordovaFile.moveFile(cordova.file.tempDirectory, currentName, cordova.file.dataDirectory, newFileName).then(function(success) {
                //success.nativeURL will contain the path to the photo in permanent storage, do whatever you wish with it, e.g:
                //createPhoto(success.nativeURL);

            }, function(error) {
                //an error occured
            });

        }, function(error) {
            //An error occured
        });
    }
};