我正在学习,我正在尝试开发一个我想到的应用程序。
但是,我正在尝试为拍摄的照片或甚至在触发相机时放置背景图像或框架。
我正在使用angular with ionic framework为android开发。
我不知道是否可能,但谢谢你! O /
答案 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/