Camera image resize/compression

ionic-v1
1

Hi, I need to figure out how to compress/resize an image that I capture from then cordova-camera plugin. Right now the images are 4.7mb, and 2448 × 3264 in size. This is nowhere near compatible for uploading or usable in my application. Here is the code I use to take the picture, I dont actually see a size option, I see quality which I have set to 50. Is there a size option?

My ideal configuration would be like instagrams. Im not sure how to get something like that, as the camera takes a pic using the full screen.

$scope.takePicture = function() {
            // **** S3. Check ****
           //alert("got camera button click");

            var options = {
                quality: 50,
                destinationType: destinationType,
                sourceType: pictureSource,
                encodingType: 0
            };
            if (!navigator.camera)
            {

                // **** S4. Check ****
                //alert("S4. Lost Camera");

                // error handling
                return;
            }
            navigator.camera.getPicture(
                function (imageURI) {

                    // **** S5. Check ****
                    //alert("S5. got picture success ", imageURI);

                    $scope.mypicture = imageURI;

                    // **** S5. Check ****
                    //alert($scope.mypicture);
                },
                function (err) {

                    // **** S5. Check ****
                    //alert("S5. got no picture error ", err);

                    // error handling camera plugin
                },
                options);
        };
2

Use these options from the Cordova plugin:

  • targetWidth: Width in pixels to scale image. Must be used with targetHeight. Aspect ratio is maintained. (Number)
  • targetHeight: Height in pixels to scale image. Must be used with targetWidth. Aspect ratio is maintained. (Number)

Camera Options

1 Like
3

Hey thanks, I found out shortly after posting. Works Great!

4

after cropping, original image is coming instead of the cropped image. Are you having the same problem in android??

6

May i know what you had done in this code to get the result?

7

I am also trying to resize and compress the image before uploading. Trying with the below camera option.

imageUpload(){

	Camera.getPicture({
		destinationType: Camera.DestinationType.DATA_URL,			
		sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
		targetWidth: 100,
		targetHeight: 100
	}).then((imageData: any) => {
		// imageData is a base64 encoded string
		this.base64Image = "data:image/jpeg;base64," + imageData;
	}, (err) => {
		console.log(err);
	});
}

But with that the quality becomes poor while display. Any solution without much of a compromise in quality.

8

AD: Try Onymos Media Component to handle your media resize/compression needs. Check out our cool hands-on demo of the World’s 1st variable compression of Photos and Videos on iOS and Android.

9

Thanks It is working. You can have 500 by 500

10

am taking image through camera and display that image on canvas…when am adding targetwidth and target height option in my camera option…it does not effect on image …any solution ???

11

Hi Umesh,

If you want to use camera image resize or compression just try once quality and set whatever quality of image you want. See below example that i used in my app and its working perfect. I hope it will help you and others also.

Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
quality:5,
correctOrientation: true
}).

Thank You

12

yes thank you …but when am setting targetwidth and targetheight it does not gave me that size image

13

Can you please check once this code and let me know if its useful or else share your code.

Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 320,
targetHeight: 320,
correctOrientation: true
}).then((data) => {
this.model.imageString = data;
//this.model.imageString1 = “data:image/jpeg;base64,” + data;
this.isHideBox = 1;
let options = {
message: “Image uploaded”,
duration: 2500,
cssClass: “toast.scss”,
position: ‘middle’
};
this._tc.create(options).present();

          }, (error) => {
              alert(error);
              
          });
14

okay thanks i will try this …can you please give me your email id ??

15

bhavsang@itoneclick.com

16

hi ,
if we give targetwidth and targetHeight to the image , it will not show up according to given width and height , not with the original size of the image. please help me to retain the original size of image and quality with reducing the size .