How to create custom camera plugin?

Hi,

I am trying to implement an apache cordova mobile app which takes pictures and retrieve them from gallery. The problem is I do NOT want to take whole screen pictures. I need to crop the screen while taking the picture somehow like in the example picture below. Is there a way to implement this? By the way I am using VS 2015 and apache cordova camera plugin istalled.

Thanks in advance & Best Regards.

Here is a sample camera

2 Likes

Can’t you first take the picture (using the Cordova camera plugin) and then crop the resulting image?

I’ve used this approach successfully, with the ngImgCrop plugin:

So first i take the picture, then I use the Cordova file plugin to transfer the file from the temp folder to the app’s document folder, then I launch an Ionic modal dialog with the ngImgCrop directive to let the user crop the image.

The resulting image (which can be made much smaller in KB’s by lowering the JPEG quality) can then be saved elsewhere, for instance (as I did) to Amazon S3.

This approach worked very well for me.

Have you tried the allow edit option the camera plugin has?

Hi leob,

Thanks for your help. It sounds fantastic. Would you please help me to implement your solution?

Best Regards.

Hi luisito95,

Does edit option do what I want? Would you please show me?

Thanks in advance & Best Regards.

The “edit” option works but for me was too limited because I also want to allow the user to upload an existing image from their image library (which the Camera plugin also supports) - is this also a requirement for you?

In that case the “edit” option doesn’t do anything, so that’s why I went with ngImgCrop.

Let me know whichever you want and I can show you.

(the “edit” option on the camera plugin is very simple, it’s just one of the options in the options–object)

See my answer above, let me know which one you need. If the “edit” option of the Camera plugin is enough for you then I’d recommend that because it’s much simpler than my solution, But for me it was not enough.

Hi leob,

I will go with the crop plugin. Would you please help me?

Thanks in advance & Best Regards.

Sure, give me half an hour and I’ll put a code sample together.

So when you got the image then how/where do you want to store it, you thought about that?

Can I store in gallery for both IOS and Android? Or just store somewhere else that I can use iconic tabs framework and click this “show images” tab and display all of this cropped images? Is this possible? (By the way I am using VS 2015.)

You mean locally in the phone’s image gallery?

Yes I think so, using the Cordova file transfer plugin you can save it anywhere. I’m using Amazon S3 because I need to share the images over a network but you can local storage of course.

I’ll put some sample code together.

Yep, the phone’s image gallery. Can I only get the images that I have taken with this plugin to the ionic tab? Did you get what I mean?

Not quite, what has “ionic tab” to do with it? I mean whether you use tabs or a sidemenu or any other UI pattern, what has it to do with images that you acquire via the camera plugin?

Let me put is this way, I am using cordova camera plugin. I would like to use a template (ionic tabs lets say) and in one tab there should be “take photo” option. In another tab, it is “choose photo” option. So when user clicks the choose photo option, those images that are taken by this camera plugin should be displayed. (not all the images in the gallery if it is possible) Am I clear?

Yes clear. Then I’d do it this way:

In tab 1 you take a pic with the camera, crop it, and store it in a certain known subfolder of the app’s data directory. Then in tab 2 you just enumerate the files that are in that known subfolder.

Does that make sense?

superb :smile:
As I mentioned earlier, I am using Visual Studio 2015, is it gonna be problematic to join your code with mine?

No I don’t think so, wouldn’t know why. Code is code, it’s just text isn’t it? :wink:

So you do need the cropping functionality, right?

Yep, thank you so much for your help.

So, well first part is I have an Angular service which I call “ImageService” which looks like this:

  .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: source,
        allowEdit: false, //true,
        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
      };
    }

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

You get how this piece works?

Looks like cordova camera plugin :blush: