Hello,
Actually this is someelse's code. So I am trying to figure it out. Shortly,
the button did NOT display! How can I fix this my friend?
Here is my html:
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<!--
Customize the content security policy in the meta tag below as needed.
Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'
data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self'
'unsafe-inline'; media-src *">
<title>LoTTo</title>
<!-- LoTTo references -->
<link href="css/ionic.css" rel="stylesheet" />
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="scripts/angular.min.js"></script>
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/index.js"></script></head><body ng-app="starter">
<ion-header-bar class="bar-assertive">
<h1 class="title">Photos</h1>
</ion-header-bar>
<ion-content ng-controller="ImageController" padding="true">
<button class="button button-full button-assertive"
ng-click="addImage()">
Take Photo
</button>
</ion-content>
</body></html>
And the app.js which I am trying to make it work:
var batchModule = angular.module('starter', ['ionic', 'ngCordova'])
function ImageController($scope, $q, ImageService, FileManager) {
function addImage() {
var type = 1; // 1 = camera, 2 = photo library
var fileName = 'image -' + Date.now() + '.jpg';
// Set image options (quality, height/width)
var imageOpts = getImageOpts(type);
var targetDir = cordova.file.dataDirectory + '/LottoPictures'; //
target directory on the native file system
var fileUrl = null; // file URL on the native file system
//
// Now execute all the steps of the "pipeline" via Promise chaining:
//
ImageService.getPicture(type, imageOpts.pictureQuality,
imageOpts.targetSize).then(function (imageUrl) {
$log.debug("ImageService#getPicture imageUrl = '" + imageUrl +
"'");
return FileManager.downloadFile(imageUrl, targetDir,
'uncropped-' + fileName);
}).then(function (result) {
$log.debug("FileManager#downloadFile uncropped result = " +
JSON.stringify(result));
fileUrl = result.nativeURL;
// image file downloaded to the native file system, clean up
the temp files
ImageService.cleanup();
}).then(function (ignore) {
$log.debug("Done");
}).catch(function (error) {
$log.debug("Error in addImage: " + JSON.stringify(error));
});
}
};
batchModule.factory('ImageService', function ($cordovaCamera, $q, $log) {
function optionsForType(type, quality, targetSize) {
var source;
switch (type) {
case 0:
source = Camera.PictureSourceType.CAMERA;
break;
case 1:
source = Camera.PictureSourceType.PHOTOLIBRARY;
break;
}
return {
quality: quality, // e.g. 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true, // PASS TRUE HERE TO ALLOW CROPPING AND SO ON
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true, //false,
targetWidth: 500, // e.g. 500,
targetHeight: 500, // e.g. 500,
correctOrientation: true // SEE:
simonmacdonald.blogspot.ca/2012/07/change-to-camera-code-in-phonegap-190.html
};
}
var getPicture = function (type, quality, targetSize) {
return $q(function (resolve, reject) {
var options = optionsForType(type, quality, targetSize);
$cordovaCamera.getPicture(options).then(function (imageUrl) {
$log.debug('ImageService#getPicture, $cordovaCamera.getPicture
imageUrl = ' + imageUrl);
resolve(imageUrl);
}, function (error) {
$log.debug('ImageService#getPicture, $cordovaCamera.getPicture
error = ' + JSON.stringify(error));
reject(error);
});
});
};
var cleanup = function () {
// Cleanup temp files from the camera's picture taking process. Only
needed for Camera.DestinationType.FILE_URI.
// Returns a promise the result of which is probably ignored.
return $cordovaCamera.cleanup();
};
return {
getPicture: getPicture,
cleanup: cleanup
};});
//// https://github.com/apache/cordova-plugin-file//
http://www.raymondcamden.com/2014/08/18/PhoneGapCordova-Example-Getting-File-Metadata-and-an-update-to-the-FAQ//
http://www.html5rocks.com/en/tutorials/file/filesystem///
http://community.phonegap.com/nitobi/topics/dataurl_to_png//
batchModule.factory('FileManager', function ($q, $log, $cordovaFile,
$cordovaFileTransfer, $cordovaFileOpener2) {
var downloadFile = function(sourceURI, targetDir, targetFile) {
var deferred = $q.defer();
$log.debug("FileManager#downloadFile source (original): '" + sourceURI
+ "'");
sourceURI = decodeURI(sourceURI);
var targetPath = targetDir + targetFile;
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(sourceURI, targetPath, options,
trustHosts).then(
function(result) {
deferred.resolve(result);
}, function(error) {
$log.debug("error: " + JSON.stringify(error));
deferred.reject(error);
}, function (progress) {
//$timeout(function () {
// $scope.downloadProgress = (progress.loaded / progress.total)
* 100;
//})
});
return deferred.promise;
};
var removeFile = function (baseDir, filePath) {
$log.debug("FileManager#removeFile baseDir = '" + baseDir + "',
filePath = '" + filePath + "'");
return $cordovaFile.removeFile(baseDir, filePath);
};
return {
downloadFile: downloadFile,
removeFile: removeFile
};});
19 Ekim 2015 Pazartesi 09:50:21 UTC+3 tarihinde Антон Цепковский yazdı:
>
>
> Cenk KIZILDAĞ: you need make directive ionContent (
> https://docs.angularjs.org/guide/directive) where you can have a
> controller or simply to have a link function with scope.
>
> воскресенье, 18 октября 2015 г., 21:55:25 UTC+3 пользователь Cenk KIZILDAĞ
> написал:
>>
>> Hi guys,
>>
>> I am new to angularjs. I would like to implement a mobile app which take
>> picture, crop it then send it to WCF service. I got a sample but don't know
>> how to make it work. I tried like this but content didn't show up. How
>> to make it work?
>>
>> Here is my sample html:
>>
>> <ion-content ng-controller="ImageController" padding="true"> <button
>> class="button button-full button-assertive" ng-click="addImage()"> Take
>> Photo </button> </ion-content>
>>
>> And here is portion of the app.js:
>>
>> var batchModule = angular.module('starter', ['ionic', 'ngCordova']) var
>> ImageController = function ($scope, $q, ImageService, FileManager) {
>> function addImage() { var type = 1; // 1 = camera, 2 = photo library var
>> fileName = 'image -' + Date.now() + '.jpg'; // Set image options (quality,
>> height/width) var imageOpts = getImageOpts(type); var targetDir =
>> cordova.file.dataDirectory + '/LottoPictures'; // target directory on the
>> native file system var fileUrl = null; // file URL on the native file
>> system // // Now execute all the steps of the "pipeline" via Promise
>> chaining: // ImageService.getPicture(type, imageOpts.pictureQuality,
>> imageOpts.targetSize).then(function (imageUrl) {
>> $log.debug("ImageService#getPicture imageUrl = '" + imageUrl + "'"); return
>> FileManager.downloadFile(imageUrl, targetDir, 'uncropped-' + fileName);
>> }).then(function (result) { $log.debug("FileManager#downloadFile uncropped
>> result = " + JSON.stringify(result)); fileUrl = result.nativeURL; // image
>> file downloaded to the native file system, clean up the temp files
>> ImageService.cleanup(); }).then(function (ignore) { $log.debug("Done");
>> }).catch(function (error) { $log.debug("Error in addImage: " +
>> JSON.stringify(error)); }); } };
>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
