How to create custom camera plugin?

Yup, then you create a FileManager service using the cordova file transfer plugin:

    //
    // 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
    //

    .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;
      };

      return {
        downloadFile: downloadFile
      };
    });

With this service you can copy a file.

I have to add these plugins right?

Yes, you use the commands:

ionic plugin add cordova-plugin-camera
ionic plugin add cordova-plugin-file
ionic plugin add cordova-plugin-file-transfer

this is where things get messy :wink: Do they have git repos?

Sure they have but why? Don’t need github repos, just use these commands.

So I need to implement this via CLI?

You can do whatever you like best but the CLI makes things the easiest, most of Ionic is based on the CLI …
although I believe they now have a GUI tool called “Ionic Labs” or something

File manager version 2, now with “remove file” added …

    //
    // 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
    //

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

This is the complete file manager service.

So there is an other requirement for me. I need to know how to use CLI and at the end how to test it on iphone device. Would you please help me?

There are tons of tutorials about the Ionic CLI. There’s also something called Ionic Box which they made specially for Windows users, this makes it easier to set up the CLI, maybe you should check that out.

And if you want to test on an iPhone then I would recommend using Ionic View, because then you don’t need to do an iOS build.

I will definetly check Ionic Box. By the way what is remove file for?

Like I just said you should check out Ionic View if you need to test on iOS.

The removeFile function? Well if you’ve cropped the image then you may want to remove the original uncropped image, that’s what I use removeFile for.

However instead of using ngImgCrop (which is quite complex) you might want to look at the “edit” option of the camera plugin because that allows simple cropping without all that ngImgCrop stuff.

So you then pass these options to the camera plugin:

{
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: targetSize, // e.g. 500,
targetHeight: targetSize, // e.g. 500,
correctOrientation: true // SEE: simonmacdonald.blogspot.ca/2012/07/change-to-camera-code-in-phonegap-190.html
}

And finally your controller looks something like this:

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 + '/MyWonderfulPictures';  // 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));
    });
  }
};

How could I use the tabs?

You would do something like:

    <ion-list>
      <ion-item ng-repeat="image in images">
        <img ng-src="{{image.url}}">
      </ion-item>
    </ion-list>

where “images” is a list of the images that you populate in your controller and which is the list of file names in the folder:

 cordova.file.dataDirectory + '/MyWonderfulPictures'

To get the files in that folder you probably also need the Cordova file plugin. But that’s something I didn’t need so I didn’t write code for that.

thank you @leob, I will try and let you know.

Best Regards.

Okay cool! Yes I think this should be enough to get you going.

Hi leob,

Could you be kind enough to do a post on this ?.

Taking a picture , or selecting from exist picture library , cropping it, and saving as profile picture .

Please you would have saved the lives of a whole genneration.

You mean in the sense of a blog post?

What I could do is add this functionality to my starter app on Github.

Let me know which format you prefer.