放入从相机或自己的相机拍摄的帧图像

时间:2015-11-06 02:06:02

标签: javascript angularjs mobile ionic hybrid-mobile-app

我正在学习,我正在尝试开发一个我想到的应用程序。

但是,我正在尝试为拍摄的照片或甚至在触发相机时放置背景图像或框架。

我正在使用angular with ionic framework为android开发。

我不知道是否可能,但谢谢你! O /

2 个答案:

答案 0 :(得分:3)

是的,有可能。捕获后为image标记应用一些css规则。

1.Capture image

首先使用命令

添加 Camera 插件
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>

<强>控制器

$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.捕获后保存照片

如果您想将此照片保存在存储空间中。请同时添加 file 插件,

cordova plugin add org.apache.cordova.file

<强>控制器

$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
        });
    }
};

答案 1 :(得分:0)

简单!

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

阅读更多:http://learn.ionicframework.com/formulas/cordova-camera/