Set camera width and height phonegap camera

Question

I am currently in the process of creating a mobile app that uses the Phonegap (Cordova) camera plugin. It correctly captures the image and displays it where I want to, but I can't seem to set the targetWidth and targetHeight options, as described.

targetWidth: Width in pixels to scale image. Must be used with targetHeight. Aspect ratio remains constant. (Number)

targetHeight: Height in pixels to scale image. Must be used with targetWidth. Aspect ratio remains constant. (Number)

As I understand, this will change the image-width and height on output. They, however, don't seem to be working.

A suggestion that I found while researching for a solution, said to use the optional parameter allowEdit. In this I could get the user to select a pre-set squared image. This however, doesn't seem to work either.

See my code below for reference.

camera: function() {
    //Fire up the camera!
    navigator.camera.getPicture(onSuccess, onFail, {
        destinationType: Camera.DestinationType.DATA_URL,
        allowEdit: true,
        targetWidth: 512,
        targetHeight: 512
    });
},

Neither of the attemps succeeded in what I wanted; a fixed width and height for the image captured.

How can I set the image width and height on this image?

score 3 · Answer 1 · answered Dec 08 '14 at 10:01

Try this one my friend. remove allowEdit : true

camera: function() {
        navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,
            targetWidth: 512,
            targetHeight: 512,
            destinationType: navigator.camera.DestinationType. DATA_URL,
            saveToPhotoAlbum: true,
            correctOrientation: true
        });
    }

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

How about changing your mind to resizing image after it has been captured?

Useful article for resizing image with HTML5 Canvas

edited May 23 '17 at 12:09

Community

1
1

answered Dec 02 '14 at 02:53

Jack He

1,683
3
18
29

score 0 · Answer 3 · answered Dec 02 '14 at 05:12

I use following and it works well.

{
   quality: 25,
   targetWidth: 500,
   targetHeight: 500,
   destinationType: Camera.DestinationType.FILE_URI,
   sourceType: Camera.PictureSourceType.CAMERA,
   correctOrientation: true
}

Its also possible to modify the plugin native code as per own needs. In case you are trying on android. here is the fix.

Inside execute function , both parameters are set by default as zero that means a full size captured by device, otherwise if some values are passed by args parameters then those are taken into account.

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

            this.callbackContext = callbackContext;

     if (action.equals("takePicture")) {
                int srcType = CAMERA;
                int destType = FILE_URI;
                this.saveToPhotoAlbum = false;
                this.targetHeight = 0;
                this.targetWidth = 0;
                this.encodingType = JPEG;
                this.mediaType = PICTURE;
                this.mQuality = 80;

                this.mQuality = args.getInt(0);
                destType = args.getInt(1);
                srcType = args.getInt(2);
                this.targetWidth = args.getInt(3);
                this.targetHeight = args.getInt(4);
                this.encodingType = args.getInt(5);
                this.mediaType = args.getInt(6);
                this.allowEdit = args.getBoolean(7);
                this.correctOrientation = args.getBoolean(8);
                this.saveToPhotoAlbum = args.getBoolean(9);

see : https://github.com/apache/cordova-plugin-camera/blob/master/src/android/CameraLauncher.java#L115

If possible you can set it as well in the native code and works fine.

Set camera width and height phonegap camera

3 Answers3